Question

I wanted to show a vertical drop-down menu on click on a div. Suppose i have a image element in a div element

   <div id="menu"><img src="image.png">Menu</div>

And somewhere else within the html dom i have the list UL element

<div id="somediv">
<ul id="menulist">  
<li>Item one  
    <ul>  
        <li>Subitem one</li>  
        <li>Subitem two</li>  
    </ul>  
</li>  
<li>Item two</li>  </ul>  </div>

I’m searching for a jquery plugin which can show drop-down menu when i say $(‘#menu’).click -> show elements of menulist under the image as a menu

Any help would be appriciated

Answer 1

It can as simple as this.

$('#menu').click(function(){
    var $somediv = $('#somediv');
    if($somediv.is(':visible')){
        $somediv.hide();
    }
    else{
        var $this = $(this);
        $('#somediv').css({
           top: $this.offset().top + $this.height(),
           left: $this.offset().left,
           position: 'absolute'//this can be set using css
        }).show();
    }
});