i am trying to highlight the page i am in this is what i have so far
<ul class="navigation list-unstyled components">
<li class="active">
Home
</li>
<li>
Contacts
</li>
<li>
aboutus
</li>
<li>
aboutyou
</li>
</ul>
Here is the only jquery I have tried so far, but it doesn't seem to work:
$(".navigation a").on("click", function () {
$(".navigation ").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
If you're building a standard WordPress website, then your pages will reload when you click a navigation link, so even if you set the class with jQuery it will be reset on page load.
What you should do is to set the class of the navigation elements in PHP.
This code is just a mockup, please adjust it to fit your needs:
$home = is_front_page();
# Checks if it's the site front page
$contacts = is_page('contacts');
# Checks if the current page is a page called 'contacts'
$aboutus = is_page('aboutus');
# Checks if the current page is a page called 'aboutus'
$aboutyou = is_page('aboutyou');
# Checks if the current page is a page called 'aboutyou'
<ul class="navigation list-unstyled components">
<li <?php if ($home) {echo 'class="active"';} ?>>
Home
</li>
<li <?php if ($contacts) {echo 'class="active"';} ?>>
Contacts
</li>
<li <?php if ($aboutus) {echo 'class="active"';} ?>>
aboutus
</li>
<li <?php if ($aboutyou) {echo 'class="active"';} ?>>
aboutyou
</li>
</ul>
Related
I'm trying to make an active navigation bar using PHP where the current page will be highlighted or colored in the navigation bar. The code I used:
<ul class="topmenu">
<li <?php if($_GET['page']="home") { ?> class="active" <?php } ?>>
<b>Bienvenue</b>
</li>
<li <?php if($_GET['page']="livres") { ?> class="active" <?php } ?>>
<b>Livres</b>
</li>
<li <?php if($_GET['page']="bibliotheque") { ?> class="active" <?php } ?>>
<b>Bibliothèque</b>
</li>
<li <?php if($_GET['page']="universite") { ?> class="active" <?php } ?>>
<b>L'université</b>
</li>
<li <?php if($_GET['page']="contact") { ?> class="active" <?php } ?>>
<b>Contact</b>
</li>
</ul>
The code will put the attribut in the class active if the page is the current page in the navigation bar. However, all the attributs will be given the class active in this case. How do I fix this?
P.S: I am not looking for any JS or jQuery alternatives, I'm trying to make this work with PHP only.
You could use $_SERVER['SCRIPT_NAME'].
<ul class="topmenu">
<li <?php if($_SERVER['SCRIPT_NAME']=="/home.php") { ?> class="active" <?php } ?>><b>Bienvenue</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/livres.php") { ?> class="active" <?php } ?>><b>Livres</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/bibliotheque.php") { ?> class="active" <?php } ?>><b>Bibliothèque</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/universite.php") { ?> class="active" <?php } ?>><b>L'université</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/contact.php") { ?> class="active" <?php } ?>><b>Contact</b></li>
</ul>
I don't use PHP, but give the current page the active tag, and change it per file. Then a single class definition in the CSS handles changing the color for each page.
HTML:
<nav>
<a class="active" href="/home/">Home</a>
Calendar
Community
</nav>
CSS:
.active {
background-color: #4CAF50;
}
Declare page variables at the very top of each individual page.
Example: <? $page="home";?>
For each list item in your nav bar add if statment with corresponding variable and active class.
Example: <li class="<?if($page=="home"){?>active<?}?>"><b>Bienvenue</b></li>
What this does is assign each page a variable. The variable is compared in the if statements in the nav bar to determine which li gets the active class.
I'm using bootstrap 4 class. I've achieved Active Class selection something like this.
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile1.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile1.php">Home
</a>
</li>
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile2.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile2.php">Home
</a>
</li>
Repeat this logic for further li tags. Hope this helps someone else.
The code work correctly if you use "==" instead of "=" in The if construct
Еxample:
if($_GET['page'] **==** "home")...
Instead:
if($_GET['page'] **=** "home")...
Hope this helps someone else...
I'm creating a website..When it comes to the navigation menu, I listed it and need the nav bar class to be active when that menu is clicked. It's fine to give class="active" for the list tag. But I need it to be active only when clicked. How can I achieve this .?
My list is :
<div class="menu">
<ul class="nav" id="nav">
<li class="active">
<?php echo anchor("cntrl/index","Home"); ?>
</li>
<li><?php echo $this->session->userdata('user_name'); ?></li>
<li>About</li>
<li>
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
<li>
<?php echo anchor('cntrl/logout','Logout'); ?>
</li>
<div class="clearfix"></div>
</ul>
<script type="text/javascript" src="<?php echo base_url(); ?>/js/responsive-nav.js"></script>
</div>
Well, I handle this sort of issue as follows:
set the active link (which is resided in the url when the link is clicked) into an variable in the controller function which is called by the link
$data['active_link'] = 'home'; # for example
check it in the view file (JS):
$(document).ready(function(){
var active_link = "<?php echo $active_link;?>";
$("li").removeClass('active');
$("#"+active_link).addClass('active');
});
Use the following code.
<li class="<?php echo (endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')? 'active':''); ?>">
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
Main part of this code is
endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')
Where $_SERVER['REQUEST_URI'] is your current URL. and 'cntrl/jobs' is your menu which is being checked with current URL.
Is there an easier more efficient way to hide/show menu items to logged in, logged out users? It seems like I should not have to copy the whole menu again with duplicate menu items. The menu items maybe in different order like below
You can see in my example below I have added to links in the <?php } else { ?> statement
<?php
if($_SESSION["loggedIn"] == "yes") {
?>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Stores</li>
<li>Coupons</li>
<li>Featured Offers</li>
<li>How It Works</li>
<li>Help</li>
</ul>
<?php } else { ?>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Stores</li>
<li>Coupons</li>
<li>My Account</li>//logged in item
<li>Featured Offers</li>
<li>How It Works</li>
<li>Help</li>
<li>My Favorite Stores</li>//logged in item
</ul>
<?php
}
?>
Updated for new ordering of items:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Stores</li>
<li>Coupons</li>
<?php
if($_SESSION["loggedIn"] == "yes") {
echo '<li>My Account</li>';
}
?><li>Featured Offers</li>
<li>How It Works</li>
<li>Help</li>
<?php
if($_SESSION["loggedIn"] == "yes") {
echo '<li>My Favorite Stores</li>';
}
?>
</ul>
Rather than cluttering up the code, you can place the html into multiple PHP files that are loaded in dependant on the logged in user...
switch($_SESSION['userLevel']) {
case "guest": //Not logged in
require_once('guestnav.php');
break;
case "user": //regular user
require_once('usernav.php');
break;
case "admin": //admin nav
require_once('adminnav.php');
break;
//etc and default nav below
}
then in the nav php files just put the HTML with no PHP and it will be loaded in when the proper criteria is met. makes managing multiple navigation menu's easy.
heres how my html is
<ul class="navigation">
<li>Home</li>
<li>About us</li>
</ul>
as you can see the content of "about us" page is loaded in to index.php.
now i want to change active page link on nav bar different style.
please do help me. i hope this question is clear.
to add a class to a particular item based on selection;
<ul class="navigation">
<li <?php if(!isset($_GET['content'])) { echo 'class="active"'; } ?>>Home</li>
<li <?php if(isset($_GET['content']) && $_GET['content']=='about') { echo 'class="active"'; } ?>>About us</li>
</ul>
I need the "Pages" link to be able to detect if the user is on any of the pages that are included in the dropdown menu for "Pages". Detecting whether they are on only 1 page is easy, I need to add multiple instances to the "Pages" item. Hopefully that makes a little more sense.
Here is what I have:
<li class='dropdown' id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Pages</a>
<ul class="dropdown-menu">
<li>
Home
</li>
<li>
About
</li>
</ul>
</li>
A example of what the code would look like for JUST index.php would be:
<li <?php if (stripos($_SERVER['REQUEST_URI'],'index.php') !== false) {echo 'class="active"';} ?>>
Home
</li>
Like I said before, I need to add multiple instances in basically one PHP block to detect MORE THAN if the user is JUST ON [filename].php
Hopefully this makes sense.
First you need to extract just the page name, then you need to compare it to the array of posible pages:
<?php if (in_array(preg_replace('|.*/(.+\.php).*|i','\\1',$_SERVER['REQUEST_URI']), array('index.php','about.php'))) {echo 'class="active"';}
You'll have to put your list items in an array. And then loop over them to create the menu.
$pages = array(
'Home' => 'home.php',
'About' => 'about.php'
);
<?php foreach ($pages as $name => $url): ?>
<li <?php if (stripos($_SERVER['REQUEST_URI'], $url) !== false):
echo 'class="active"';
endif ?>>
<?php echo $name?>
</li>
<?php endforeach ?>
This will check each result in the array to see if it matches the uri. If it does it will add the active class to the li.