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

A s 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, ...


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 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).


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"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="css/style.css" type="text/css" /> 
     <!--[if lt IE 8]> 
        <script src =""></script> 

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

<script src="" type="text/javascript" charset="utf-8"></script>    
<script src="" type="text/javascript"></script> 
<script type="text/javascript" src="js/scripts.js"></script> 

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

site.prototype = { 
     init : function() { 
     // Enables the slidedown menu, and adds support for IE6 
     setMenu : function() { 
     $.each(this.css3menuLi, function() { 
         if ( $(this).children('ul')[0] ) { 
                 .append('<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+

No comments :

Post a Comment