Google Like Settings Drop Down Menu

**bbilal** · 08-09-2011, 02:42 AM

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?

**JShor** · 08-09-2011, 04:36 AM

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!