Add class = "active" to the active page using PHP
Dynamic header, change CSS class to active using PHP (directory)
I want the <li> class to change under the active directory ... now, each guide shows me how to do this when your page is equal to it, but I want to change the <li> depending on which directory is on it.
eg:
if I say that I'm on
http://example.com/RESOURCES/code/opensource ,
or
http://example.com/RESOURCES/images/clipart
I want "RESOURCES" ^^ <li> be 'class = "active"', while the rest displays 'class = "noactive"'
or if I'm on
http://example.com/tutorials/css/flawless-dropdown-menu
I want the "tutorials" <li> be 'class = "active"' and the rest to be 'class = "noactive"'
URL setting:
This is my example of how my URLs are displayed ...
http://example.com/tutorials/css/flawless-dropdown-menu ^^ This URL is a tutorial page .... in the "tutorials" directory, than in the "CSS" category directory, than the page title (all these directories are not real and rewritten from .htaccess) [does not matter]
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> +6
10 answers
Thought ANSWER ... I already thought about 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]; ?> +18
Through PHP you can try -
<?php // gets the current URI, remove the left / and then everything after the / on the right $directory = explode('/',ltrim($_SERVER['REQUEST_URI'],'/')); // loop through each directory, check against the known directories, and add class $directories = array("index", "tutorials","resources","library","our-projects","community"); // set home as 'index', but can be changed based of the home uri foreach ($directories as $folder){ $active[$folder] = ($directory[0] == $folder)? "active":"noactive"; } ?> <ul> <li class="<?php echo $active['index']?>"><a href="/">Home</a></li> <li class="<?php echo $active['tutorials']?>"><a href="/tutorials/">Tutorials</a></li> <li class="<?php echo $active['resources']?>"><a href="/resources/">Resources</a></li> <li class="<?php echo $active['library']?>"><a href="/library/">Library</a></li> <li class="<?php echo $active['our-projects']?>"><a href="/our-projects/">Our Projects</a></li> <li class="<?php echo $active['community']?>"><a href="/community/">Community</a></li> </ul> +5
Perhaps this will help you:
$(document).ready(function() { var parts = document.URL.split("/"); // [http:, empty, your domain, firstfolder] var firstFolder = parts[3]; $("#mainnav li").attr("class", "noactive"); $("#mainnav a[href='/" + firstFolder + "/']").parent().attr("class", "active"); }); +3
Most likely, jQuery is easier to work with, but it works:
$url='http://example.com/tutorials/css/flawless-dropdown-menu';//pass the current url here instead of a static string. $segments = explode ("/",$url); $menuItems=array('Tutorials','Resources', 'Library', 'Our-Projects','Community'); $menu=array(); foreach ($menuItems as $menuItem) { if($segments[3]==strtolower($menuItem)){ $menu[]=('<li class="active"><a href="/'.strtolower($menuItem).'/">'.str_replace("-"," ",$menuItem).'</a></li>'); } else { $menu[]=('<li class="no-active"><a href="/'.strtolower($menuItem).'/">'.str_replace("-"," ",$menuItem).'</a></li>'); } } foreach ($menu as $item) { echo $item.'<br />'; } +1
if you are using mysql_fetch, define your own string for the menu name. if we take the name of your MENU menu in the mysql database and you must enter (Home, tutorials, libraries, resources, our projects, community)
<?php //connect your data bass include(connection.php'); //get your from ID like www.google?id=1 $id = $_GET['id']; $query = "select * from pages where id='$id'"; $query1 = mysql_query($query); while($row= mysql_fetch_array($query1)) { ?> <html> <?php $active= $row['MENU'];?> <ul> <li class="<?php if($active=='Home'){echo 'active';}else{echo'noactive';}?>"><a href="/">Home</a></li> <li class="<?php if($active=='tutorials'){echo 'active';}else{echo'noactive';}?>"><a href="/tutorials/">Tutorials</a></li> <li class="<?php if($active=='resources'){echo 'active';}else{echo'noactive';}?>"><a href="/resources/">Resources</a></li> <li class="<?php if($active=='library'){echo 'active';}else{echo'noactive';}?>"><a href="/library/">Library</a></li> <li class="<?php if($active=='our-projects'){echo 'active';}else{echo'noactive';}?>"><a href="/our-projects/">Our Projects</a></li> <li class="<?php if($active=='community'){echo 'active';}else{echo'noactive';}?>"><a href="/community/">Community</a></li> </ul> </html> <?php };?> 0
"includes / header.php" - this goes at the top of the file
<?php $activePage = basename($_SERVER['PHP_SELF']); $index=""; $nosotros=""; $cursos=""; $contacto=""; switch ($activePage) { case 'index.php': $index=' class="current"'; break; case 'nosotros.php': $nosotros=' class="current"'; break; case 'cursos.php': $cursos=' class="current"'; break; case 'contacto.php': $contacto=' class="current"'; break; default: break; } ?> and it goes to the navigation section
<ul> <?php echo '<li'.$index.'><a href="/"><div>Inicio</div></a></li>'; echo '<li'.$nosotros.'><a href="nosotros"><div>Nosotros</div></a></li>'; echo '<li'.$cursos.'><a href="cursos"><div>Cursos</div></a></li>'; echo '<li><a href="http://www.redtechacademy.com"><div>Academia</div></a></li>'; echo '<li><a href="https://www.redtechhackingshop.com"><div>Tienda</div></a></li>'; echo '<li'.$contacto.'><a href="contacto"><div>Contacto</div></a></li>'; ?> </ul> 0
Try the following: <ul class="sub-menu"> <div class="h-10"></div> <li class="<?php if ($your_variable=="test") {echo "active"; } else{echo"noactive";}?>"> <a href="test.php">Test </a> </li> <li class="<?php if ($your_variable=="test2") {echo "active"; } else {echo"noactive";}?>"> <a href="test2.php" >Test2</a> </li> <li class="<?php if ($your_variable=="test3") {echo "active"; } else {echo "noactive";}?>"> <a href="test3.php">Test3</a> </li> </ul> **strong PHP text** <?php $directoryURI = $_SERVER['REQUEST_URI']; $path = parse_url($directoryURI, PHP_URL_PATH); $components = explode('/', $path); $your_variable = basename($_SERVER['PHP_SELF'], ".php"); ?> 0
<?php $request_uri= $_SERVER['REQUEST_URI'];?> <ul> <li class="<?php if((strpos($request_uri,"index.html")!==false) || $request_uri=="" || $request_uri=="/"){echo "selected";}?>"><a href="/index.html">Home</a></li> <li class="<?php if((strpos($request_uri,"service")!==false)){echo "selected";}?>"><a href="/services.html">Services</a> </li> <li class="<?php if((strpos($request_uri,"product")!==false)){echo "selected";}?>"><a href="/products.html">Products</a></li> <li class="<?php if((strpos($request_uri,"blog")!==false)){echo "selected";}?>"><a href="/blog.html">Blog</a></li> <li class="<?php if((strpos($request_uri,"question")!==false)){echo "selected";}?>"><a href="/question-answers.html">Ques & Ans</a></li> <li class="<?php if((strpos($request_uri,"career")!==false)){echo "selected";}?>"><a href="/career.html">Career</a></li> <li class="<?php if((strpos($request_uri,"about-us")!==false)){echo "selected";}?>"><a href="/about-us.html">About</a></li> </ul> -1