Menu
I found this CSS Navigation that I’d like to use, taken from Listomatic.com. It’s simple, and I think elegant but did not come with the rollover effects I wanted. I’ve managed to insert the necessary CSS to create a rollover effect on hover, but that’s as far as I can take this. I’d like to find a good javascript snippit I can use to expand the effects.
Here is my current website and navigation: [url]HTTP://www.digitalfreelance.net
What I would like to do is remove the Orange from the Home button, whenever someone clicks another button, and then add the Orange to that button so that their current location is highlighted, until the move again.
Secondly, I’d like to change the sub-navigation so that it changes with each main-navigation button. With CSS, it just shows ALL sub-navigation for every button at once, on top of each other so I had to take it all out except for the first button.
If anyone can point me to a script that can do this, please do so. Here is the CSS and HTML that I have for the nav:
[CODE]<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”http://cdhames.smugmug.com/” id=”current”>Home</a>
<ul id=”subnavlist”>
<li id=”subactive”><a href=”http://cdhames.smugmug.com/gallery/1821744″ id=”subcurrent”>Services</a></li>
<li><a href=”http://cdhames.smugmug.com/gallery/1811336″>About DF</a></li>
<li><a href=”http://cdhames.smugmug.com/gallery/1818110″>Guestbook</a></li>
<li><a href=”http://cdhames.smugmug.com/gallery/1817817″>Contact Us</a></li>
</ul>
</li>
<li id=”subactive”><a href=”http://cdhames.smugmug.com/Models”>Models</a>
</li>
<li id=”subactive”><a href=”http://cdhames.smugmug.com/People”>People</a>
</li>
<li id=”subactive”><a href=”http://cdhames.smugmug.com/Places”>Places</a>
</li>
<li id=”subactive”><a href=”#”>Things</a>
</li>
<li id=”subactive”><a href=”http://cdhames.smugmug.com/Events”>Events</a>
</li>
</ul>
</div>
[CODE]/* Navigation */
#navcontainer
{
width: 650px;
}
#navlist
{
position: relative;
width: 650px;
height: 2.25em;
margin: 0 auto;
padding: 0;
border-bottom: 3px solid #333;
white-space: nowrap;
}
#navlist li
{
float: left;
margin: 0 0 0 0px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #aaa #555 #f63 #999;
list-style-type: none;
}
#navlist li a
{
position: relative;
width: 7.87em;
display: block;
margin: 0;
padding: 1px 0.4em;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
color: #333;
font: normal 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}
#navlist li a:hover
{
color: #fff;
text-decoration: none;
background-color: #f63;
border-color: #f96 #c30 #f63 #f96;
}
#navlist li#active a
{
font-weight: bold;
background-color: #f63;
color: #fff;
border-color: #f96 #c30 #f63 #f96;
}
#navlist li#active a:hover
{
color: #fff;
}
#navlist ul#subnavlist
{
position: absolute;
width: 100%;
left: 0;
top: 2.25em;
height: 0.75em;
margin: 0;
padding: 0;
border-bottom: 3px solid #333;
white-space: nowrap;
}
#navlist ul#subnavlist li
{
width: 14ex;
margin: 0;
border: 0;
}
#navlist ul#subnavlist li a
{
width: auto;
padding: 0.06em 1em 0;
border: 0;
background-color: #fff;
color: #000;
font: normal normal 90% Verdana, Arial, sans-serif;
}
#navlist ul#subnavlist li a:hover
{
color: #000;
text-decoration: none;
background-color: #fc9;
font-weight: 400;
/* IE5/Mac disappearing item fix */
}
#navlist ul#subnavlist li#subactive a
{
background-color: #fc9;
color: #000;
}
* html > body #navlist, * html > body #navlist ul#subnavlist
{
width: 600px;
/* IE5/Mac fixed width fix */
}