JQuery

Facebook Style CSS JQuery drop down menus

THIS PAGE IS OUT OF DATE: This page has now become out of date. I have made a plugin to handle drop downs etc and done it in the good old facebook style. It can be found here: Facebook dropdown menu using Jdropdown. So pleae use this now…

Note: A Demo of this tutorial can be found here It is not perfect but it’s good enough to get you started. More elegant but complex version: Is Here Now

Showing the two drop down menus

I have been wondering for a whle now how facebook do those kool JQuery (I know they use JQuery, it’s no secret :P) drop downs where you click on them and they act like a drop down menu and if you click anywhere on the document whilst the menu is showing it will hide that menu out of many. You know the ones? they use them for the bottom bar and privacy functions…

I decided to make my own version of these menus for my new video site (figure to the right shows the end result).

As you can see the top version is what the menu looks like selected whilst the bottom shows the menu deselected. I will now show you how I did this…your gonna kick yourself when you find out how easy it is.

The JQuery I used was:

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

        // Change the behaviour of onclick states for links within the menu.
	var toggleId = "#" + this.id.replace(/^link/,"ul");

        // Hides all other menus depending on JQuery id assigned to them
	$(".dropdown dd ul").not(toggleId).hide();

        //Only toggles the menu we want since the menu could be showing and we want to hide it.
	$(toggleId).toggle();

        //Change the css class on the menu header to show the selected class.
	if($(toggleId).css("display") == "none"){
		$(this).removeClass("selected");
	}else{
		$(this).addClass("selected");
	}

});

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

    // This is the default behaviour for all links within the menus
    var text = $(this).html();
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
});

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

    // Lets hide the menu when the page is clicked anywhere but the menu.
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown")){
        $(".dropdown dd ul").hide();
		$(".dropdown dt a").removeClass("selected");
	}

});

I used this JQuery with this HTML:

             <dl style="" class="dropdown">
                <dt><a id="linkglobal" style="cursor:pointer;"></a></dt>
	        <dd>
                     <ul 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>
                   </ul>
                </dd>
             </dl>

I built this CSS to style the entire widget to the view you see within the picture:

/* Grey Small Dropdown */

/* General dropdown styles */
.dropdown dl{ margin-left:5px; }
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; margin-left:5px; }
.dropdown dd { position:relative; }

/* DT styles for sliding doors */
.dropdown dt a {background:#EEEEEE url(/img/stage/x/privacyOff.png) no-repeat scroll right center;
    display:block; width:40px; height:22px; cursor:pointer;}

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

/* UL styles */
.dropdown 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;}
.dropdown dd ul li{ background-color:#EEEEEE; margin:0; width:160px;}
.dropdown span.value { display:none;}
.dropdown 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;}
.dropdown dd ul li a:hover{ background:#656565; color:white; text-decoration:none; }
.dropdown dd ul li a:visited{ text-decoration:none; }

CSS Notes:
I used two images, one of the facebook grey button without being pressed and one of it being pressed (as shown in the picture) these two pictures within the CSS named privacyOff and privacyOn.

Additional Notes:
I basically took the basis of this from somewhere else which I didn’t bookmark (Closed the Firefox tab and lost the history record) and it came in the form of a tutorial on how to produce enhanced JQuery drop downs and I took this tutorial and facebookified it. The menu is not keyboard accessible but meh, facebook’s ain’t either.

If you want a full form version (that can go into CSS forms etc) then check this out I found it as a link on that site I didn’t bookmark: Scott Darby

Advertisements

21 thoughts on “Facebook Style CSS JQuery drop down menus

    1. I forget to complete things now and then πŸ™‚ I’ll post it tonight with anything else that missing. I have a newer version of this with a full facebook bar as well that I need to upload when I get time

  1. not working the demo and the link not working. This code not working for me.

    Can you reupload the code please.

    Thank you very much

    1. Yea I reformatted my server :(.

      I am still trying to find time to get round to putting everything back on, life is very busy atm.

      I will try for it all to be put on in the next couple of weeks so hopefully it will be back then.

  2. Hi there.. how do you get the menu to always appear on top. Sometimes i lose half of the menu from the bottom as there are other divs on the page. Many thanks

    1. This normally happens on IE when you have many different floats.

      You can normally over come this with a relative backer div that will force IE to overcome the float of other elements.

      Hope this helps,

    1. Yea, basically you just play around with the floats til it shows correctly, thought I fixed it on that example but must not have that time around.

      A better version which I have been using recently (and so too has facebook) is to instead attach the menu to the body of the document so it immediately floats over all things.

      If your not sure how to do this I can make a post with an example.

    2. Ill try and get an example up and running, I did have one some where, in fact that page you see in screenshot up there had that exact problem.

      I am extremely busy now-a-days but I’ll try and find enough time to get an example up. If I don’t have one in the next week nudge me :).

    1. Yes it can, you can change the:

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

      function to call an AJAX path at the end with the values of selected, however, this is not really recommended since it could put considerable strain on your server. I would instead solve this with lazy AJAX using a selectbox manipulator such as this one: http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/

      I have been able to make the exact same styling with this plugin as I have with the JS in this article. You can bind the AJAX to the onchange of the selectbox or bind it to a save changes button at the end of the page.

      Hoe this helps,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s