Advertisement
Highlight Current Active Navigation Link - Step 2 - PHP
Highlight Current Active Navigation Menu Link using PHP Xhtml and CSS
Now that our Page is ready, we need to integrate our menu in that page.
Step 2: PHP
To do this, open the home.php again, and at the top of the page, before anything, add this PHP code:
PHP Code :
<?php
define('THIS_PAGE', 'home');
?>
By using this code, we defined that current page is ‘home’
You will need to add this code to every Page that is linked in your navigation bar, replacing the ‘home’ with the name you want to give to that page.
For Example:
You are adding the code to portfolio.php
In this case, You will need to replace the ‘home’ with ‘portfolio’, so your code will look like this:
PHP Code :
<?php
define('THIS_PAGE', 'portfolio');
?>
After adding the code to each page, we will integrate our menu into our pages.
To do this, open your home.php file, and find this text :
<!--content-->
Replace it with this PHP Code:
PHP Code :
<?php
include "menu.php";
?>
This will add our menu in our home.php, repeat this process for every page.
Now we are almost done, we just need to highlight the currently active link.
So, to do that, open the menu.php, and make these edits:
Find this Text:
class="home"
Repace it with :
class="<?php echo THIS_PAGE == 'home' ? 'current' : 'link'; ?>"
Repeat this Process with every <li> class, replacing the ‘home’ with the name which you defined earlier for each page.
For Example:
If you are replacing class=”portfolio”, you must replace it with :
class="<?php echo THIS_PAGE == 'portfolio' ? 'current' : 'link'; ?>"
After replacing every <li> class, Save the menu.php file.
And Viola ! Our Dynamic Navigation bar is ready !
Enjoy it !
Posted on Jun 19, 2008 at 15:19:37
Hi,
Quite useful. I have just declared two variables i each page since i am using main and sub menu. Thanks a lot
Posted on Jul 3, 2008 at 19:29:24
Thanks for this tutorial, just what I was looking for.
Posted on Feb 3, 2009 at 21:20:07
Great tutorial, just what i’ve been looking for. Is there a way of defining more than one page name within list
(i.e. class=”")
Posted on Feb 18, 2009 at 07:20:50
If your readers import their head or content into their pages, they can use this for the define():
define(’THIS_PAGE’,substr($_ENV['SCRIPT_NAME'],1));
That takes the first slash off the name, leaving, say: home.php and will work on every page, even you include() it. The rest is the same, except you’re gonig to check for the page name instead of a keyword like ‘home’ or ‘portfolio’.
Hope that helps somebody with a more dynamic site, and who doesn’t want to edit every page.
J.
Posted on Feb 25, 2009 at 20:14:14
This tutorial is just what i was looking for, thanks a bunch. I followed your example and managed to integrate it perfectly (almost) ;o)
For some reason it doesn’t pick up the style correctly when highlighting the current page, the text colour displays incorrectly.
I’ve tried fiddling with the style declaration, even moving from the external file to internal head section all to no avail.
Just wonder if anyone had any pointers for me?
Posted on Apr 24, 2009 at 15:26:08
hi,
i tried the dynamic define code from james valentine but it did not work for me.
but i got it work with this:
define(’THIS_PAGE’, basename ($_SERVER['PHP_SELF']));
it gives yout the wohle filename like home.php, you have to change it to home.php in the menu.php too!
maybe it helps
Posted on May 21, 2009 at 04:13:05
Thank you for an excellent tutorial!
Posted on Jun 1, 2009 at 09:30:17
I love your example. Everything works great in firefox, however it is not working correctly in IE. any idea why?
Posted on Jun 1, 2009 at 09:34:52
nvm I figured out my mistake. Thank you again.
Posted on Sep 17, 2009 at 10:04:39
that looks good if you have a smaller site… how about a generalize solution? if i have 200 pages, so i need to create 200 classes and then ‘define’ them. no a good approach.