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

Greg Thomas







PHP Programmer - interactivetools.com

By dwellingproductions - March 19, 2013

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>