0

I wish to create a menu (a sign-up menu), see this to get an idea of it. When user clicks on this button/link a drop-down menu appears, using which he can do something (here login).

The behaviour of the link should be the following:

  1. The drop-down menu should appear when clicked on this button/link.
  2. when clicked anywhere on the page (including the button/link itself), but outside the menu, the menu should disappear.
  3. If clicked somewhere on the drop-down menu, the menu should not disappear.
  4. All the controls in the drop-down menu should work.

I did somehow managed to get first three working, but then the controls within the drop-down menu (4th behaviour) are not working.

The javascript/jQuery code along with html code is given here (jsfiddle link, same as above). You can fork it and make changes.

Thanks.

user1144616
  • 1,201
  • 2
  • 15
  • 16
  • Hah! I just asked more or less the same question ... you can see my (slightly broken) solution here: http://stackoverflow.com/questions/9138236/jquery-easy-pulldown-menu – designosis Feb 04 '12 at 03:48

2 Answers2

4

check this

http://thefinishedbox.com/files/freebies/loginfreebie/index.html

Download tha code

http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/

Developer
  • 8,390
  • 41
  • 129
  • 238
  • This is exactly what I wish to achieve, I looked over the jQuery code of this page. Can you explain a bit, what are you doing. – user1144616 Feb 04 '12 at 03:55
  • Added the link to download the source check that – Developer Feb 04 '12 at 03:57
  • I had got the code already by looking into the source. I thought you had build that example yourself, so I was hoping you to explain that. But now as I see, that's not the case. Gotcha! – user1144616 Feb 04 '12 at 04:03
0

I made a fork of what you have on your jsFiddle: http://jsfiddle.net/DukyJ/

If you look at the code I just added an extra div to have the page's content so I don't have to assign click events to the whole body just only to that div. Then, I removed the return false and the stopProppagation and just added a '#' to the link in the href because it wasn't necesary. And finally just added some style to the signin link and the singin panel so you can see that the menu appears over the content as I suppose you want it to appear.

Roberto Linares
  • 2,215
  • 3
  • 23
  • 35
  • The controls in the drop-down menu are yet not working. For example try checking the 'Remember Me' checkbox, it won't work. Similarly if you add links to 'Forgot Password' or 'Sign up Now' (in place of '#'), it won't work. Seems because of 'event.preventDefault();'. – user1144616 Feb 06 '12 at 02:12
  • @user1144616 I can see that. The easiest way I could come up is to catch the mouseup and keyup events on the checkbox (since the checkbox seems to be the only one affected) and check/uncheck it manually. Try again the jsfiddle link to see it. – Roberto Linares Feb 06 '12 at 02:47