Creating CSS3/jQuery crossbrowser Drop-down menu with tabs

Date: 15th Aug 2011 Author: admin 6 Comments
Posted in: HTML/CSS, jQuery |Tags: , , , ,

Creating CSS3/jQuery crossbrowser Dropdown menu #7

Creating CSS3/jQuery crossbrowser Drop-down menu with tabs

This is our seventh CSS3 menu. Today we will make dropdown menu with parental tabs (as first level). Part of the work we pass on to the shoulders of jQuery (switching tabs, display popups). In the current version – we have three levels of menus. So, lets start !


This is our final result (how menu will looks):

CSS3/jQuery menu7

Here are samples and downloadable package:

Live Demo
download in package

Ok, download our package and lets start creating this menu!


Step 1. HTML

Here are html code of our menu. I will hide repeating elements to make code smaller here. Anyway – you will able to see whole code in our package.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/script.js'></script>
    <title>CSS3/jQuery Drop-down menu with tabs #7</title>
</head>
<body>
<div class="example">

    <!-- defining main tabs elements -->
    <div id="tabs-container">
        <ul class="tabs">
            <li class="active"><a href="#">Section one</a></li>
            <li><a href="#">Section two</a></li>
            <li><a href="#">Section three</a></li>
            <li><a href="#">Section four</a></li>
        </ul>
    </div>

    <!-- defining top menu -->
    <div id="nav-container">
        <ul class="nav" id="1">
            <!-- defining top menu elements -->
            <li><a href="http://script-tutorials.com/">Home</a></li>
            <li><a href="http://script-tutorials.com/">Tutorials</a>
                <!-- defining sub menu elements -->
                <ul class="sub">
                    <li><a href="http://script-tutorials.com/category/html-css/">HTML / CSS</a></li>
                    <li><a href="http://script-tutorials.com/category/jquery/">JS / jQuery</a></li>
                    <li><a href="http://script-tutorials.com/category/php/">PHP</a></li>
                    <li><a href="http://script-tutorials.com/category/mysql/">MySQL</a></li>
                </ul>
            </li>
            <li><a href="http://script-tutorials.com/category/resources/">Resources</a>
                <ul class="sub">
                    <li><a href="http://script-tutorials.com/category/xslt/">XSLT</a></li>
                    <li><a href="http://script-tutorials.com/category/ajax/">Ajax</a></li>
                    <li><a href="http://script-tutorials.com/category/html-css/">HTML / CSS</a></li>
                </ul>
            </li>
            <li><a href="#">Menus #3</a>
                <ul class="sub">
                    <li><a href="#">link 31</a></li>
                    <li><a href="#">link 32</a></li>
                    <li><a href="#">link 33</a></li>
                    <li><a href="#">link 34</a></li>
                    <li><a href="#">link 35</a></li>
                </ul>
            </li>
            <li><a href="#">Menus #4</a>
                <ul class="sub">
                    <!-- repeated sublinks -->
                </ul>
            </li>
            <li><a href="http://script-tutorials.com/about/">About</a></li>
            <li><a href="http://script-tutorials.com/creating-css3jquery-crossbrowser-dropdown-menu-with-tabs/">Back</a></li>
        </ul>
        <ul class="nav" id="2" style="display:none;">
            <li><a href="#">Menus #5</a></li>
            <li><a href="#">Menus #6</a></li>
            <li><a href="#">Menus #7</a></li>
        </ul>
        <!-- and other repeated subs with similar structure -->
    </div>

    <div style="clear:both"></div>
</div>
</body>
</html>

Step 2. CSS

Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – menu #7 styles.

css/style.css

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
}
.example {
    position:relative;
    background:url("../images/background.jpg") no-repeat scroll center center #fff;
    width:640px;
    height:586px;
    border:1px #000 solid;
    margin:20px auto;
    padding:5px 0;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* main menu styles */

/* tabs section */
#tabs-container {
    clear:both;
    font-size:11px;
    height:26px;
    margin:0 auto;
    padding:0
}
.tabs li {
    float:left;
    list-style:none;
    position:relative
}
.tabs li a:first-child {
    margin-left:10px
}
.tabs li a {
    background:#f3f3f3;
    border:none;
    border-left:1px solid #d5d5d5;
    border-right:1px solid #d5d5d5;
    border-top:1px solid #d5d5d5;
    color:#333;
    display:block;
    margin:0 2px 0 0;
    padding:6px 10px 4px
}
.tabs li.active a {
    -webkit-border-radius:4px 4px 0 0;
    background:#fff;
    border-bottom:1px solid #fff;
    border-left:1px solid #d5d5d5;
    border-radius:4px 4px 0 0;
    border-right:1px solid #d5d5d5;
    border-top:1px solid #d5d5d5;
    color:#222;
    display:block;
    padding:6px 10px 4px
}
.tabs li.child a {
    -webkit-border-radius:0 4px 0 0;
    background:#f3f3f3;
    border-radius:0 4px 0 0;
    color:#333;
    display:block;
    margin:0;
    padding:6px 10px 4px
}
.tabs li a:hover {
    background:#fafafa;
    border-bottom:1px solid #d5d5d5;
    color:#fff;
    text-decoration:none
}

