Results 1 to 4 of 4

Thread: Google Like Settings Drop Down Menu

  1. #1
    Join Date
    Sep 2007
    Posts
    172
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Google Like Settings Drop Down Menu

    I'm pretty much impressed by the way google has created it's setting drop down menu. I want the similar script or code if possible. The preview of what I'm talking about is after break.



    I have managed to find an alternate on the Internet which is here:

    http://www.sitepoint.com/make-a-mega...u-with-jquery/

    But in this code the menu starts from left instead of right! I have found many menus starting from left though!

    Can anyone help please?

  2. #2
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    Here's how I would do it:

    1. Start off with a square object that does not have a border on the bottom. When clicked, it will display a DIV (div being the menu).

    2. Create a DIV with a 1 pixel border. Position it within the container of the object that, when clicked, triggers the drop-down event. Set the display property of this DIV to NONE. Set the float to right.

    3. Set the DIV to be relatively positioned. Set the top property to -1. This will cause it to merge behind the object to be clicked and give a seemless look.

    4. Have a click event to change the DIV display property to BLOCK. When it's set to block, it should display the DIV properly. Also, this event should change the look of the object when opened.

    5. Set the same click event to determine if the DIV is already opened (display = block). If it is, have it just set the display property to "none" again. This will cause the menu to disappear.

    6. Set a click event on the document to determine if the DIV is already opened. If it is, close it.

    I've done this technique before. I know this was kind of vague. Maybe if I have a little bit more time I'll create a script and submit it to DD.

    Hope this helps!
    - Josh

  3. The Following User Says Thank You to JShor For This Useful Post:

    bbilal (08-20-2011)

  4. #3
    Join Date
    Sep 2007
    Posts
    172
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I tried but couldn't succeed would much appreciate if you can write a small snippet of code for me please

  5. #4
    Join Date
    Sep 2007
    Posts
    172
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I fixed this Thanks JShor

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •