Search

Sunday, January 8, 2012

simple jquery, css drop down effect

In this post you will found that how to make simple jquery drop down effect on . For this first we will create the menus with the help of html and css. Here are some html :

code:


After these html code now we have to give some styles like this:




#main_menu, 
#sub_menu{
 list-style: none;
}

#main_menu > li{
 display: inline;
}

#main_menu > li a{
 padding: 4px 10px;
 background: #dd6600;
 color: #ffffff;
 text-decoration: none;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 position: relative;
}

#main_menu > li a:hover{
 background: green;
}

#main_menu > li ul{
 position: absolute
}

#main_menu > li ul li{
 margin-bottom: 10px !important;
 margin-left: 2px;
}

#main_menu > li ul li a{
 padding-left: 8px;
}

#sub_menu{
 left: 191px;
 top: 39px;
 margin: 0px;
 padding:10px 10px 10px 0;
 background: green;
 border-radius: 0 5px 5px 5px;
 border: 1px solid #333;
}

#sub_menu li a{
 background: #fff;
 color: #000;
}

#sub_menu li a:hover{
 background: #dd6600;
}
#main_menu > li ul li{
 margin-bottom: 5px;
}

Now the final code, i mean the jquery effect. I used instead of and . Here is the jquery codes:

$(function(){
  $('#sub_menu').hide();
  $('li.sub-men').hover(function(){
   $('#sub_menu').css('opacity', 0)
        .slideDown('slow')
        .animate(
       {opacity: 1},
       {queue: false, duration: 'slow'}
        );
  }, 
  function(){
   $('#sub_menu').css('opacity', 1)
        .slideUp('slow')
        .animate(
       {opacity: 0},
       {queue: false, duration: 'slow'}
        );
  });
 });

1 comment:

jacob said...

wow, really amazing.
your jquery drop down effect working smoothly like joomla's mega menus. It will really great if you provide a demo of this post ;)

anyway nice work.

Related Posts Plugin for WordPress, Blogger...