Best IT Recipes

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

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

I have three pages and one shared 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 that their $ page is different on each page.

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

It just won’t work if I don’t put my navigator on every page, but then the whole purpose of the navigator branch from all pages is destroyed.

I want this to be possible? What am I doing wrong?

thank

EDIT: with this, the PHP code inside li does not work, it just prints as if it were html

+15
php
May 26 '10 at 13:34
source share
12 answers

Your code index.php is correct. I include the updated code for common.php below, then I will explain the differences.

 <?php $class = ($page == 'one') ? 'class="active"' : ''; $nav = <<<EOD <div id="nav"> <ul> <li><a $class 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; ?>

The first problem is that you need to make sure that the final declaration for your heredoc is EOD; - has no indentation at all. If he retreated, you will get errors.

As for your problem with PHP code that does not work in the heredoc statement, this is because you are looking at it wrong. Using the heredoc statement does not match closing PHP tags. Thus, you do not need to try to re-open them. It will do nothing for you. The way the heredoc syntax works is that everything between opening and closing is displayed exactly as it is written, with the exception of variables. They are replaced by the corresponding value. I removed your logic from heredoc and used a tertiary function to define the class to make it easier to see (although I do not believe that any logical statements will work in heredoc anyway)

To understand the heredoc syntax, it is the same as enclosing in double quotes ("), but without the need for escaping. Thus, your code can also be written as follows:

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

He will do the same, just written a little differently. Another difference between the heredoc and the string is that you can exit the string in the middle where you cannot in the heredoc. Using this logic, you can create the following code:

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

You can then include the logic directly in the string, as you originally intended.

Whatever method you choose, there is very little (if any) difference in script performance. It mainly depends on preferences. In any case, you need to make sure that you understand how they work.

+6
May 26 '10 at 14:08
source share

why don't you do it like this:

on the pages:

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

in 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>

In fact, you can control where on the page you are setting the navigation to and what parameters you pass to it.

Late editing: syntax error fixed.

+24
May 26 '10 at 13:42
source share

A very simple solution to this problem is to do it.

 <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 bring

 <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>
+9
May 29 '13 at 18:15
source share

I think you need to put $page = 'one'; above require_once. Otherwise, I do not understand the question.

+3
May 26 '10 at 13:36
source share

I know this is old, but none of these answers are very good (sry ppl)

The BEST way to do this (without writing collapsed classes) is to compare the current $ _SERVER ['REQUEST_URI'] with a href link. You are almost there.

Try it. (Adapted from http://ma.tt/scripts/intellimenu/ )

 $nav = <<<EOD <div id="nav"> <ul> <li><a 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; $lines = explode("\n", $nav); foreach($lines as $line) { if(preg_match('/href="([^"]+)"/', $line, $url)) { if(substr($_SERVER['REQUEST_URI'], 0, 5) == substr($url[1], 0, 5)) { $line = str_replace('><a', ' class="current-menu-item"><a', $line); } } echo $line . "\n"; }
+2
May 6 '11 at 21:08
source share

Why don't you create a function or class for this navigation and place the active page as a parameter there? So you would call it, for example:

 $navigation = new Navigation( 1 );

or

 $navigation = navigation( 1 );
+1
May 26 '10 at 1:41
source share

  • $page='one' should happen before you require_once() not after. Too late - code is already required, and $nav already defined.

  • You should use include('header.php'); and include('footer.php'); instead of setting the $nav variable early on. This increases flexibility.

  • Make more features. Something like this really makes things easier:

     function maybe($x,$y){return $x?$y:'';} function aclass($k){return " class=\"$k\" "; }

    then you can write your "condition" as follows:

     <a href="..." <?= maybe($page=='one',aclass('active')) ?>> ....
+1
May 26 '10 at 13:42
source share
 CALL common.php <style> .ddsmoothmenu ul li{float: left; padding: 0 20px;} .ddsmoothmenu ul li a{display: block; padding: 40px 15px 20px 15px; color: #4b4b4b; font-size: 13px; font-family: 'Open Sans', Arial, sans-serif; text-align: right; text-transform: uppercase; margin-left: 1px; color: #fff; background: #000;} .current .test{ background: #2767A3; color: #fff;} </style> <div class="span8 ddsmoothmenu"> <!-- // Dropdown Menu // --> <ul id="dropdown-menu" class="fixed"> <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>"><a href="index.php" class="test">Home <i>::</i> <span>welcome</span></a></li> <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'about.php'){echo 'current'; }else { echo ''; } ?>"><a href="about.php" class="test">About us <i>::</i> <span>Who we are</span></a></li> <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'course.php'){echo 'current'; }else { echo ''; } ?>"><a href="course.php">Our Courses <i>::</i> <span>What we do</span></a></li> </ul><!-- end #dropdown-menu --> </div><!-- end .span8 --> add each page <?php include('common.php'); ?>
0
Apr 17 '15 at 9:09
source share
  <ul> <li><a <?php echo ($page == "yourfilename") ? "class='active'" : ""; ?> href="user.php" ><span>Article</span></a></li> <li><a <?php echo ($page == "yourfilename") ? "class='active'" : ""; ?> href="newarticle.php"><span>New Articles</span></a></li> </ul>
0
Feb 01 '16 at 10:49 on
source share

The solution I use is as follows and allows you to set the active class to the php page.

Give each of your menu items a unique class, I use .nav-x (nav-about, here).

<li class="nav-item nav-about"> <a class="nav-link" href="about.php">About</a> </li>

At the top of each page (about.php here):

 <!-- Navbar Active Class --> <?php $activeClass = '.nav-about > a'; ?>

In another place (header.php / index.php):

 <style> <?php echo $activeClass; ?> { color: #fff !important; } </style>

Just change .nav-about > a to the page, .nav-forum > a , for example.

If you want a different style (colors, etc.) for each navigation element, just attach the inline style to this page, not the index / title page.

0
Oct 14 '16 at 23:10
source share

Separate your page from the navigation bar.

pageOne.php:

 $page="one"; include("navigation.php");

navigation.php

 if($page=="one"){$oneIsActive = 'class="active"';}else{ $oneIsActive=""; } if($page=="two"){$twoIsActive = 'class="active"';}else{ $twoIsActive=""; } if($page=="three"){$threeIsActive = 'class="active"';}else{ $threeIsActive=""; } <ul class="nav"> <li <?php echo $oneIsActive; ?>><a href="pageOne.php">One</a></li> <li <?php echo $twoIsActive; ?>><a href="pageTwo.php"><a href="#">Page 2</a></li> <li <?php echo $threeIsActive; ?>><a href="pageThree.php"><a href="#">Page 3</a></li> </ul>

I found that I can also set the title of my pages using this method.

  $page="one"; $title="This is page one." include("navigation.php");

and just take $ title var and put it between the title tags. Although I am posting it to my header page above my navigation bar.

0
Dec 20 '16 at 11:19
source share

You can use this PHP, hope this helps.

 <?php if(basename($_SERVER['PHP_SELF'], '.php') == 'home' ) { ?> class="active" <?php } else { ?> <?php }?>

Thus, the list will look as follows.

 <ul> <li <?php if( basename($_SERVER['PHP_SELF'], '.php') == 'home' ) { ?> class="active" <?php } else { ?> <?php }?>><a href="home"><i class="fa fa-dashboard"></i> <span>Home</span></a></li> <li <?php if( basename($_SERVER['PHP_SELF'], '.php') == 'listings' ) { ?> class="active" <?php } else { ?> <?php }?>><a href="other"><i class="fa fa-th-list"></i> <span>Other</span></a></li> </ul>
0
Jul 21 '17 at 12:02 on
source share


More articles:


All Articles