settinjg a class on a menu item

peasepud · Jul 29, 2007

Hi,

I have a site with a navigation menu bar, the CSS includes a class of .chosen to highlight the page you are on, the navigation is built using an unordered list and the selected item marked as such:

<li><a href="index.php" class = "chosen">Home</a></li>
<li><a href="page2.php">Next page</a></li>

This works fine however I now want to keep the site fresh and easy to update by including the navigation bar in a php require statement to ease any changes etc. This obviously breaks the ability to set the class on each page.

Is there any other way people can see to do this? If its not possible then Im happy to sacrifice the styling to keep it easier to update but would prefer like to have this style if possible.

Sleidia · Jul 29, 2007

Code:

<li><a href="index.php"<?php 

if (is_chosen()) echo " class = \"chosen\"";

?>>Home</a></li>
<li><a href="page2.php">Next page</a></li>

Of course, you detect you current page in a custom is_chosen function that I assume you know what it is made of.

But it would be better to build the menu dynamically by looping through all the links. You can either scan the whole site if you use static files or build it from an array or a database.

ChrisHunt · Jul 30, 2007

The approach suggested by Sleida - building the menu up dynamically - is by far the best.

However, if the programming is beyond you, here's a more long-winded way to do it that doesn't require any coding:
[ol]
[li]Give every page of your site (or at least every page that appears in the menu) a unique id in the <body> element.[/li]
[li]Give every <li> in the menu a unique id[/li]
[li]Use CSS to highlight the combination of the two[/li]
[/ol]
For example HTML:

Code:

<html>
...
<body id="p_home">
...
<ul id="menu">
  <li id="m_home"><a href="/">Home</a></li>
  <li id="m_about"><a href="/about.htm">About</a></li>
</ul>
...

CSS:

Code:

#p_home #m_home,
#p_about #m_about {
   color: red;  /* or whatever highlighting you want */
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

settinjg a class on a menu item

peasepud

Programmer

Sleidia

Technical User

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor