jQuery Menu

by Hari Menon

HTML

<!-- this simulates the menu rollover image -->
<div id="m-0" style="position:absolute; background-color:#ff00ff; top:50px; left:50px; width:150px; height:50px; text-align:center; border: 1px solid #00ff00;">
    <b>MENU ITEM 1</b>
</div>
<div id="m-1" style="position:absolute; background-color:#ff00ff; top:50px; left:200px; width:150px; height:50px; text-align:center; border: 1px solid #00ff00;">
    <b>MENU ITEM 2</b>
</div>

<!-- this is drawer 1 -->
<div id="Container-0" class="menuContainer">
    <div id="menu-0" class="menuContent">
        <br/>
        <p>Content of the menu drawer.</p>
        <br/>
        <p>Bla bla bla </p>
        <br/>
        <p>Bla bla bla Bla.</p>
        <br/>
        <p>Bla bla bla Bla bla.</p>
        <br/>
        <p>Bla bla bla Bla bla bla Bla bla.</p>
    </div>
</div>
<!-- this is drawer 2 -->
<div id="Container-1" class="menuContainer">
    <div id="menu-1" class="menuContent">
        <br/>
        <p>Content of the menu drawer.</p>
        <br/>
        <p>Bla bla bla </p>
    </div>
</div>


<div id="linkcontent"><a href="#">link link link link link link link link link link link link link</a></div>

CSS

#menu-0 { background-color:#0000ff; width:auto; border: 1px solid #00ff00;}
#Container-0    { position: absolute; top: 100px; left:50px; width: auto; height: auto; z-index: 100; overflow: hidden; border: 1px solid #999;}

#menu-1 { background-color:#0000ff; width:auto; border: 1px solid #00ff00;}
#Container-1    { position: absolute; top: 100px; left:200px; width: auto; height: auto; z-index: 100; overflow: hidden; border: 1px solid #999;}

.menuContent    { position: relative; display: none; color:white; border: 1px solid #00ff00;  }

#linkcontent { position:absolute; top:200px; left:140px; z-index: 50;}
#linkcontent a {color: orange;}

JavaScript

$(document).ready(function() {
    var $ht = new Array(),
        enter, leave;
    
    $('div[id|="m"]').each(function (i) {
        
        $(this).hover(enter, leave);
        
        $ht[i] = ($('#menu-'+i).height());
        $('#menu-'+i).css({
            'top': '-'+$ht[i]+'px',
            'display': 'block'
        });
    
    });
    
    function enter() { 
         j = $(this).attr('id').replace(/m-/, "");
         $('#menu-'+j).data({closing: false}).stop(true, false).animate({top: '0'},800);
    };
    
    function leave() { 
         $('#menu-'+j).data({closing: true}).delay(100).animate({top: '-'+$ht[j]+'px'},800);
    };
    
    $('div[id|="menu"]').each(function (i) {
        $(this).hover(
           function (){ // mouseenter Menu drawer
                if($(this).data('closing')) {
                    $(this).stop(true, true);  // stops closing animation
                }
            }
            ,leave
        );
    });
    
    
});