1

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;
 }
Jackie Ali Cordoba
  • 17
  • 5
El G
  • 71
  • 9

5 Answers5

3

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

Friendly Crook
  • 1,188
  • 1
  • 10
  • 13
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.

IBAD GORE
  • 403
  • 2
  • 5
1

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.

Avinash
  • 6,064
  • 15
  • 62
  • 95
  • it's not that they "need" to do server side code. and that isn't an answer to his question. not totally. – Praveen Puglia May 28 '15 at 12:49
  • @TheWarlock, actually he wants to redirect page, so that only way is to do server side code to apply class to appropriate link. That is the reason this approach was posted. – Avinash May 28 '15 at 12:52
  • how about a common code of js present in all pages that can evaluate it based on the URL and some prepared data? – Praveen Puglia May 28 '15 at 12:55
  • Hello i see what both you mean here. The easiest task for me is to set a JS in head section that would run in all pages. Would that be a solution though? Also i can have different head sections in each page if different code is required. – El G May 28 '15 at 12:58
  • Yes that can be done, but would you personally prefer this solution if you are in this situation? So my try was to give him a optimal solution and not just solution. – Avinash May 28 '15 at 12:59
  • Im always open to different solutions and thanks for your insight in my problem. Also could you give me an example of server side code that checks the url? lets say "if url = index.php then add active class to the corresponding li" – El G May 28 '15 at 13:01
  • Thanks for going into the trouble! Will get your code for future referrence – El G May 28 '15 at 13:29
1

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)

Krishanu Dey
  • 6,326
  • 7
  • 51
  • 69
0

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>
El G
  • 71
  • 9