PDA

Click to See Complete Forum and Search --> : Navigation Rollover

NotionCommotion
01-18-2007, 11:08 AM
I am trying to implement navigation rollover using CSS. The below div is included on each page of my site. Each tab of the navigation bar has a background graphic (i/rollover.gif) that is positioned to indicate whether the tab is being or has been selected. Most of the tabs are linked directly to their associated page except for Page 4 which utilizes a little js to ensure the user is authorized to access the page. It works in regard to changing based on whether the tab is being selected, however, unfortanately the position of the graphic changes back after the page is selected. Any suggestion how to make show the current page as being selected? Thanks

<div id="navigation">
<ul>
<li><a href="/page1.html">Page 1</a></li>
<li><a href="/page1.html">Page 2</a></li>
<li><a href="/page1.html">Page 3</a></li>
<li><a href="javascript:page_4()">Page 4</a></li>
</ul>
</div>

#navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#navigation li {
float: left;
margin: 0px;
padding: 0px;
display: inline;
background: url(/i/rollover.gif) no-repeat left top;
border-bottom: 5px solid #777777;
}
#navigation a {
font: bold 13px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
padding: 7px 0px 0px 30px;
height: 30px;
width: 144px;
voice-family: "\"}\"";
voice-family:inherit;
height: 23px;
width: 114px;
}
#navigation a {
text-transform: uppercase;
}
#navigation a:hover {
background: url(/i/rollover.gif) 0px -40px;
}
#navigation a:active {
background: url(/i/rollover.gif) 0px -80px;
}
DaveSW
01-18-2007, 06:06 PM
If I've read your post correctly, you want to have the tab for the page you're currently on shown as selected?

This could probably be achieved using php, asp or javascript to check if the current location matches the link location. I believe I've seen some scripts around, but can't lay my hands on anything right now.

if it was php it would look something like:

if ($_SERVER['PHP_SELF'] == "contact.php") { echo "class='selected'"; }

You would then insert that line into each link, and set your styles for the selected class.

I don't actually write javascript, but I believe the property is called location.href, so that would be something like

if (location.href == "contact.html") { document.write("class='selected'"); }

There's probably a fancy script somewhere out there that does the job better, but you get the idea I guess.
Centauri
01-18-2007, 07:01 PM
If you give each menu link an ID, and give the body of each page an ID, then you can use css to make the selection. Example : <div id="navigation">
<ul>
<li><a href="/page1.html" id="nav1">Page 1</a></li>
<li><a href="/page1.html" id="nav2">Page 2</a></li>
<li><a href="/page1.html" id="nav3">Page 3</a></li>
<li><a href="javascript:page_4()" id="nav4">Page 4</a></li>
</ul>
</div>
and body of each page like <body id="page1"> then your css can look like #page1 #nav1, #page2 #nav2, #page3 #nav3, #page4 #nav4 {
background: url(/i/rollover.gif) 0px -80px;
}

Cheers
Graeme
NotionCommotion
01-19-2007, 12:16 PM
Thanks. I ended up adding the following to each page's active tab, and it works well.

<li><a href="/page1.html" style="background: url(/i/rollover.gif) 0px -80px">Page1</a></li>