Submit your widget

crossbrowser tabs Drop-down menu with CSS3 and jQuery

Created 3 years ago   Views 23849   downloads 4182    Author script-tutorials
crossbrowser tabs Drop-down menu with CSS3 and jQuery
View DemoDownload 52.1 KB
90
Share |

This is a 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.

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="#">Home</a></li>
            <li><a href="#">Tutorials</a>
                <!-- defining sub menu elements -->
                <ul class="sub">
                    <li><a href="#">HTML / CSS</a></li>
                    <li><a href="#">JS / jQuery</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">MySQL</a></li>
                </ul>
            </li>
            <li><a href="#">Resources</a>
                <ul class="sub">
                    <li><a href="#">XSLT</a></li>
                    <li><a href="#">Ajax</a></li>
                    <li><a href="#">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">
                    <li><a href="#">link 41</a></li>
                    <li><a href="#">link 42</a></li>
                    <li><a href="#">link 43</a></li>
                    <li><a href="#">link 44</a></li>
                    <li><a href="#">link 45</a></li>
                </ul>
            </li>
            <li><a href="#/">About</a></li>
            <li><a href="#">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>
        <ul class="nav" id="3" style="display:none;">
            <li><a href="#">Menus #8</a></li>
            <li><a href="#">Menus #9</a></li>
            <li><a href="#">Menus #10</a></li>
        </ul>
        <ul class="nav" id="4" style="display:none;">
            <li><a href="#">Menus #11</a></li>
            <li><a href="#">Menus #12</a></li>
        </ul>
    </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
}

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();
    });
});

The article source:http://www.script-tutorials.com/creating-css3jquery-crossbrowser-dropdown-menu-with-tabs/