Multi-Level DropDown Menu With Amazing CSS3 And JQuery Bouncy Effect

Mulit-Level-Drop-Down-Menu_Withi-CSS3-Hover-Effect-And-JQuery

As I believe, I am not an art fan. I don’t even find a difference between Picasa’s art and some unsorted design (forgive me!). And I know, I can never be a web-designer ever. Because I believe the most important thing to be successful is to build foundation before starting to creating something. As I miss the foundation of becoming a web-designer (a creative sense), so no matter how well I know the codes I can never be one. Because of this, I hardly share any design related things. But yesterday I got something interesting on tutplus.com and it was so brilliant that I tried to make something with that. It was a java-script. So after trying a while I put up CSS3 with that script and now the outcome can be called “A Multi-Level Drop Down Menu With CSS3 and Bounce Effect”.

Just to note, as this is based upon CSS3, so there is a Cross-Browser problem. This is ok with Chrome, Safari and Firefox (though the style is slightly different in Firefox) but CSS3 is a problem with Opera and IE.

We will proceed in three steps (The CSS styles, The HTML markups and The JQuery Trigger).

Mulit-Level-Drop-Down-Menu_Withi-CSS3-Hover-Effect-And-JQuery

The CSS styles

To decelerate the menu, we need to style it up. Just use the following CSS codes.

body {    
font-family: helvetica, arial, sans-serif;     
background: #e3e3e3;     
text-align: center;     
}
/* MENU */
#css3menu {    
background: #e5e5e5;     
float: left;     
margin: 0 auto; padding: 0;     
border: 1px solid white;     
border-bottom: none;     
}

#css3menu li a, #css3menu li {     
float: left;     
}
#css3menu li {    
list-style: none;     
position: relative;     
}
#css3menu li a {    
padding: 1em 2em;     
text-decoration: none;     
color: white;     
background: #292929;     
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);     
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));     
border-right: 1px solid #3c3c3c;     
border-left: 1px solid #292929;     
border-bottom: 1px solid #232323;     
border-top: 1px solid #545454;
}
#css3menu li a:hover {    
background: #2a0d65;     
background: -moz-linear-gradient(#000000 1px, #00578F 25px);     
background: -webkit-gradient(radial, 165 0, 52, 220 -257, 465, from(#00578F), to(#000000));     
background: -webkit-radial-gradient(165 0, 52, 220 -257, 465, from(#00578F), to(#000000));     
}

/* Submenu */
.hasChildren {    
    position: absolute;     
    width: 5px; height: 5px;     
    background: black;     
    right : 0;     
    bottom: 0;     
}
#css3menu li ul {    
display: none;     
position: absolute;     
left: 0;     
top: 100%;     
padding: 0; margin: 0;     
}
#css3menu li:hover > ul {    
display: block;     
}
#css3menu li ul li, #css3menu li ul li a {    
float: none;     
}
#css3menu li ul li {    
_display: inline; /* for IE6 */     
}
#css3menu li ul li a {    
width: 150px;     
display: block;     
}
/* SUBSUB Menu */
#css3menu li ul li ul {    
display: none;     
}
#css3menu li ul li:hover ul {    
left: 100%;     
top: 0;     
}

The HTML Markup

Now we need to make an usual unordered list with ul and li. This may be like the following.

<!DOCTYPE html>

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>untitled</title> 
    <link rel="stylesheet" href="css/style.css" type="text/css" /> 
     <!--[if lt IE 8]> 
        <script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script> 
    <![endif]-->    
</head> 
<body>

<ul id="css3menu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
        <ul> 
            <li><a href="#">About Founder</a></li> 
            <li><a href="#">About Authors</a></li> 
            <li><a href="#">About Sponsors</a> 
                <ul> 
                    <li><a href="#">Sub-Menu 1</a></li> 
                    <li><a href="#">Sub-Menu 1</a></li> 
                    <li><a href="#">Sub-Menu 1</a></li>                        
                </ul> 
            </li>    
            <li><a href="#">About Readers</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Our Works</a></li> 
    <li><a href="#">Contact</a> 
        <ul> 
            <li><a href="#">International</a></li> 
            <li><a href="#">Corporate</a> 
                <ul> 
                    <li><a href="#">International</a></li> 
                    <li><a href="#">Corporate</a></li> 
                    <li><a href="#">Hotline</a></li> 
                </ul> 
            </li> 
            <li><a href="#">Offices</a></li>                        
        </ul> 
    </li>    
    <li><a href="#">Testimonial</a></li>        
</ul> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>    
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/scripts.js"></script> 
</body> 
</html>

The JQuery Trigger

To validate our whole work, we need to trigger up the Java Script. Use the following Java Script by NetTut+.

var site = function() { 
    this.css3menuLi = $('#css3menu li').children('ul').hide().end(); 
    this.init(); 
};

site.prototype = { 
     
     init : function() { 
         this.setMenu(); 
     }, 
     
     // Enables the slidedown menu, and adds support for IE6 
     
     setMenu : function() { 
     
     $.each(this.css3menuLi, function() { 
         if ( $(this).children('ul')[0] ) { 
             $(this) 
                 .append('<span />') 
                 .children('span') 
         } 
     }); 
     
         this.css3menuLi.hover(function() { 
             // mouseover 
            $(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce'); 
         }, function() { 
             // mouseout 
             $(this).find('> ul').stop(true, true).hide();         
        }); 
         
     } 
  
}


new site();

Save the file as script.js,

That’s it. Now you will see a CSS3 bouncy dropdown menu. This works best in Webkit based browser like Chrome, Safari etc.

Download Source

Inspired By Nettut+