CODEWITHSUNDEEP
jqueryhtmlcss
El G
El G

Reputation: 71

highlight active element based on active page

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. When he presses on "service" the same as above will happen etc.

Note 1: this menu is called in the main body with require_once("path/to/navmenu.php") and I don't know if it affects anything

Note 2: I know jQuery is the key here but i tried some code in stackoverflow from similar questions and none worked. A JSfiddle is appreciated

HTML CODE:

<nav class="flexy-menu">
    <li class="active"><a href="index.php">home</a><div  class="menu-space"></div></li>
    <li><a href="about-us-style1.php">about</a><div class="menu-space"></div></li>
    <li><a href="service-style2.php">service</a><div class="menu-space"></div></li>
</nav>

CSS CODE:

 .flexy-menu li:hover > a,
 .flexy-menu li.active a {
   background: #c68f50;
   color: #fff;
 }

Upvotes: 1

Views: 733

Answers (5)

El G
El G

Reputation: 71

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>

Upvotes: 0

IBAD GORE
IBAD GORE

Reputation: 413

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.

Upvotes: 2

Krishanu Dey
Krishanu Dey

Reputation: 6406

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)

Upvotes: 0

Avinash
Avinash

Reputation: 6174

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.

Upvotes: 1

Friendly Crook
Friendly Crook

Reputation: 1198

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

Upvotes: 2

Related Questions