 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
sticks464
Joined: 31 Dec 2006
Posts: 2631
|
 Posted: Tue Dec 09, 2008 5:33 am Basic dropdown menu using a little javascript |
 |
|
|
| Code: |
<!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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<style type="text/css">
body {
font: x-small Verdana, Arial, Helvetica, sans-serif;
}
* html body{
font-size:xx-small;
f\ont-size:x-small;
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
margin-left: -999em; /* hide menu from view */
top: auto;
left:0;
}
/* Styles for Menu Items */
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #ffffcc; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
margin-bottom:-1px;
min-height:0;
}
/* commented backslash mac hiding hack \*/
* html ul#nav li a {height:1%; position:relative;}
/* end hack */
/* this sets all hovered lists to red */
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
color: #fff;
background-color: red;}
/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
color: #777;
background-color: #ffffcc;
}
#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
</ul>
</li>
<li><a href="#">Longer Link 4</a>
<ul>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
</ul>
</li>
</ul>
</body>
</html> |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2631
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
