How To Build A Simple Tabbed Menu

JorgeM 2 278 Views

A while back, I was working on some web pages that required a tabbed menu at the top of the content. In addition, the requirement was that the page should not perform a post back when the user clicked on the individual tabs. It was very important to have a simple, clean, and responsive look and feel. I could have used one of the countless examples found on the Internet, but I wanted to use implement something that was very minimal, clean, and simple. I was not happy with what I found out there. So this is what I came up with. I used some basic HTML, CSS, and jQuery, although the JavaScript I used could have been written without the help of jQuery. My pages already included jQuery so I decided to leverage it.

The code works and renders the same across modern versions of Chrome, Internet Explorer, and Firefox.

You can see a working demo on JSFiddle.net

Here is a screenshot of what the HTML markup and Styling produces...

tabbed-menu.png

If you find it useful, feel free to use it for your own projects.

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* {
    margin: 0;
    padding: 0;
}
    
body {
    background-color: #f0f0f0;
    color: #606060;
}

#wrapper {
    margin: 2em auto;
    width: 40em;
    border: 1px solid #aaa;
}

#main-content {
    height: 480px;
    background-color: #fff;
    padding: 1em;
    position: relative;
    border-top: 1px solid #aaa;
}
#tabs {
    background-color: #c8b6da;
    padding: 1.5em 1.5em 0.4em; 
}

#tab-list li {
    display: inline;
    background-color: #e7e7e7;
    padding: 0.5em 0;
    border: 1px solid #aaa;
    cursor: pointer;
}

#tab-list li.tab span {
    padding: 0.5em 1em;
}

#tab-list li.tab-active span {
    background-color: #fff;
    position: relative;
    z-index: 999;
}

#tab-list li.tab-active {
    color: #e17009;
}

.div-tab {
    display: none;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

    <div id="wrapper">
        <div id="tabs">
            <ul id='tab-list'>
                <li id='tab-1' class='tab'><span>Tab-1</span></li>
                <li id='tab-2' class='tab'><span>Tab-2</span></li>
                <li id='tab-3' class='tab'><span>Tab-3</span></li>
            </ul>
        </div>

        <div id="main-content">
            <div id="div-tab-1" class="div-tab">Content #1</div>
            <div id="div-tab-2" class="div-tab">Content #2</div>
            <div id="div-tab-3" class="div-tab">Content #3</div>
        </div>
    </div>

<script>

     // Initialize default tab and content
     $('#tab-1').addClass('tab-active');
     $('#div-tab-1').show();

     // Handle the tab clicks
     $('.tab').click(function () {
         var active = $(this).attr('id');
         $('.tab').removeClass('tab-active');
         $(this).addClass('tab-active');
         $('.div-tab').hide();
         $('#div-' + active).show();
     });

</script>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview