Advanced Search

Return to Snippet

Revision: 51989
at October 10, 2011 14:10 by zvineyard
Initial Code 
<script>
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; 
</script>

<style>
#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;
}

</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>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

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

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Javascript Dropdown Menu

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, javascript, ie6

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript