Menu that highlights which page is current

[73pixieGirl]

I'm going out of my mind...all of the examples I've seen and tried to implement myself do not work. What am I doing wrong? My latest example is from the dynamicdrive.com site...the basic css tab menu. I put the following CSS in it's own file (I've even put it in the head section):

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL:

http://www.dynamicdrive.com/style/

*/

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

</style>

and then I put the following in a simple table linking to the css page:
<LINK REL="StyleSheet" HREF="css/master.css" TYPE="text/css"/>

<table>
<tr><td>
<ul class="basictab">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">DHTML</a></li>
<li class="selected"><a href="index.html">CSS</a></li>
<li><a href="index.html">Forums</a></li>
<li><a href="index.html">Gif Optimizer</a></li>
<li><a href="index.html">Button Maker</a></li>
</ul>
</td></tr>
</table>

The tabs are not being highlighted after clicking on the links. Does this example only work if you have multiple pages? That's the only thing I can think of... Any ideas?

 

[cLFlaVA]

you are clicking a link, and therefore reloading the page. after the page reloads, there is no way for the CSS to know which link you clicked on. you will need to use class names to accomplish what you're looking for.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

cLFlaVa, she is using classes. The 'selected' class is applied to the <li> element

Have you tried applying it to the <a> element?

Here are a few other possiblities

1. You aren't changing which <li> has the selected class applied to it. This can be done manually, via javascript or even server side when you write out the page.

2. It's possible that the <li> elements have no depth due to floated elements. Though from the posted CSS it doesn't look that way.

3. You have a specificity issue. Again, the posted code doesn't indicate this but you may have other rules in your stylesheet that are over-riding the CSS posted.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[73pixieGirl]

Thanks for the ideas, Foamcow. I tried putting the class in the <a> tag and that didn't seem to work either. Is using javascript the only way to override the class? What I posted was everything that's in the stylesheet, so there aren't any other rules. I'll check around in the javascript forum for some examples...Thank you!!

 

[Foamcow]

Are you changing which <li> element has the class applied on each page?

You have to do that somehow or other.

If you are generating the pages manually then this is a simple matter of changing your HTML.

Or you can automate the process by applying an ID to the body of each page and deducible IDs to each list element (so you can tie each one to a page ID). Then write a script that looks at the body id and appends a class to the corresponding list element.

Here's a cut down version of something I used recently (Javascript)

function menuMarker(){
	if(!document.getElementById('subNav')) return false;
	var thisPageId = document.body.getAttribute('id');
	var targetId = 'nav_' + thisPageId;
	if(!document.getElementById(targetId)) return false;
	document.getElementById(targetId).className='selected';
	
}

So using that script, each page in my site has an ID on the body tag. Let's say we have a page with an ID of 'home'
The corresponding element in my nav has an ID that is in the form 'nav_home'.

The script is called when the page loads and it checks the id of the body tag, appends 'nav_' to it and looks for a matching element. If found, it appends the CSS class 'selected' to that element.

If none of this helps, can you show us the site itself?

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[73pixieGirl]

Unfortunately the site is behind a firewall so I can't post the link. The main page (home page) is a template that contains the <body> tag. The rest of the site uses XML pages, and individual XML pages are pulled into that template, so I don't have the option of changing the body tag id. Right now I'm just looking for something that works, then I can apply my own styling/data. I found a post in the javascript forum that uses a function to change the className, but now I'm getting an XML error "The content of elements must consist of well-formed character data or markup.", which doesn't make sense b/c I've got another javascript function on the same page and that works. Oi...over to the XML forum...

 

[cLFlaVA]

if you are not reloading a full page, you need to change classes. here's a very quick example:

<li><a href="index.html" onclick="this.parentNode.className='selected'">Button Maker</a></li>

however, that won't REMOVE the class names from the other list items.

if you ARE reloading the page, then you will need to somehow determine which link you clicked (perhaps via a query string variable) and then apply the class appropriately.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

You could also use JS to look for some unique, identifiable element in the XML file to determine which nav element gets highlighted.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[73pixieGirl]

Thank you both for your ideas! I fixed the XML error I was getting, and the javascript function does work when working with the template, but since I'm calling different xml pages along with the associated xsl pages, I think I need to create a parameter/variable and use that as the identifiable element, passing it to the javascript function, which I think is what Foamcow was talking about (correct me if I'm way off). SO, now how to do that. I can create a variable on the xsl page, but I'm not sure where to go from there. Is it possible to retrieve a variable using a javascript function, then manipulating the className based on that? Or is this a question for the XML forum?