PDA

View Full Version : Styling Menu

sharkey182uk
04-19-2004, 10:34 AM
Hey i have used the bare bones example for the suckerfish drop down menu from ALA and am having trouble styling it to look the same as my Javascript/DHTML one. Here is a link to the old one Old menu Javascript/DHTML


<style>

ul {
padding: 0;
margin: 0;
list-style: none;
}

li {
float: left;
position: relative;
width: 10em;
border:1px solid #979797;
text-align:center;
color:#979797;
font:bold 0.8em verdana,sans-serif;
}

li ul {
display: none;
position: absolute;
top: 1.2em;
left: -1px;
}

li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block;}

li, a {
text-decoration:none;
color:#979797;
}
</style>
</head>

<body>
<script type="text/javascript">
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>
<ul id="nav">
<li>Sunfishes
<ul>
<li><a href="">Blacksunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>

<li>Grunts
<ul>
<li><a href="">Smallmouth grunt
</a></li>
<li><a href="">Burrito</a></li>
<li><a href="">Pigfish</a></li>
</ul>
</li>

<li>Remoras
<ul>
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>
</ul>
</body>
</html>

If anyone could assist me in styling it to look as the other one i have i would be very grateful
mindlessLemming
04-19-2004, 11:06 AM
I'd be happy to help you out...but I think you forgot something...
sharkey182uk
04-19-2004, 11:18 AM
Opps sorry mate the link to the old menu is here Old menu (http://www.thedevilseyes.co.uk)

It is located under the flash banner.

Thanks again
mindlessLemming
04-19-2004, 01:02 PM
I'm glad you're updating, because that layout doesn't work in Mozilla and the Flash banner totally covers the navigation....
Here's a good start on what you're after, though I can't work out where the spacing between top level <li>s is coming from :confused:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {font-size: 80%}
ul {
padding: 0;
margin: 0;
list-style: none;
}

li {
float: left;
position: relative;
width: 10em;
border:1px solid #979797;
text-align:center;
color:#979797;
margin:0;padding:0;
font:bold 1em verdana,sans-serif;
border-collapse:collapse;
}
li li {
border-top:none;
padding-bottom:1px;
}
li ul {
display: none;
position: absolute;
top: 1.2em;
margin-left: -1px;
}

li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block;}

li, a {
text-decoration:none;
color:#979797;
}
li:hover, a:hover {background:#c5163f; color:#fff;}
</style>
</head>
sharkey182uk
04-19-2004, 01:28 PM
Hey thanks mate thats a great start for me but im having trouble to get the sub navs to line up correctly.


good start though thanks again for all your help so far. :thumbsup:

--------------------------------------------------------------------------

EDIT: I have got it all lined up great now only one big problem when hovering over the top links the sub nav will appear but when you go to select one of the sub links it just dissapears away.
sharkey182uk
04-19-2004, 04:48 PM
Update on menu i forgot to check the menu in mozilla firefox and thats the way i want it but IE has came to the rescue to F... everything up again. it doesnt color the backs of the nav or sub navs on hover just the size of the link. And i doesnt let you hover on the sub nav for some odd reason.