Tuesday, 30 August 2011

Facebook style drop down menu using jquery and css


Drop down menus are becoming more popular because of their compactness and user interactivity. Now a days they are being adopted by many modern websites like facebook, gmail, google+, orkut, yahoo...

In this tutorial we will create a similar drop down menu which is easy to integrate into any website.

facebook drop down menu using css and jquery



<div style="width:162px;">
 <dl style="" class="menu">
    <a class="" id="linkglobal" 
    style="cursor: pointer;"></a><span class="result"></span></dt>
  <ul style="display: none;" id="ulglobal">
    <li><a href="#">Everyone</a></li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Only Me</a></li>
    <li><a href="#">Customize</a></li>


<style type="text/css">
.menu dl{ margin-left:5px; }
.menu dd, .menu dt, .menu ul 
{ margin:0px; padding:0px; }
.menu dd { position:relative; }

.menu dt a {background:#EEEEEE 
url(privacyOff.png) no-repeat scroll right center;
 display:block; width:40px; height:22px; cursor:pointer;}

.menu dt a.selected{
 background:#EEEEEE url(privacyOn.png) 
 no-repeat scroll right center;
.menu dt a span {
cursor:pointer; display:block; padding:5px;}

.menu dd ul { 
background:#EEEEEE none repeat scroll 0 0; display:none;
 list-style:none; padding:3px 0; position:absolute;
 left:0px; width:160px; left:auto; right:0; 
 border:1px solid #656565; cursor:pointer;
.menu dd ul li{ 
background-color:#EEEEEE; margin:0; width:160px;
.menu span.value { display:none;}
.menu dd ul li a { 
display:block; font-weight:normal; width:137px; 
text-align:left; overflow:hidden; padding:2px 4px 3px 19px; 
color:#111111; text-decoration:none;
.menu dd ul li a:hover{ 
background:#656565; color:white; text-decoration:none; 
.menu dd ul li a:visited{ 

The jQuery which adds the user interactivity

<script type="text/javascript">


// This hides the menu when the page is clicked anywhere other than the menu.

$(document).bind('click', function(e) {

var $clicked = $(;

if (! $clicked.parents().hasClass("menu")){

 $(".menu dd ul").hide();

 $(".menu dt a").removeClass("selected");



$(".menu dt a").click(function() {

var clickedId = "#" +^link/,"ul");

 // Hides everything else that the current menu

$(".menu dd ul").not(clickedId).hide();

 //Toggles the menu.


 //Add the selected class.

if($(clickedId).css("display") == "none"){






// This function shows which menu item was selected in corresponding result place

$(".menu dd ul li a").click(function() {

var text = $(this).html();


$(".menu dd ul").hide();





  1. Hi, is it possible to make the whole item list float to right? When click on the #linkglobal, item will appear and float to right side which have same x pixels with the #linkglobal.

    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

  2. Just like the display picture, item append but align to right side.

  3. [...] }); . JQuery-UI css and images, and Rails Asset Pipeline | Bibliographic … . Facebook Style CSS JQuery drop down menus « Swadesh’s … . Rating with stars [...]

  4. knowledgehouse3 April 2012 at 02:02

    How do I make the menu appear on the left side of the link icon? Right now it's on the right.

  5. does not work in a repeater. on first one works

  6. i was working in for 5 hours then i realaized that it works as stand alone not within a repeater

    1. repeater means yo want to repeat that list for server times ??

    2. well if so then i modify above code and make it for php. if want to know inbox me at "" i will send the zip to you. :)

  7. This comment has been removed by a blog administrator.

  8. thank you man, you are great.. Cheers from Rafik Bari

  9. Great clean example. If you want the menu to go away if you mouse off it I found adding this Javascript into the document ready function works well:

    $(".menu dd ul").mouseleave(function(){
    $(".menu dd ul").hide();

    $(".menu dt a").removeClass("selected");