CSS Drop-Down Menu
By Brian on Jun 07, 2010 with Comments 3
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
@charset "utf-8";
#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
// Dropdown menu javascript
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>Click here to download this drop down menu script!
0
Popularity: 2% [?]
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.
Very interesting, would like to take another look at this.
This is precisely what i was looking for. thanks a ton for the interesting post and keep up the fantastic work! My kind regards, Rosaura.