Question

In many sites after you login there is a account drop down menu on upper right. Hovering the mouse there or clicking the arrow pointed at below makes a drop down come up that lists different actions that can be taken by the user.

I want a effect like the one on living social or grooveshark

Is there a template/skeleton I can work off of, I was willing to pay for something like this as well but the only resource I know of, codecanyon did not show me anything close to what I want.

Can someone suggest a resource or show a skeleton on jsbin?

Answer 1

You can solve this by adding a div to the bottom of your html and display it whenever a person clicks or hovers on the account button.

So you would like add a div menu with a list of options on the bottom of your html like this. By adding it on the bottom of your html it automatically gets the proper z-index and is displayed ontop of all the preceding html (everything else)

<div id="dropdown">
  <ul>      
    <li>option 1</li>
    <li>option 2</li>
  </ul>
</div>

give the dropdown a style in your css that makes it absolute positioned at the top of the screen and invisible

#dropdown{
  display: none;
  postion: absolute;
  top: 20px;
 }

and on the account button you put either plain javascript like:

onclick="document.getElementById('dropdown').style.display = (el.style.display != 'none' ? 'none' : '' );"

or jquery like:

onclick="$('#dropdown').toggle();"