Posted By

zvineyard on 10/10/11

Tagged

Versions (?)

Last Edited at 10/10/11 02:10pm

Statistics

Viewed 723 times

Favorited by 0 user(s)

Related snippets

Javascript Dropdown Menu

/ Published in: JavaScript

This is a JavaScript powered dropdown (flyout) menu. HTML and CSS included.

Highlighted TextExpand

// open hidden layer
function mopen(id) {	
	// cancel close timer
	mcancelclosetime();
	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose() {
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime() {
	closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime() {
	if(closetimer) {
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
</script>

#dropdown li {
margin: 0;
padding: 0;
list-style: none;
float: right;
}

#dropdown li a {	
display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 60px;
background: #f1f1f1;
color: #333;
text-align: center;
text-decoration: none;
}

#dropdown li a:hover {
background:#999;
color:#fff;
}

#dropdown div {	
position: absolute;
visibility: hidden;
margin: 0 -58px 0;
padding: 0;
background: #f1f1f1;
border-bottom: 1px solid #e3e3e3;
}

#dropdown div a	{
position: relative;
display: block;
margin: 0;
padding: 8px 10px;
width: 118px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #f1f1f1;
color: #333;
}

#dropdown div a:hover {
background:#999;
color:#FFF;
}

</style>
<div class="dropdown" id="dropdown">
<ul id="dropdown">
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Login</a>
        <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="https://apps.rackspace.com/">Secure Email</a>
            <a href="http://medicallanguage.homestead.com">Students</a>
            <a href="https://mdsofkansas.net/secure">MDS Staff</a>
            <a href="https://mdsofkansas.net/secure">MDS Clients</a>
            <a href="#">File Storage</a>
            
        </div>
    </li>
</ul>
<div style="clear:both"></div>
</div>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.