Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add class="active" to active page using PHP

Tags:

html

css

php

Dynamic Header, CSS Class Change To Active USING PHP (dirrectory)

I want the class of the <li> tag to change under the active dirrectory... now, every guide shows me how to do it when your page equals it, but i want to change the <li> depending on what dirrectory im on

for example:

if say im on
http://example.com/RESOURCES/code/opensource,
or
http://example.com/RESOURCES/images/clipart
i want the "RESOURCES" ^^ <li> to be 'class="active"' while the rest display 'class="noactive"'

or if im on
http://example.com/tutorials/css/flawless-dropdown-menu
I want the "tutorials" <li> to be 'class="active"' while the rest are 'class="noactive"'


URL Setup:

This is my example of how my url's are displayed...

http://example.com/tutorials/css/flawless-dropdown-menu

^^That URL is the page of a tutorial....under the "tutorials" directory, than under the "CSS" category directory, than the page title (all of these directories are not real and are rewrites from .htaccess) [irrelevant]


Navigation Setup:

<ul id="mainnav">
  <li class="noactive"><a href="/">Home</a></li>
  <li class="active"><a href="/tutorials/">Tutorials</a></li>
  <li class="noactive"><a href="/resources/">Resources</a></li>
  <li class="noactive"><a href="/library/">Library</a></li>
  <li class="noactive"><a href="/our-projects/">Our Projects</a></li>
  <li class="noactive"><a href="/community/">Community</a></li>
</ul>
like image 399
Alex Sarnowski Avatar asked Nov 11 '12 22:11

Alex Sarnowski


People also ask

How do I add active class to a navigation menu?

To set the active class to the navigation menu dynamically by scrolling or clicking on the navigation links, the active class is to be set on each section depending on the position of the webpage. To add methods and variables, JavaScript is used.

How do I add active class to UL Li?

on('click','li',function(){ $(this). addClass("active"); // adding active class }); The above code will add the active class to the li tag whenever the user clicks on the Li element.


2 Answers

Figured out the ANSWER...I was over thinking it.

HTML

<ul id="mainnav">
    <li class="<?php if ($first_part=="") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Home</a></li>
    <li class="<?php if ($first_part=="tutorials") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Tutorials</a></li>
    <li class="<?php if ($first_part=="resources") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Resources</a></li>
    <li class="<?php if ($first_part=="library") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Library</a></li>
    <li class="<?php if ($first_part=="our-projects") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Our Projects</a></li>
    <li class="<?php if ($first_part=="community") {echo "active"; } else  {echo "noactive";}?>"><a href="#">Community</a></li>
</ul>

PHP

<?php 
$directoryURI = $_SERVER['REQUEST_URI'];
$path = parse_url($directoryURI, PHP_URL_PATH);
$components = explode('/', $path);
$first_part = $components[1];
?>
like image 144
Alex Sarnowski Avatar answered Oct 26 '22 05:10

Alex Sarnowski


header.php

$activePage = basename($_SERVER['PHP_SELF'], ".php");

nav.php

<ul>
    <li class="<?= ($activePage == 'index') ? 'active':''; ?>"><a href="/index.php">Home</a></li>
    <li class="<?= ($activePage == 'tutorials') ? 'active':''; ?>"><a href="/tutorials.php">Tutorials</a></li>
...
like image 28
vlycser Avatar answered Oct 26 '22 05:10

vlycser