HTML, CSS Navbar item highlighting by including same file contains navbar in all required pages

Question

I am doing a php project, in that each link page must have same navbar items. I did it by including header.php file which contains navbar code for all files requires navbar. When i click navbar items it is navigating to respective links which i have give, but i need to maintain the selection when the item is selected in navbar. can anybody help me with that.

Thank You

header.php

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="adminhome.php"><span class="glyphicon glyphicon glyphicon-home"></span> bmfmf</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
  <li><a href="totalapplications.php">Applications</a></li>
    <li><a href="student_details.php">Student Details</a></li> 
    <li><a href="renewalstudent_details.php">Renewal Student Details</a></li>
        <li><a href="block.php">Block</a></li>
        <li><a href="roomallotment.php">Allot</a></li>
        <li><a href="deallotsingle.php">De-allot</a></li>
        <li><a href="availability.php">Availability</a></li>                         
        <li><a href="searchallotment.php">Hostel Details view</a></li>
        <li><a href="student_details_master.php">Database</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">   
        <li><a href="createadmin.php"><span class="glyphicon glyphicon-user"></span> Create Admin</a></li>
        <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout </a></li>
        </ul>
</div>

Banshi Lal Dangi · Accepted Answer · 2017-04-22 06:12:44Z

1

There are several ways to accomplish it and following is one of them:

Add folllwoing PHP code in your header.php file.

<?php
   function active($currect_page){
        $url_array =  explode('/', $_SERVER['REQUEST_URI']) ;
        $url = end($url_array);  
       if($currect_page == $url){
          echo 'active'; //class name in css 
       } 
   }
 ?>

And then update your menu HTML part as below.

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="adminhome.php"><span class="glyphicon glyphicon glyphicon-home"></span> bmfmf</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
  <li><a class="<?php active('totalapplications.php');?>" href="totalapplications.php">Applications</a></li>
    <li><a class="<?php active('student_details.php');?>" href="student_details.php">Student Details</a></li> 
    <li><a class="<?php active('renewalstudent_details.php');?>" href="renewalstudent_details.php">Renewal Student Details</a></li>
        <li><a class="<?php active('block.php');?>" href="block.php">Block</a></li>
        <li><a class="<?php active('roomallotment.php');?>" href="roomallotment.php">Allot</a></li>
        <li><a class="<?php active('deallotsingle.php');?>" href="deallotsingle.php">De-allot</a></li>
        <li><a class="<?php active('availability.php');?>" href="availability.php">Availability</a></li>                         
        <li><a class="<?php active('searchallotment.php');?>" href="searchallotment.php">Hostel Details view</a></li>
        <li><a class="<?php active('student_details_master.php');?>" href="student_details_master.php">Database</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">   
        <li><a href="createadmin.php"><span class="glyphicon glyphicon-user"></span> Create Admin</a></li>
        <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout </a></li>
        </ul>
</div>

It will add "active" class to the current page menu item.

answered Apr 22, 2017 at 6:12

Banshi Lal Dangi

6753 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sparkrish77 Over a year ago

I appreciate your response. It is working with small change. Bold code must be placed in li section. <li><a class="<?php active('totalapplications.php');?>" href="totalapplications.php">Applications</a></li>

sparkrish77 Over a year ago

I have a doubt can we just add more than one PHP files in that active function like <?php active('totalapplications.php,total.php')?>.

Banshi Lal Dangi Over a year ago

But, How two pages can be opened at the same time in the same tab. You always be having the single page URL in a tab. But if you are looking to make active 2 menu items, in that case you can call the active method with same parameter and add the same on that both of the menu items.

Collectives™ on Stack Overflow

HTML, CSS Navbar item highlighting by including same file contains navbar in all required pages

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related