Hello I would like to know how to use PHP in my header so that my class active can be activated when it is on the correct page.
for instance on my index.php
i have this at the top
<?php
$page = 'Home';
include("header.php");
?>
then this is in my navigation
<nav>
<ul>
<li><a class="active" href="index">Home</a></li>
<li class="rightside">Projects</li>
<li class="rightside">About</li>
<li class="rightside">Blog
<li class="rightside">Contact
</ul>
</nav>
I want the class to be activated when i am on the appropriate page if that makes any sense. Thank you, my PhP knowledge is minimal.
This is a shorthand if statement that can be used inline
<?php echo ($page == 'Home' ? 'active':'');?>
See Below
<nav>
<ul>
<li><a class="<?php echo ($page == 'Home' ? 'active':'');?>" href="index">Home</a></li>
<li class="rightside"><a class="<?php echo ($page == 'Projects' ? 'active':'');?>" href="projects">Projects</a></li>
<li class="rightside"><a class="<?php echo ($page == 'About_us' ? 'active':'');?>" href="about_us">About</a></li>
<li class="rightside"><a class="<?php echo ($page == 'Blog' ? 'active':'');?>" href="blog">Blog</a>
<li class="rightside"><a class="<?php echo ($page == 'Contact' ? 'active':'');?>" href="contact">Contact</a>
</ul>
</nav>
I personally use a jquery function for this, it saves having to declare the page type each time
jQuery
$(function () {
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("active");
});
If you always declare $page before the header include, than you can use an if statement.
Just an example:
<nav>
<ul>
<li><a class="<?php echo ($page == 'Home') ? 'active' : 'rightside'; ?>" href="index">Home</a></li>
<!-- same for your other list elements -->
</ul>
</nav>
Related
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">Home</li>
<li class="active">Tutorials</li>
<li class="noactive">Resources</li>
<li class="noactive">Library</li>
<li class="noactive">Our Projects</li>
<li class="noactive">Community</li>
</ul>
Figured out the ANSWER...I was over thinking it.
HTML
<ul id="mainnav">
<li class="<?php if ($first_part=="") {echo "active"; } else {echo "noactive";}?>">Home</li>
<li class="<?php if ($first_part=="tutorials") {echo "active"; } else {echo "noactive";}?>">Tutorials</li>
<li class="<?php if ($first_part=="resources") {echo "active"; } else {echo "noactive";}?>">Resources</li>
<li class="<?php if ($first_part=="library") {echo "active"; } else {echo "noactive";}?>">Library</li>
<li class="<?php if ($first_part=="our-projects") {echo "active"; } else {echo "noactive";}?>">Our Projects</li>
<li class="<?php if ($first_part=="community") {echo "active"; } else {echo "noactive";}?>">Community</li>
</ul>
PHP
<?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':''; ?>">Home</li>
<li class="<?= ($activePage == 'tutorials') ? 'active':''; ?>">Tutorials</li>
...
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']?>">Home</li>
<li class="<?php echo $active['tutorials']?>">Tutorials</li>
<li class="<?php echo $active['resources']?>">Resources</li>
<li class="<?php echo $active['library']?>">Library</li>
<li class="<?php echo $active['our-projects']?>">Our Projects</li>
<li class="<?php echo $active['community']?>">Community</li>
</ul>
Maybe this helps 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");
});
It's probably easier to do with jQuery but this 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">'.str_replace("-"," ",$menuItem).'</li>');
} else {
$menu[]=('<li class="no-active">'.str_replace("-"," ",$menuItem).'</li>');
}
}
foreach ($menu as $item) {
echo $item.'<br />';
}
if you use mysql_fetch defined your row for menu title.
if we take your menu title is MENU in mysql database and you have to put in
(Home,tutorials,library,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';}?>">Home</li>
<li class="<?php if($active=='tutorials'){echo 'active';}else{echo'noactive';}?>">Tutorials</li>
<li class="<?php if($active=='resources'){echo 'active';}else{echo'noactive';}?>">Resources</li>
<li class="<?php if($active=='library'){echo 'active';}else{echo'noactive';}?>">Library</li>
<li class="<?php if($active=='our-projects'){echo 'active';}else{echo'noactive';}?>">Our Projects</li>
<li class="<?php if($active=='community'){echo 'active';}else{echo'noactive';}?>">Community</li>
</ul>
</html>
<?php };?>
This answer will apply if all your pages have a php extension and you want a long messy way. I put the code below on top of every php page giving each page an ID which means all pages will have an ID which is tiresome and boring and hard to track.
<?php $page = 1; ?>
Now in my header or navigation I used the code below to put the active class. You can also put an else if you want something else.
<nav id="navbar" class="navbar">
<ul>
<li class="<?php if($page == 1){ echo "active"; } ?>"><a class="url" href="index.php">Index</a></li>
<li class="<?php if($page == 2){ echo "active"; } ?>"><a class="url" href="single-post.php">Information</a></li>
<li class="<?php if($page == 3){ echo "active"; } ?>"><a class="url" href="single-post.php">Wanted</a></li>
<li class="<?php if($page == 4){ echo "active"; } ?>"><a class="url" href="single-post.php">Workshop</a></li>
<li class="<?php if($page == 5){ echo "active"; } ?>"><a class="url" href="gallery.php">Gallery</a></li>
<li class="<?php if($page == 6){ echo "active"; } ?>"><a class="url" href="featured.php">Featured</a></li>
<li class="<?php if($page == 7){ echo "active"; } ?>"><a class="url" href="contact.php">Contact Us</a></li>
</ul>
</nav>
"includes/header.php" - This goes in 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 this goes on the nav section
<ul>
<?php
echo '<li'.$index.'><div>Inicio</div></li>';
echo '<li'.$nosotros.'><div>Nosotros</div></li>';
echo '<li'.$cursos.'><div>Cursos</div></li>';
echo '<li><div>Academia</div></li>';
echo '<li><div>Tienda</div></li>';
echo '<li'.$contacto.'><div>Contacto</div></li>';
?>
</ul>
Try the following:
<ul class="sub-menu">
<div class="h-10"></div>
<li class="<?php if ($your_variable=="test") {echo "active"; }
else{echo"noactive";}?>">
Test
</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";}?>">
Test3
</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");
?>
Here we can do a simple thing also :
<li class="page-scroll <?php if(basename($_SERVER['PHP_SELF'])=="aboutus.php"){echo "active";} ?>">About us</li>
Here is another take using PHP:
<ul class="navbar-nav">
<?php
// Defines all pages in navigation
$pages = array(
'Home' => 'index.php',
'Products' => 'products.php',
'Services' => 'services.php',
'Contact' => 'contact.php',
'About' => 'about.php'
);
// Gets active page URL
$active = basename($_SERVER['PHP_SELF']);
// Loops through all pages
foreach ($pages as $title => $url) {
// Checks if active url is matched and adds active CSS class
if ($active === $url) {
echo '<li>'.$title.'</li>';
}
// Prints out default style for remaining links
else {
echo '<li>'.$title.'</li>';
}
}
?>
</ul>
$getUrl = $_SERVER['REQUEST_URL']; -> www.example.com/home.php
$getFileName = explode('/',$getUrl);
The result of $getFileName Will Be In Array ->[" ","home.php"]
$result = $getFileName[2]; //home.php
<li class="<?php if ($result=='' || $result == 'index.php') {echo 'active'; }?>"><a href='#'>Home</a></li>
<li class="<?php if ($result=='about.php') {echo 'active'; }?>"><a href='#'>About Us</a></li>
<li class="<?php if ($result=='contact.php') {echo 'active'; }?>"><a href='#'>Contact Us</a></li>
You can use str_replace for this.
$path = $_SERVER['REQUEST_URI'];
$active = str_replace('/','', $path);
<ul>
<li class="nav-item <?php if($active == '' || $active == 'index.php'){echo 'active';}?>">
<a class="nav-link" href="index.php">HOME</a>
</li>
<li class="nav-item <?php if($active == 'about.php'){echo 'active';}?>">
<a class="nav-link" href="about.php">ABOUT US</a>
</li>
</ul>
<?php $request_uri= $_SERVER['REQUEST_URI'];?>
<ul>
<li class="<?php if((strpos($request_uri,"index.html")!==false) || $request_uri=="" || $request_uri=="/"){echo "selected";}?>">Home</li>
<li class="<?php if((strpos($request_uri,"service")!==false)){echo "selected";}?>">Services </li>
<li class="<?php if((strpos($request_uri,"product")!==false)){echo "selected";}?>">Products</li>
<li class="<?php if((strpos($request_uri,"blog")!==false)){echo "selected";}?>">Blog</li>
<li class="<?php if((strpos($request_uri,"question")!==false)){echo "selected";}?>">Ques & Ans</li>
<li class="<?php if((strpos($request_uri,"career")!==false)){echo "selected";}?>">Career</li>
<li class="<?php if((strpos($request_uri,"about-us")!==false)){echo "selected";}?>">About</li>
</ul>
<div class="menu clearfix">
<ul>
<li>start</li>
<li>rating</li>
<li>upload</li>
</ul>
Was a while since i used php. Is there any smart way to do a foreach in php and render this menu + an "active" class to the clicked link. So if the active page is "rating", the html would render:
<div class="menu clearfix">
<ul>
<li>start</li>
<li>rating</li>
<li>upload</li>
</ul>
Thanks
Assuming the $_GET value of p would be rating (or any other link in the menu for that matter), one could do something like this:
<?php
echo "<div class=\"menu clearfix\">";
echo "<ul>";
$links = array('rating', 'upload', 'about');
foreach ($links as $link) {
$active = "";
if (!empty($_GET['p']) && $link == $_GET['p']){
$active = 'class="active"';
}
echo "<li><a href=\"./?p=$link\" $active>$link</a></li>";
}
echo "</ul></div>"
?>
As far as I understand you want to know which li is active after request.
If it is - you have to get $_GET parameter smth like $_GET['p'].
And do rendering, smth like:
foreach($ul as $li)
{
if ($_GET['p'] == $li->code)
echo 'class="active"';
}
For example:
<div class="menu clearfix">
<ul>
<?php foreach($ul as $li): ?>
<li><a href="<?php echo $li->url;?>" <?php echo $_GET['p']==$li->get ? class="active" : ''?>><?php echo $li->name;?></a></li>
<?php endforeach; ?>
</ul>
<ul class="sub-nav" >
<?php
$full_name = $_SERVER['PHP_SELF'];
$name_array = explode('/',$full_name);
$count = count($name_array);
$page_name = $name_array[$count-1];
?>
<li><a class="<?php echo ($page_name=='where-to-buy.php')?'active':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='about.php')?'active':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='contact.php')?'active':'';?>" href="contact.php">CONTACT US</a></li>
Please follow below URL to live demo...
https://webdesignerhut.com/active-class-navigation-menu/
So I have searched SO for an hour trying to find the answer, and also tried various methods, including this
I am trying to include my pages, along with the navigation. But on the correct page, I need the list-item to have a class of active. The navigation is in header.php and currently looks like this:
<nav>
<ul>
<li class="active"> Home </li>
<li> Apps </li>
<li> Forums </li>
</ul>
</nav>
First, I have no idea if JS(jQuery) would be better, or if PHP was to be better. Both wouldn't matter if it works.
Also I am a bit new with PHP and trying to learn.
What would be the easiest (hopefully) method to use? So I don't have to change a lot of code just to give a nav class="active"
Asumming you have a $page variable (which contains the name of the page you are currently on):
<nav>
<ul>
<li class="<?php echo ($page == "home" ? "active" : "")?>"> Home </li>
<li class="<?php echo ($page == "apps" ? "active" : "")?>"> Apps </li>
<li class="<?php echo ($page == "forums" ? "active" : "")?>"> Forums </li>
</ul>
</nav>
Here is a simple way where you do not need to add any other variable
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/index.php" ? "active" : "");?>">
Start
</li>
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/about.php" ? "active" : "");?>">
About
</li>
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/practices.php" ? "active" : "");?>">
Practices
</li>
Add basename function before $_SERVER. I hope it will work.
echo (basename($_SERVER['PHP_SELF']) == 'yourPageName' ?'active' : " ");
At page header use:
<?php $loc = this.location; ?>
Then at every link add:
<?php(this.href == $loc) ? echo 'class="active"' : '' ?>
define variable $page="index.php" in index.php page and for other pages change the variable value according to the page name
<li class="<?php echo ($page == "index.php" ? "active" : "")?>">
Home
</li>
<li class="<?php echo ($page == "about.php" ? "active" : "")?>">
About
</li>
<li class="<?php echo ($page == "service.php" ? "active" : "")?>">
Services
</li>
<li class="<?php echo ($page == "contact.php" ? "active" : "")?>">
Contact
</li>
$page_url = $_SERVER['QUERY_STRING'];
$s = explode("&",$page_url);
//print $s[0];
$page = $s[0];
function createTopNav($page)
{
$pages = array(
array(
'name'=>'Feeder',
'link'=>'page=feeder'
),
array(
'name'=>'Services',
'link'=>'page=services'
),
array(
'name'=>'Development',
'link'=>'page=development'
),
array(
'name'=>'Design',
'link'=>'page=design'
),
);
$res = "";
foreach($pages as $key=>$val)
{
if($val['link']==$page)
{
$res.= "<a class=\"active\" href=\"?"
.$val['link'].
"\">"
.$val['name'].
"</a>";
}
else
{
$res.= "<a class=\"\" href=\"?"
.$val['link'].
"\" >"
.$val['name'].
"</a>";
}
}
$res.="";
return $res;
}
echo createTopNav($page);
if you are using query string exmaple.com?page_id=Apps to pass page id than with php you can
approach this thing
$page_id = $_REQUEST['page_id'];
<ul>
<li class="<?php echo ($page_id == "Home" ? "active" : "");?>">
Home
</li>
<li class="<?php echo ($page_id == "Apps" ? "active" : "");?>">
Apps
</li>
<li class="<?php echo ($page_id == "Forums" ? "active" : ""); ?>">
Forums
</li>
</ul>
If you don't want to use jQuery or PHP - can do next:
Give ID or different CLASS to each <li> element in "your-include-nav.php".
Define the "active" style with CSS in <head> section, on each page.
Add basename function. Then it will work i hope.
What's wrong with the following code? I would like to dynamically insert "current" CSS class when the respective <li> element is clicked. Thanks!
<?php
$pg = $_SERVER['PHP_SELF'];
?>
<section>
<aside>
<nav>
<ul>
<li class="<?php if($pg == 'index.php?page=about.php'){echo 'current';} ?>">About</li>
<li class="">Services</li>
</ul>
</nav>
</aside>
<section>
Try with:
<?php
$pg = $_GET['page'];
$allow = array('about.php', 'main.php', 'other.php');
if ( !in_array($pg, $allow) ) {
$pg = 'default_value';
}
?>
<section>
<aside>
<nav>
<ul>
<li class="<?php if($pg == 'about.php'){echo 'current';} ?>">About</li>
<li class="">Services</li>
</ul>
</nav>
</aside>
<section>
<li class="<?php echo ($_GET['page'] == 'about.php')? 'current' : 'normal'; ?>">
About
</li>
$_SERVER['PHP_SELF'] doesn't return the $_GET vars (?page=about.php)
$_SERVER['PHP_SELF'] will start with / and will not include the query string.
You should probably check $_GET['page'] instead.
Well if your looking for clicked at runtime you need javascript not php. Something like this using jQuery will work for you:
$(document).ready(function(){
$('nav >ul li').click(function(){
//remove all current classes
$('.current').removeClass('current');
$(this).addClass('current');
});
});
So I have a menu in a php file that looks like this (This is the whole file. I'm totally new to PHP.)
menu.php:
<li id="current"><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Results</span></li>
<li><span>Pictures</span></li>
<li><span>Our Location</span></li>
Now in my pages I do this (index.php):
<div id="tabs1" >
<ul>
<!-- CSS Tabs -->
<?php include("menu.php"); ?>
</ul>
</div>
So what I want to be able to do is change the line above to this:
<?php include("menu.php?current=pictures"); ?>
Which would make the active tab the Pictures tab. How can I do this?
You could also try this:
Your php script
<?php
$selected = "pictures";
$current_id = ' id="current"';
include "menu.php";
?>
this is your menu:
<ul>
<li <?php if ($selected == "pictures") print $current_id; ?>><span>Home</span></li>
<li <?php if ($selected == "blog") print $current_id; ?>><span>Blog</span></li>
<li <?php if ($selected == "home") print $current_id; ?>><span>Results</span></li>
<li <?php if ($selected == "me") print $current_id; ?>><span>Pictures</span></li>
<li <?php if ($selected == "contacts") print $current_id; ?>><span>Our Location</span></li>
</ul>
Try this:
<li <?php if($_GET['current'] == 'home') {echo 'id="current"'}?>><span>Home</span></li>
<li <?php if($_GET['current'] == 'blog') {echo 'id="current"'}?>><span>Blog</span></li>
<li <?php if($_GET['current'] == 'results') {echo 'id="current"'}?>><span>Results</span></li></li>
and so on....
worth looking at
intelligent navigation
<nav>
<style>
#active{
color:#FFC801;
}
</style>
<?php
$activePage = basename($_SERVER['PHP_SELF'], ".php");
?>
<ul>
<li>About Us</li>
<li>Mentors</li>
<li>Tours</li>
<li>Animation</li>
<li>Blog</li>
<li>Testimonials</li>
<li>Press/Media</li>
<li>Facts</li>
</ul>
</nav>
I don't think its necessary for it to be done at the server side (using up CPU cycles).
Use javascript/CSS to achieve this.