Drop down menus are very useful for navigation on websites and for holding many links to pages on your site without taking up much space on your web pages. Using just CSS and Javascript we can make a nice simple drop down menu you can put on your web page. To do this we’ll have three files: dropdown.css, dropdown.js, and index.html. Our index.html page will display the drop down menu and our stylesheet – dropdown.css – will hold the styles for the drop down menu.
Here is a preview of what our drop down menu will look like:
Dropdown.css
#dropdown {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
font: 11px Arial, Helvetica, sans-serif;
}
#dropdown li {
float: left;
margin: 0px;
padding: 5px;
list-style-type: none;
border-bottom: 2px solid #cccccc;
border-right: 1px solid #eeeeee;
}
#dropdown li a {
display: block;
margin: 0;
text-decoration: none;
}
#dropdown div {
position: absolute;
visibility: hidden;
margin: 7px 0px 0px 0px;
padding: 0;
background-color: #e8e8e8;
border-right: 1px solid #c5c5c5;
border-bottom: 1px solid #c5c5c5;
}
#dropdown div a {
position: relative;
display: block;
margin: 0;
padding: 3px 6px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #e2e2e2;
}
#dropdown div a:hover {
background-color: #f1f1f1;
color: #000;
}
Dropdown.js
var timeout = 500;
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;
Index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="./dropdown.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./dropdown.js"></script>
</head>
<body>
<ul id="dropdown">
<li><a href="#">Homepage</a></li>
<li><a href="#" onmouseover="mopen(‘list1′)" onmouseout="mclosetime()">Drop Down Menu #1</a>
<div id="list1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Drop Down Link #1</a>
<a href="#">Drop Down Link #2</a>
<a href="#">Drop Down Link #3</a>
</div>
</li>
<li><a href="#" onmouseover="mopen(‘list2′)" onmouseout="mclosetime()">Drop Down Menu #2</a>
<div id="list2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Drop Down Link #1</a>
<a href="#">Drop Down Link #2</a>
<a href="#">Drop Down Link #3</a>
</div>
</li>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#" onmouseover="mopen(‘list3′)" onmouseout="mclosetime()">Drop Down Menu #3</a>
<div id="list3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Drop Down Link #1</a>
<a href="#">Drop Down Link #2</a>
<a href="#">Drop Down Link #3</a>
</div>
</li>
</ul>
</body>
</html>
all the lovers kylie minogue on June 8, 2010
Nice story, hey I stumbled on to this post while surfing for new lyrics. Thanks for sharing I’ll tell my friends about this too.