How to implement a "pop down" like in gmail

I'm trying to implement a pop down panel like on the top bar of Gmail. If you click on the Setting icon, your name, or the Share link, a panel drops down...is there a jquery plugin or something that will allow me to quickl开发者_如何学Cy implement something to give a similar effect?

If you want a non jQuery cross browser solution I made this for someone on here yesterday:

http://jsfiddle.net/Paulpro/H4CLU/

It drops down when you click button and hides when you click it again, or anywhere in the document that isn't part of the drop down.

Only thing you'd need to change is probably some CSS stuff to style it nicely.

Here's a jsFiddle that show how you can implement something like this.

Basically, you're capturing clicks on the body element, if they clicked on settings, you show the "panel" div. If they clicked something else, you hide it.

JS:

$(function() {
    $('body').click(function(e) {
        if ($(e.target).attr('id') == 'settings') {
            $('#panel').show();
        } else {
            $('#panel').hide();
        }
    });
});

HTML:

<span id="settings">Settings</span>
<div id="panel">
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

CSS:

#panel { display: none;  border: 1px solid #000;}

Yes, I suggest to use jQuery (everytime you use JS). It is really easy to create a layer like this:

<div id="layer">content</div>
<a id="button" href="#">show</a>
<script type="text/javascript">
$(document)ready(function(){
    $('#layer').hide();
    $('#button').click(function(e){
        e.preventDefault();
        $('#layer').show();
    });
});
</script>