Dynamic 'active' menu

[lprintz]

Hi guys!

I’ve researched and tried SO many things to no avail…I simply want to dynamically set an ‘active’ class based on page url

The latest I tried seemed very clear and concise but no go – http://www.siphon-marketing.com/nav-test/nav-test.html

Can somebody PLEASE help?

Len

[Beverleyh]

Funny you should ask. Just wrote this up on Friday http://blog.fofwebdesign.co.uk/40-highlight-the-menu-button-for-the-current-web-page

[Atelierbram]

@beverleyh bookmarked! ;)

@lprintz there is a javaScript error, visible if you open console in DevTools: jQuery is not included.

But besides javaScript solutions, there are more ways to skin this cat when using server-side rendering, in PHP for example (PHP frameworks like WordPress will set a .current class on the right list-item when using the default menu-builder).

[Beverleyh]

@Atelierbram thanks! :D

Yep, there are ways to do it in PHP too. For anyone not using a framework that adds a class, here’s a simple way to do it in PHP…

At the very top of the web page – above all HTML, even doctype;

<?php 
$pg = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get file name from url and strip extension
?>

This will take a value of “about-us” from an URL that looks like “www.mywebsite.com/about-us.php”.

And to use it in a menu’s li elements to add a class…;

<li class="<?php if($pg=='about-us'){?>current<?php }?>">
    <a href="/about-us.php">About Us</a>
</li>
<li class="<?php if($pg=='services'){?>current<?php }?>">
    <a href="/services.php">Services</a>
</li>

The output on the “about-us.php” page when it is viewed in a browser will look like this;

<li class="current">
    <a href="/about-us.php">About Us</a>
</li>
<li class="">
    <a href="/services.php">Services</a>
</li>

[Beverleyh]

@paulie_d, @senff

Eeek! My post got swallowed :( Think I edited too many times. Can you release it from the mod queue please?

[GMK Hussain]

use jQuery

jQuery(document).ready(function() {
  var url = window.location;
  jQuery('ul.nav a[href="' + url + '"]').parent().addClass('active');
  jQuery('ul.nav a').filter(function() {
    return this.href == url;
  }).parent().addClass('nav-path-selected');
});

http://codepen.io/gmkhussain/pen/GZbQYQ

[Atelierbram]

@beverleyh You could rescue it from this gist (copy & paste from email)

@gmkhussain something like that was attempted in the demo by @lprintz but the jQuery library was not included

[Beverleyh]

Gulped again! Something about it really isn’t liking me… I’d better wait for a mod to step in :/

[Atelierbram]

@beverleyh happens to me sometimes … don’t know why. Posting to much links (anti spam measure?) ,editing the reply too often and/or two fast in succesion?

[Beverleyh]

Sweet! I’ll try again…

… there are ways to do it (set an ‘active’ class based on page url) in PHP too. For anyone not using a framework that adds a class, here’s a simple way to do it in PHP…

At the very top of the web page – above all HTML, even doctype;

<?php
    $pg = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get file name from url and strip extension
?>

This will take a value of “about-us” from an URL that looks like http://www.mywebsite.com/about-us.php.

And to use it in a menu’s li elements to add a class…;

<li class="<?php if($pg=='about-us'){?>active<?php }?>;">;
    <a href="/about-us.php">About Us</a>
</li>
<li class="<?php if($pg=='other-stuff'){?>active<?php }?>;">;
    <a href="/other-stuff.php">Other Stuff</a>
</li>

The output on the “about-us.php” page when it is viewed in a browser will look like this;

<li class="active">
    <a href="/about-us.php">About Us</a>
</li>
<li class="">
    <a href="/other-stuff.php">Other Stuff</a>
</li>

[Paulie_D]

@Beverleyh Et Voila

[Beverleyh]

Thanking you, kind Sir :)

[Author]

Posts