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"'
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]
<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>
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.
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.
Figured out the ANSWER...I was over thinking it.
<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
$directoryURI = $_SERVER['REQUEST_URI'];
$path = parse_url($directoryURI, PHP_URL_PATH);
$components = explode('/', $path);
$first_part = $components[1];
?>
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>
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With