Stay current nav menu active in bootstrap when move sub page/ other page

1
votes

I want to make menu nav stay active in boostrap when acces sub page/ other page.

this is my code on header menu: 

    function echoActiveClassIfRequestMatches($requestUri)
     {
       $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

       if ($current_file_name == $requestUri)
         echo 'class="active"';
    }

>Home

This fuction only work if we acces parrent page. if want acces sub page, nav menu didn't stay active. For example: if we acces index.php, nav menu is active, but if we acces sub page from index.php, nav menu didn't active. How to get nav menu active when we acces sub page? Thank's very much for answer..

2
phpcsstwitter-bootstrap

2 Answers

0
votes

The simple answer is that you could use

$_SERVER['SCRIPT_NAME']

instead of 

$_SERVER['REQUEST_URI']

The longer answer is that you handle multiple things from your function and this will prevent you from reusing your code.

Please consult the following suggestion:

<?php
  /**
   * checks if the user called a certain script
   */
  function requestMatches($script_name)
  {
    return (basename($_SERVER['SCRIPT_NAME'], '.php') == $script_name);
  }

  /**
   * identifies the class for a given request 
   */
  function getClassForRequest($script_name)
  {
    return requestMatches($script_name) ? 'active' : '';
  }
?>

<ul class="nav navbar-nav navbar-left">
  <li class="<?=getClassForRequest('table')?>">
    <a href="table.php">Table <span class="sr-only">(current)</span></a>
  </li>
  <li class="<?=getClassForRequest("index")?>">
    <a href="index.php">home <span class="sr-only">(current)</span></a>
  </li>
</ul>

By separating your logic in separate functions you can now easily address multiple situations if that would ever by the case. Observe that there is no need to echo from the function body, as <?= ?> already does that for you.

In the end, I would add that this thing should be entirely handled on the client side. Here is an example, using jQuery.

<ul class="nav navbar-nav navbar-left" id="custom_menu">
  <li>
    <a href="table.php">Table <span class="sr-only">(current)</span></a>
  </li>
  <li>
    <a href="index.php">home <span class="sr-only">(current)</span></a>
  </li>
</ul>

<script>
$(function() {
    var path = window.location.pathname;
    var item = path.split('/').pop();
    var element = $('#custom_menu a[href="' + item + '"]');
    if (element.length == 0) {
        // no elements match the current request uri
        return false;
    }
    element.parent().addClass('active');
});
</script>
0
votes

Finnaly, I am use this code to resolve my problem.

function echoActiveClassIfRequestMatches($requestUri)
     {
       $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

       if ($current_file_name == $requestUri)
         echo 'class="active"';
    }

<!-- menu fuction -->
<ul class="nav navbar-nav navbar-left">
<li id="home" <?=echoActiveClassIfRequestMatches("index")?>><a href="index.php">HOME <span class="sr-only">(current)</span></a></li>
</ul>

<!-- add jquery in each sub page -->

<script src="jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#home').addClass('active');
         // other menu
        //$('#table').addClass('active');
    });
</script>

Thanks..