Facebook Style CSS JQuery drop down menus

This page is no longer valid. I made a plugin to do this here: Facebook dropdown menu using jdropdown.


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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s