 |
HTML Help
Please Search for the answer to your question before asking it! Thanks.
|
| View previous topic :: View next topic |
| Author |
Message |
sticks464
Joined: 31 Dec 2006
Posts: 2625
|
| 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: 2625
|
| Posted: Tue Dec 16, 2008 11:22 am |
|
|
I've got some more of these posted in this section of the forums, don't run out of remarks just yet.
http://www.htmlcodetutorial.com/help/ftopic13353.html
http://www.htmlcodetutorial.com/help/ftopic13338.html
http://www.htmlcodetutorial.com/help/ftopic13337.html
http://www.htmlcodetutorial.com/help/ftopic13335.html |
|
|
| |
|
|
|
Powered by phpBB Search Engine Indexer
Powered by phpBB 2.0.19 © 2001, 2002 phpBB Group
|
