Fly out window - JQuery

by marhaba

HTML

<input id="link" value="..." type="button" title="NavCom Equipments" />
<div id="submenu">
     <a href="#">About the company</a><br />
     <a href="#">Careers</a>
</div>

CSS

#link {
    padding:10px;
        cursor:pointer;
    width: 40px;
}
 
div#submenu {
    width:150px;
    height: 100px;
    position:absolute;
    border:1px solid #CCC;
    background:#FFF;
    padding:10px;
    display:none;
-moz-box-shadow: 4px 4px 15px #303030;
-webkit-box-shadow: 4px 4px 15px #303030;
box-shadow: 4px 4px 15px #303030;
    border: 1px solid #000;


    
}

JavaScript

$('#link').click(function() {
    var submenu = $('div#submenu');
    if (submenu.is(":visible")) {
        submenu.fadeOut();
    } else {
        submenu.fadeIn();
    }
});
var submenu_active = false;

$('div#submenu').mouseenter(function() {
    submenu_active = true;
});

$('div#submenu, #link').mouseleave(function() {
    submenu_active = false;
    setTimeout(function() {
        if (submenu_active === false) $('div#submenu').fadeOut();
    }, 100);
});