Highlight Active Element Based On Active Page

July 28, 2022 Post a Comment

I searched for similar questions but none worked so I'm here requesting your help. What I want is: When someone visits 'about' the li will become active so that css will apply. Whe

Solution 1:

You're using PHP, so you could just define a PHP variable in the head of each page, e.g. for the about page:

$about_page = 1;

and then you could highlight your menu-point if the user is on that particular page:

<li><a href="about-us-style1.php" class="<?php if($about_page == 1) { echo 'highlighted'; } ?>">about</a><div class="menu-space"></div></li>

And don't forget to declare the class highlighted in CSS:

.highlighted {
   background: #c68f50;
   color: #fff;
}

Just an idea - there may be a more advanced solution

Solution 2:

Well I would appreciate doing it in PHP as you have a seperate file for NavBar and its a good practice. With JQuery it can be achieved as follows:

function setMenu()
{
   var chk = false;
   $(".flexy-menu li").removeClass('active').each(function()
   {
       if(chk == false && window.location.href.indexOf($(this).find('a').attr('href')) != -1)
       {
           $(this).addClass('active');chk = true;
       }
   });       
}

You may call setMenu(); anytime after the menu is displayed. Better to call it in $(document).ready() function.

Solution 3:

Well, if you are redirecting your user to another page then you need to do server side code to check for current page and apply appropriate class to link.

But if you not redirecting then let me know I will add code for the same.

// Server Side Code

<?php
    $page_name = str_replace('.php', '', $_SERVER['PHP_SELF']);

    $page_array = array(
            'index'=>'',
            'about'=>''
    );
    $page_array[$page_name] = 'active';
?><html>
    <head>
        <title>Active Menu</title>
    </head>
    <body>
        <nav>
            <a href="#" class="<?php echo $page_array['index']?>">Home</a>
            <a href="#" class="<?php echo $page_array['about']?>">About</a>
        </nav>
    </body>
</html>

p.s.: I have kept this very simple to make you understand the core concept of what we are trying to achieve. This can be improved in many ways but for the startup guys this can be good help on where to start.

Solution 4:

As you are redirecting user. You need to check page name and highlight the li element that has an anchor link with the same value as href after page is ready. Following snippet might help.

$(document).ready(function () {
    var pagename = location.pathname.split('/').slice(-1)[0];
    $(".flexy-menu li a").each(function (index) {
        if($(this).attr("href").indexOf(pagename)==0){
            $(this).parent().addClass("active");
        }
        else{
            $(this).parent().removeClass("active");
        }
    });
});

Here is the complete snippet. save this as a html file with name test2.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>
  <style type='text/css'>
    .flexy-menu li:hover > a, .flexy-menu li.active a {
         background: #c68f50;
         color: #fff;
    }
  </style>



<script type='text/javascript'>
$(document).ready(function () {
    var pagename = location.pathname.split('/').slice(-1)[0];
    $(".flexy-menu li a").each(function (index) {
        if($(this).attr("href").indexOf(pagename)==0){
            $(this).parent().addClass("active");
        }
        else{
            $(this).parent().removeClass("active");
        }
    });
});
</script>


</head>
<body>
  <nav class="flexy-menu">
    <li class="active"><a href="index.php">home</a>

        <div class="menu-space"></div>
    </li>
    <li><a href="test2.html">about</a>

        <div class="menu-space"></div>
    </li>
    <li><a href="service-style2.php">service</a>

        <div class="menu-space"></div>
    </li>
</nav>
</body>
</html>

Notice in html first li is having active active class. but in browser if the second link will be highlighted (if you save the file as test2.html)

Solution 5:

Well hello again. I run through all of your comments and answers. EVERYthing you mention is doing the trick to be honest. But since im kinda unfamiliar with JS/Jquery and CSS3 selectors i went the php way :)

So what it did: added a variable on each page like $about_page=1; eg. when someone visits indexpage. Then on the navigation.php i did some if statement that echos the "active" class. (

<li <?php if($about_page==1){echo 'class="active"';}?>><a href="about-us-style1.php">about</a><div class="menu-space"></div>
            </li>

Learn Html5