Hello there,
I've a drop down menu (created using CSS & Javascript -- see code
below).
My problem is, whenever I click a link on the menu
the new page replaces the current page (and the menu
disappears). Is there a way, I can keep the menu always
on top. ( A good example of what I'm looking for is similar
to the menu bar in http://www.milonic.com/ ).
I tried using frames (with menu on top frame and targeting
the links to bottom page), but when the menu items drop down
some of the links are not visible. I mean, I've adjust the
height of frame everytime I add a new subitem to the menu
to make it visible, which is kind of absurd.
The drop down menu code I use is as below:
(It works on IE & Mozilla, not sure about other browsers).
================================================== =======================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Source URL: http://www.alistapart.com/ -->
<html xml:lang="en">
<head>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
font-family: Tahoma, arial, helvetica, serif;
font-size: 12px;
background: white;
}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
ul{
list-style: none;
padding-left: 0em;
margin: 0;
}
#nav a{
font-weight: bold;
color: #4682B4;
}
#nav a{text-decoration: none;}
#nav li li a {
display: block;
font-weight: normal;
color: #4682b4;
font-style: bold;
padding: 0.1em 5px;
}
#nav li li a:hover {
padding: 0.1em 5px;
background: #4682B4;
color: white;
font-weight: bold;
}
li{
float: left;
position: relative;
width: 10em;
text-align: center;
cursor: default;
background-color: white;
border: 1px solid #4682B4;
border-width: 2px 0;
}
li#first{border-left-width: 1em;}
li#last{border-right-width: 1em;}
li ul{
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: white bottom left no-repeat;
padding: 0em 0 0em 0;
border: solid 2px #4682b4;
}
li>ul{
top: auto;
left: auto;
}
li li{
display: block;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {display: block;}
hr{display: none;}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
</head>
<body>
<ul id="nav">
<li id="first">
<div><a href="">MenuItem1</a></div>
<ul>
<li><a href="http://www.google.com">Google1</a></li>
<li><a href="http://www.yahoo.com">Yahoo1</a></li>
<li><a href="http://www.msn.com">MSN1</a></li>
</ul>
</li>
<li>
<div><a href="">MenuItem2</a></div>
<ul>
<li><a href="http://www.google.com">Google2</a></li>
<li><a href="http://www.yahoo.com">Yahoo2</a></li>
<li><a href="http://www.msn.com">MSN2</a></li>
</ul>
</li>
<li id="last">
<div><a href="">MenuItem3</a></div>
<ul>
<li><a href="http://www.google.com">Google3</a></li>
<li><a href="http://www.yahoo.com">Yahoo3</a></li>
<li><a href="http://www.msn.com">MSN3</a></li>
</ul>
</li>
</ul>
</body>
</html>
================================================== =======================
Any help is appreciated.
TIA,
Hemanth.