/* Targeting the first level menu */
.tabs {
    display:block;
    margin:0;
    padding:1px 0 2px;
    position:absolute;
    z-index:100
}
.tabs > li > a:hover {
    background:#ececec;
    color:#222
}
.tabs > li.active > a:hover {
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
    background:#fff;
    border-bottom:1px solid #fff;
    border-radius:3px 3px 0 0;
    color:#222
}

/*Middle Drop-Down Navigation*/
#nav-container {
    border-bottom:1px solid #d5d5d5;
    border-top:1px solid #d5d5d5;
    clear:both;
    font-size:11px;
    height:33px;
    margin:0 auto;
    padding:0
}

/* Targeting both first and second level menus */
.nav li {
    float:left;
    list-style:none;
    position:relative
}
.nav li a {
    background:url(images/arrow.png) no-repeat right;
    border:none;
    color:#222;
    display:block;
    margin:0 5px 0 0;
    padding:5px 20px 5px 8px
}

/* Targeting the first level menu */
.nav {
    display:block;
    margin:0;
    padding:5px 0 2px;
    position:absolute;
    z-index:100
}
.nav > li > a:hover {
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
    background:#507aa5 url(images/arrow_hover.png) no-repeat right;
    border-radius:3px 3px 0 0;
    color:#fff;
    padding:5px 20px 5px 8px
}

/* Targeting the second level menu */
.nav li ul {
    -moz-border-radius-bottomleft:3px;
    -moz-border-radius-bottomright:3px;
    -moz-border-radius-topright:3px;
    -moz-box-shadow:1px 1px 1px #333;
    -webkit-border-bottom-right-radius:3px;
    -webkit-box-shadow:1px 1px 1px #333;
    background:#507aa5;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    border-top-right-radius:3px;
    box-shadow:1px 1px 1px #333;
    color:#222;
    display:none;
    margin:0;
    padding:2px 0;
    position:absolute;
    width:140px
}
.nav li ul li {
    width:100%
}
.nav li ul li a {
    background:#507aa5;
    border:none;
    color:#fff;
    line-height:25px;
    margin:0;
    padding:0 0 0 8px
}
.nav li ul li a:hover {
    background:#466A90
}
.nav li ul li.strong-archive a {
    border-top:1px solid #466A90;
    font-weight:600
}

/* A class of current will be added via jQuery */
.nav li.current > a {
    -moz-border-radius:3px 3px 0 0;
    -moz-box-shadow:1px 1px 1px #333;
    -webkit-border-radius:3px 3px 0 0;
    -webkit-box-shadow:1px 1px 1px #333;
    background:#507aa5 url(images/arrow_hover.png) no-repeat right;
    border-radius:3px 3px 0 0;
    box-shadow:1px 1px 1px #333;
    color:#fff
}

/* CSS fallback */
.nav li:hover > ul.child {
    display:block
}

Step 3. Images

Here are only one image for background of demo:

    page background

Step 4. JS

In our menu I using jQuery a little. Beside jquery.js (in ‘js’ folder), I have also:

js/script.js

$(document).ready(function(){
    $('.tabs li a').click(function () {
      $('.tabs li').removeClass('active');
      $(this).parent().addClass('active');

      $('.nav').hide();
      var index = $('.tabs li a').index(this);
      $('.nav').eq(index).show();
      return false;
    });

    $('.nav li').has('ul').hover(function(){
        $(this).addClass('current').children('ul').fadeIn();
    }, function() {
        $(this).removeClass('current').children('ul').hide();
    });
});

This code is very simple, so I hope to not have to explain every line here.


Live Demo
download in package

Conclusion

Today we made new nice menu (seventh), Your comments and thanks are very welcomed. Good luck!

Enjoyed this Post?

    Tweet
   
   

Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.

6 Comments

    • jerry's Gravatar
    • very nice specially the menu UI . i’ll be using this one for my next project . last week i did a CSS 3 Drop Down Menu(http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/) something similar to yours for a client .

    • stacey's Gravatar
    • Jitendra's Gravatar
    • Hello,
      Its nice menu but, i am facing one problem with this menu is:
      Link is not firing from the links given in “Section One, Section Two….and so on Link” can you please fix that issue.

      Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>