Highlight Active Navigation Link
5 posts by 3 authors in: Forums > CMS Builder
Last Post: March 19, 2013 (RSS)
By benedict - March 18, 2013
Hi guys,
I hunted the forum for an explanation of this, but surprisingly can not find it (saw plenty to do with category sections, but not as simple as this request). Maybe I am the first to ask this, but I doubt it.
I have my main navigation in an include - problem is that every time it loads, it is showing 'Home' as selected, even if we are not on the home page because of the .selected class on that list item.
How do I dynamically add class="selected" depending which page the user is on. FYI, each link is to its own page/section in CMSB, not to records in an individual table if that makes any difference. Code below
<div id="header"> <!-- header -->
<ul id="main-nav" class="right ffmedium">
<li><a class="selected" href="index.php" title="">Home</a></li>
<li><a href="about.php" title="">About</a></li>
<li><a href="departments.php" title="">Departments</a></li>
<li><a href="careers.php" title="">Careers</a></li>
<li><a href="news.php" title="">News</a></li>
<li><a href="sponsorship.php" title="">Sponsorship</a></li>
<li><a href="locations.php" title="">Locations</a></li>
<li><a href="contact.php" title="">Contact</a></li>
</ul>
</div> <!-- end header -->
By gregThomas - March 19, 2013
Hi,
This is how I've done this on projects I've worked on:
<ul id="nav">
<li <?php echo ($_SERVER['PHP_SELF'] == '/index.php')? 'class="selected"' : ''; ?> ><a href="index.php">Home</a></li>
<li <?php echo ($_SERVER['PHP_SELF'] == '/product-list.php')? 'class="active"' : ''; ?> ><a href="product-list.php">Products</a></li>
<li <?php echo ($_SERVER['PHP_SELF'] == '/services.php')? 'class="selected"' : ''; ?> ><a href="services.php">Services</a></li>
<li <?php echo ($_SERVER['PHP_SELF'] == '/pricing.php')? 'class="selected"' : ''; ?> ><a href="pricing.php">Pricing</a></li>
<li <?php echo ($_SERVER['PHP_SELF'] == '/team.php')? 'class="selected"' : ''; ?> ><a href="team.php">Team</a></li>
<li <?php echo ($_SERVER['PHP_SELF'] == '/contact.php')? 'class="selected"' : ''; ?> ><a href="contact.php">Contact</a></li>
</ul>
This is just example code, so you'll need to make a few changes to get it to work on your site.
The $SERVER['PHP_SELF'] variable should return the name of the current page that is loaded. You can use this to check if the page name is the same as the link, and display a class of selected if it is.
Let me know if you have any questions.
Thanks!
Greg
PHP Programmer - interactivetools.com
Hey Greg!
I just wanted to say thanks for what you posted here. It helped me figure out one of the issues I was having, described here: http://www.interactivetools.com/forum/forum-posts.php?Listing-Blog-Categories-in-various-ways-78599
Now hopefully, someone can help enlighten me on the other items. :-) Thanks again!
- Jeremy
Dwelling Productions
www.dwellingproductions.com
By benedict - March 19, 2013
Great - thanks Greg, works well. I only have one other question:
When a user selects "departments.php", the navigation highlights as it should. When they select one of the department records (e.g. Bakery which has a URL of departments-detail.php?Bakery-4) it does not highlight, obviously because the URL has changed.
My question is, can you and multiple (i.e. 4 or 5) urls to this line of code below. If so, do you know the correct format?:
<li><a <?php echo ($_SERVER['PHP_SELF'] == '/departments.php')? 'class="selected"' : ''; ?>href="departments.php">Departments</a></li>
By dwellingproductions - March 19, 2013 - edited: March 19, 2013
Hi benedict!
Actually, that was the same issue I was having. I fixed it by using REQUEST_URI instead of PHP_SELF (which reads the full URL instead of just the page name). For more info, you can see my post here: http://www.interactivetools.com/forum/forum-posts.php?postNum=2229923#post2229923
Hope that helps! :-)
- Jeremy
Dwelling Productions
www.dwellingproductions.com