Skip to content

Instantly share code, notes, and snippets.

@zvineyard
Created May 7, 2012 04:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zvineyard/2625995 to your computer and use it in GitHub Desktop.
Save zvineyard/2625995 to your computer and use it in GitHub Desktop.
JavaScript: Dropdown Menu
#dropdown {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0;
padding: 0;
z-index: 30;
}
#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;
}
<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>
var timeout = 0;
var closetimer = 0;
var ddmenuitem = 0;
// 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment