Have you ever wanted a drop down box just like the ones on the new facebook layout? Well here's your chance. I use a drop down box like facebooks in my admin system and I'm going to share the code with you.

Click here to see a demo.

Here's the html.

<div><a class="popit"><img src="email.gif" alt="" /></a></div>
<div class="popOut">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim tellus, rhoncus in facilisis in, lacinia a mauris. Nulla facilisi. Maecenas odio nisi, posuere vel aliquet scelerisque, hendrerit vitae felis. Proin volutpat rutrum fringilla. Nulla molestie enim non diam pulvinar in ornare sem dictum. Mauris elementum rhoncus dolor quis pretium. Phasellus vehicula gravida nibh quis semper. Aliquam semper, enim sed interdum ullamcorper, velit purus elementum massa, sit amet rutrum lacus lorem ut elit. Maecenas ipsum leo, aliquet ut semper in, ultricies dignissim turpis. Vivamus eu justo at erat suscipit sagittis id at nunc. Sed eget lectus non arcu auctor mollis. Sed nec nisl turpis, a mattis odio. Nunc scelerisque, dui venenatis malesuada cursus, diam felis molestie velit, vitae dignissim ligula libero et nibh.</p>
</div>

Now the CSS.

div a.popit {
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: block;
    padding: 5px 7px;
    position: absolute;
    z-index: 2;
    top: 8px;
}

div a.popit:hover {
    background-color: #F4F4F4;
}

div a.selected, div a.selected:hover {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    background-color: #F4F4F4;
    width: 16px;
    height: 16px;
    display: block;
    padding: 4px 6px;
    position: absolute;
    z-index: 3;
    top: 8px;
}

div.popOut {
    position: absolute;
    z-index: 2;
    top: 32px;
    display: none;
    margin: 0;
    padding: 5px 10px;
    width: 250px;
    background-color: #F4F4F4;
    border: 1px solid #000;
    border-bottom: 2px solid #000;
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
}

And finally the javascript.

var popOutTrigger = "a.popit"; // This is the class for link that activates the pop out
var popOut = "div.popOut"; // This is the div that you want to pop out

$(document).ready(function() {
    $(popOutTrigger).click(function(event) {
        $(popOut).toggle();
        $(popOutTrigger).toggleClass('selected');                
    });
    
    $(popOut).mouseup(function() {
        return false
    });

    $(document).mouseup(function(event) {
        if($(event.target).parent(popOutTrigger).length==0) {
            $(popOut).hide();
            $(popOutTrigger).removeClass('selected');
        }
    });
});