Question

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 quickly implement something to give a similar effect?

Answer 1

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;}