Created
May 7, 2012 04:55
-
-
Save zvineyard/2625995 to your computer and use it in GitHub Desktop.
JavaScript: Dropdown Menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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