Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How add class='active' to html menu with php

Tags:

I want to put my html navigation in a separate php file so when I need to edit it, I only have to edit it once. The problem starts when I want to add the class active to the active page.

I've got three pages and one common file.

common.php :

<?php  $nav = <<<EOD    <div id="nav">         <ul>            <li><a <? if($page == 'one'): ?> class="active"<? endif ?> href="index.php">Tab1</a>/</li>            <li><a href="two.php">Tab2</a></li>            <li><a href="three.php">Tab3</a></li>        </ul>     </div> EOD; ?> 

index.php : All three pages are identical except their $page is different on each page.

  <?php      $page = 'one';            require_once('common.php');     ?>     <html>        <head></head>        <body>           <?php echo $nav; ?>        </body>     </html> 

This simply won't work unless I put my nav on each page, but then the whole purpose of separating the nav from all pages is ruined.

Is what I want to accomplish even possible? What am I doing wrong?

Thanks

EDIT: When doing this, the php code inside the li don't seem to run, it's just being printed as if it was html

like image 390
patad Avatar asked May 26 '10 13:05

patad


People also ask

How do I set bootstrap active class to NAV menu?

To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.

How do you make an active link in HTML?

The :active selector is used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.

What is active class in HTML?

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.


2 Answers

why don't you do it like this:

in the pages:

<html>    <head></head>    <body>       <?php $page = 'one'; include('navigation.php'); ?>    </body> </html> 

in the navigation.php

<div id="nav">    <ul>       <li>           <a <?php echo ($page == 'one') ? "class='active'" : ""; ?>                   href="index1.php">Tab1</a>/</li>       <li>           <a <?php echo ($page == 'two') ? "class='active'" : ""; ?>                    href="index2.php">Tab2</a>/</li>       <li>           <a <?php echo ($page == 'three') ? "class='active'" : ""; ?>                    href="index3.php">Tab3</a>/</li>    </ul> </div> 

You will actually be able to control where in the page you are putting the navigation and what parameters you are passing to it.

Later edit: fixed syntax error.

like image 147
Mihai Toader Avatar answered Sep 28 '22 08:09

Mihai Toader


A very easy solution to this problem is to do this.

<ul>   <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>"><a href="index.php">Home</a></li>   <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'portfolio.php'){echo 'current'; }else { echo ''; } ?>"><a href="portfolio.php">Portfolio</a></li>   <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'services.php'){echo 'current'; }else { echo ''; } ?>"><a href="services.php">Services</a></li>   <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){echo 'current'; }else { echo ''; } ?>"><a href="contact.php">Contact</a></li>   <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'links.php'){echo 'current'; }else { echo ''; } ?>"><a href="links.php">Links</a></li> </ul> 

Which will output

<ul>   <li class="current"><a href="index.php">Home</a></li>   <li class=""><a href="portfolio.php">Portfolio</a></li>   <li class=""><a href="services.php">Services</a></li>   <li class=""><a href="contact.php">Contact</a></li>   <li class=""><a href="links.php">Links</a></li> </ul> 
like image 43
Lance Avatar answered Sep 28 '22 10:09

Lance