I am trying to make menu with active class for every site.
And I don't know what I am doing wrong. Thnaks for help :D
<li class="nav-item <?php echo $home; ?>">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item <?php echo $hry; ?>">
<a class="nav-link" href="/hry">Hry</a>
</li>
<?php
$host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if($host == 'myurl.com/') {
$home = 'active';
}
elseif ($host == 'myurl.com/hry') {
$hry = 'active';
}
else {
$home = 'non-active';
$hry = 'non-active';
}
?>
Looking at your code, I see problem lies here: You are setting the variables $home $hry after HTML.
You should set them before you output html. Should be like this:
<?php
$host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if($host == 'myurl.com/') {
$home = 'active';
}
elseif ($host == 'myurl.com/hry') {
$hry = 'active';
}
else {
$home = 'non-active';
$hry = 'non-active';
}
?>
<li class="nav-item <?php echo $home; ?>">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item <?php echo $hry; ?>">
<a class="nav-link" href="/hry">Hry</a>
</li>
You can always write a helper function:
function checkIfActive($route){
if(strpos($_SERVER['REQUEST_URI'], $route) !== false){
return "is-active";
}
return null;
}
And insert the helper function into your html for every menu item. It will check to see if its active based on the string you put in
<li class="nav-item <?php checkIfActive('string_for_home_url') ?>">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item <?php checkIfActive('string_for_hry_url'); ?>">
<a class="nav-link" href="/hry">Hry</a>
</li>
This will be a lot easier for you once you application and menu items start growing
First of all, apoligise for the messy title, I could not came up with a better one. You will understand the question better in the code. When I click in Private University I can make that button active, but I either want to make active the button Study Opportunity. Thanks.
<li class="dropdown <?php if(basename($_SERVER['SCRIPT_NAME']) == 'study-opportunity.php'){echo 'active'; }else { echo ''; } ?>">
Study Opportunity<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'universitetet-me-konkurim.php'){echo 'active'; }else { echo ''; } ?>">Universitetet me Konkurim</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'private-university.php'){echo 'active'; }else { echo ''; } ?>">Private University</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'studime-jashte-vendit.php'){echo 'active'; }else { echo ''; } ?>">Studime Jashte Vendit</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'bursa.php'){echo 'active'; }else { echo ''; } ?>">Bursa Studimi</li>
</ul>
</li>
You have to check all of the links in the dropdown too:
<li class="dropdown <?php if(basename($_SERVER['SCRIPT_NAME']) == 'study-opportunity.php' || basename($_SERVER['SCRIPT_NAME']) == 'universitetet-me-konkurim.php' || basename($_SERVER['SCRIPT_NAME']) == 'private-university.php' || basename($_SERVER['SCRIPT_NAME']) == 'studime-jashte-vendit.php' || basename($_SERVER['SCRIPT_NAME']) == 'bursa.php'){echo 'active'; }else { echo ''; } ?>">
Study Opportunity<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'universitetet-me-konkurim.php'){echo 'active'; }else { echo ''; } ?>">Universitetet me Konkurim</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'private-university.php'){echo 'active'; }else { echo ''; } ?>">Private University</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'studime-jashte-vendit.php'){echo 'active'; }else { echo ''; } ?>">Studime Jashte Vendit</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'bursa.php'){echo 'active'; }else { echo ''; } ?>">Bursa Studimi</li>
</ul>
</li>
I have created a navigation menu that loads different "includes" on the same page. I want the menu buttons to stay highlighted for the current page. All the answer I have seen here only deal with navigating to a different page for each link. Is is possible to do it on the same page? Because the navigation bar doesn't actually reload.
<nav class="menu">
<ul>
<li class="menuitem"><a href="?link=1" name="fluidBalance" <?php echo ($_GET['link'] == 1) ? 'class="highlight"' : ''; ?>>Calculated Fluid Balance</a></li>
<li class="menuitem"><a href="?link=2" name="actualFluidBalance" <?php echo ($_GET['link'] == 2) ? 'class="highlight"' : '';?>>Actual Fluid Balance</a></li>
<li class="menuitem"><a href="?link=3" name="graphicalView" <?php echo ($_GET['link'] == 3) ? 'class="highlight"' : ''; ?>>Graphical View</a></li>
</ul>
</nav>
<div class="contentFluidBalance" id="mainSection">
<?php
if(isset($_GET['link'])){
$link=$_GET['link'];
if ($link == '1'){
include 'includes/fluidBalance1.php';
}
if ($link == '2'){
include 'includes/fluidBalance2.php';
}
if ($link == '3'){
include 'includes/fluidBalance5.php';
}
}
?>
You can try this :
<nav class="menu">
<ul>
<li class="menuitem"><a href="?link=1" name="fluidBalance" <?php echo ($_GET['link'] == 1) ? 'class="highlight"' : ''; ?>>Calculated Fluid Balance</a></li>
<li class="menuitem"><a href="?link=2" name="actualFluidBalance" <?php echo ($_GET['link'] == 2) ? 'class="highlight"' : '';?>>Actual Fluid Balance</a></li>
<li class="menuitem"><a href="?link=3" name="graphicalView" <?php echo ($_GET['link'] == 3) ? 'class="highlight"' : ''; ?>>Graphical View</a></li>
</ul>
</nav>
where class="highlight" is the name of the class to highlight the menu.
In the end The following code worked for me:
<nav class="menu">
<ul>
<li<?php if (isset($_GET['link']) && $_GET['link'] == '1') echo 'class="current"'?>>Calculated Fluid Balance</li>
<li<?php if (isset($_GET['link']) && $_GET['link'] == '2') echo ' class="current"'?>>Actual Fluid Balance</li>
<li<?php if (isset($_GET['link']) && $_GET['link'] == '3') echo ' class="current"'?>>Graphical View</li>
</ul>
</nav>
<div class="contentFluidBalance" id="mainSection">
<?php
if(isset($_GET['link'])) {
$link=$_GET['link'];
if ($link == '1'){
include 'includes/fluidBalance1.php';
}
if ($link == '2'){
include 'includes/fluidBalance2.php';
}
if ($link == '3'){
include 'includes/fluidBalance5.php';
}
}
?>
</div>
First, check if the current page is equal to one of your menuitem :
<nav class="menu">
<ul>
<li class="menuitem <?php if (isset($_GET['link']) && $_GET['link'] == '1') : ?>current<?php endif; ?>">Calculated Fluid Balance</li>
<li class="menuitem <?php if (isset($_GET['link']) && $_GET['link'] == '2') : ?>current<?php endif; ?>">Actual Fluid Balance</li>
<li class="menuitem <?php if (isset($_GET['link']) && $_GET['link'] == '3') : ?>current<?php endif; ?>">Graphical View</li>
</ul>
</nav>
<div class="contentFluidBalance" id="mainSection">
<?php
if(isset($_GET['link'])) {
$link=$_GET['link'];
if ($link == '1'){
include 'includes/fluidBalance1.php';
}
if ($link == '2'){
include 'includes/fluidBalance2.php';
}
if ($link == '3'){
include 'includes/fluidBalance3.php';
}
}
?>
</div>
Then, in your CSS, do whatever you want with the current class :
.menuitem.current a {
color:red;
}
I have four php pages, homepage.inc.php, about.inc.php, contact.inc.php and heres my index.php
<div id="menu">
<nav>
<a id="home" target="_self" href="index.php">Home</a>
<a id="about" target="_self" href="index.php?p=about">About us</a>
<a id="contact" target="_self" href="index.php?p=contact">Contact</a>
</nav>
</div>
<div id="content">
<?php
$pages_dir = 'pages';
if (!empty($_GET['p'])) {
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages[1]);
$p=$_GET['p'];
if(in_array($p.'.inc.php', $pages)){
include($pages_dir.'/'.$p.'.inc.php');
}else {
echo 'Sorry, page not found.';
}
}else{
include($pages_dir.'/home.inc.php');
}
?>
</div>
this is my css active{background:gray;}
I want to add an active class on my menu. How?
You can do something like this:
<a id="contact" target="_self" href="index.php?p=contact" <?php if ($_GET['p'] == "contact") {
echo 'class="active"';
} ?> >Contact</a>
Or using short hand PHP (making the code look cleaner)
<a id="contact" target="_self" href="index.php?p=contact"<? (($_GET['p']=="contact") ? 'class="active"' : '') ?>>Contact</a>
Or you can use some JavaScript with JQuery:
<script>
$('#<?php echo $_GET['p'] ?>').addClass('active');
</script>
change your code as shown below
">Home
">About us
">Contact
<?php
$homeCls = '';
$aboutCls = '';
$contactCls= '';
$pages_dir = 'pages';
if (!empty($_GET['p'])) {
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages[1]);
$p=$_GET['p'];
if($p == '') {
$homeCls = 'active';
} else if($p == 'about'){
$aboutCls = 'active';
} else if($p == 'contact'){
$contactCls= 'active';
}
if(in_array($p.'.inc.php', $pages)){
include($pages_dir.'/'.$p.'.inc.php');
}else {
echo 'Sorry, page not found.';
}
}else{
include($pages_dir.'/home.inc.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">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>