PDA

View Full Version : Navigation menu bar problem - Please help



hws
Sep 30th, 2009, 05:02 PM
Hi,

I have written a menu which only works with
onmouseover="this.className = 'open'" onmouseout="this.className = ''"
However, i will need the onfocus and onblur for this but when i use them it is not html compatable. I think that is because i'm using xhtml traditional in the doctype.

How do i change the above code to get my menu to use the class "open" once the mouse is rolled over the menu and then not have a class assigned to it when it is not rolled over?? I don't really want javascript but a simple explaination on how to do this.

Code is:
CSS:

#menubar {
float: right;
width:auto;
padding: 0 12px;
display: block;
list-style: none;
}
#menubar li {
padding: 0;
float: left;
width:auto;
display:inline;
list-style: none;
}
#menubar a {
display: block;
position: relative;
border-left: 1px solid #ffffff;
background-color: #C60001;
background-image: url(images/centre.png);
background-repeat: repeat-x;
text-decoration: none;
color: #ffffff;
font-weight:bolder;
}
#menubar span {
display: block;
background-image: url(images/left.png);
background-repeat: no-repeat;
}
#menubar span span {
background-image: url(images/right.png);
background-position: right top;
padding: 7px 15px;
}
#menubar a:hover, #menubar a.selected, #menubar .open a {
background-color: #73dc4f;
background-image: url(images/centre_on.png);
color: #ffffff;
}
#menubar .selected span, #menubar .open span {
background-image: url(images/left_on.png);
}
#menubar .selected span span, #menubar .open span span {
background-image: url(images/right_on.png);
}
#menubar ul {
position: absolute;
border-top: 1px solid #ffffff;
list-style: none;
z-index: 4;
padding: 0;
display: none;
}
#menubar .open ul {
display: block;
}
#menubar ul li {
display: block; /* "inline" works too, without floating */
clear: both;
z-index: 4;
}
#menubar ul a, #menubar .open ul a {
position: relative;
width: 170px;
border: 1px solid #ffffff;
border-top: none;
background-image: none;
z-index: 4;
}
#menubar .open ul a:hover {
background-image: none;
}
#menubar ul span {
position: relative;
border-left: 5px solid #36C610;
background-color: #E8FAE1;
background-image: none;
padding: 4px 10px;
color: #36C610;
}
#menubar ul a:hover span {
border-left: 5px solid #C40000;
background-image: none;
background-color: #ffffff;
color: #C40000;
}

#menubar .open ul span {
background-image: none;
}

HTML:

<ul id="menubar">
<li onmouseover="this.className = 'open'" onmouseout="this.className = ''"><a class="selected" href="/" title="Home Page"><span><span>Home</span></span></a>
<ul>
<li><a href="#" title="1"><span>1</span></a></li>
</ul>
</li>
<li onmouseover="this.className = 'open'" onmouseout="this.className = ''"><a href="#"><span><span>About</span></span></a>
<ul>
<li><a href="#" title="2"><span>2</span></a></li>
</ul>
</li>
</ul>

I'd be grateful for any help with this as i could not find anything online to help my solution.

effpeetee
Sep 30th, 2009, 05:33 PM
You are much more likely to get a reply if your give ALL your code including the Doctype. Better still a link.

Frank

hws
Sep 30th, 2009, 05:55 PM
I did mention that the doctype is xhtml traditional:


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

No need to post the rest of my code ere. I seem to have went for a different approach. I would still like to know how you can do the above code in a different way but works the same