Easy Drop Down menu with css and jquey

Hi, today i am going to show you about Google drop down app box, we have seen in Google home page at right side corner. i have done same thing using jquery and css, it is just few lines of code to implement this task. hope you will enjoy to develop and keep this in you site.

HTML

design like a Google app box style to give better look and put it in one div and take one more button to show hidden icons after click on.

<div id="lessoncup">


<div id="icon"><img src="icons/icon.jpg" width="24" height="26"></div>

<div id="titlebox">

<div id="titles">

<ul>
<li><img src="icons/g+.jpg" width="85" height="82"></li>
<li><img src="icons/g.jpg" width="85" height="82"></li>
<li><img src="icons/you.jpg" width="85" height="82"></li>
<li><img src="icons/mp.jpg" width="85" height="82"></li>
<li><img src="icons/pl.jpg" width="85" height="82"></li>
<li><img src="icons/n.jpg" width="85" height="82"></li>
<li><img src="icons/gm.jpg" width="85" height="82"></li>
<li><img src="icons/gd.jpg" width="85" height="82"></li>
<li><img src="icons/gc.jpg" width="85" height="82"></li>
<li><img src="icons/gt.jpg" width="85" height="82"></li>
<li><img src="icons/gbb.jpg" width="85" height="82"></li>
<li><img src="icons/gb.jpg" width="85" height="82"></li>
<li><img src="icons/gp.jpg" width="85" height="82"></li>
</ul>

</div>

<div id="more">More</div>

</div>


</div>

CSS

make sure the #titles div should be in overflow:hiden

<style>

body{ font-family:Tahoma, Geneva, sans-serif; color:#000; font-size:11px; background-color:#fff; margin:0; padding:0;}


#info{ position:fixed; width:100%; height:20px;-webkit-box-shadow: 0 1px 2px #666;
box-shadow: 0 1px 2px #666; top:0; padding:10px; background-color:#F60; color:#FFF; font-size:14px;}

#lessoncup{width:800px; height:300px; border:solid #CCC 0px; padding:5px; margin:0 auto; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-top:100px;}

ul{ list-style:none; margin:0; padding:0;}

li{ float:left;padding:5px; border:solid #666 0;}

#titlebox{ width:320px; height:380px; color:#000; background-color:#FFF;box-shadow:0 0 10px #CCC; border:solid #CCC 1px;font-family:Tahoma, Geneva, sans-serif; font-size:18px; color:#666;overflow:hidden; display:none;}

#titles{ width:300px; height:290px; overflow:hidden; margin:20px;}

#more{ width:100%; height:40px; cursor:pointer; background-color:#f5f5f5; text-align:center; padding:15px 0 0 0; font-size:14px;}

#icon{ cursor:pointer;}


</style>

Javascript

write the click function to #more button, here we need to animate the UL list items from actual position to top position to display the hidden elements, the animate() method is animate the elements as we need.

just setup the marginTop property in animate() method to UL tag along with we need to animate the more button also just apply the same properties to this more button. here i have used stopPropagation() method to propagate the events one by one.

the second click function is to display the icons box while clicking on #icon button

write one more function to body tag, if we click outside of the box it will take the elements to actual positions.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>


$(document).ready(function(){

 $('#more').click(function(event){
  
 $('ul').animate({marginTop:'-290px'},200);
 $('#titlebox').animate({height:'280px'},200);
$('#more').text('Even more from Google').animate({marginTop:'-100px'},200);
 event.stopPropagation();

  
 });
 
 
 $('#icon').click(function(event){
  
  $('#titlebox').fadeIn('slow');
  event.stopPropagation();
  
 });
 
 $('body').click(function() {
    
 $('#titlebox').hide();
 $('ul').animate({marginTop:'0'});
 $('#titlebox').animate({height:'380px'});
 $('#more').text('More').animate({marginTop:'0'});

 
 });
 
});

</script>

Live Demo   Download Script