I'm trying to style the active link with is_page() function. And it works for the first nav item. But when I click the "om" link it will get styling, but the styling for "hem" remains. But when I click the "blogg" and "tutorial" links none of the links gets any styling.
This is the code that I have in header.php.
<nav>
<button class="menuButton">Meny</button>
<div class="menu">
x
<ul>
<h2>Meny</h2>
<li class="<?php if (is_page("")) { echo "active-page"; } ?>">Hem</li>
<li class="<?php if (is_page("/om")) { echo "active-page"; } ?>">Om</li>
<li class="<?php if (is_page("/blogg")) { echo "active-page"; } ?>">Blogg arkiv</li>
<li class="<?php if (is_page("/tutorial")) { echo "active-page"; } ?>">Tutorials arkiv</li>
</ul>
</div>
</nav>
Is this the wrong way to use the is_page()function? I'm a little lost here. The styling that gets applied is just a simple text-decoration: underline; CSS style.
Try this
<nav>
<button class="menuButton">Meny</button>
<div class="menu">
x
<ul>
<h2>Meny</h2>
<li class="<?php if (is_page("")) { echo "active-page"; } ?>">Hem</li>
<li class="<?php if (is_page("om")) { echo "active-page"; } ?>">Om</li>
<li class="<?php if (is_page("blogg")) { echo "active-page"; } ?>">Blogg arkiv</li>
<li class="<?php if (is_page("tutorial")) { echo "active-page"; } ?>">Tutorials arkiv</li>
</ul>
</div>
</nav>
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.
I have PHP code which will check if the user is logged in and will return the menu if they are, however I was wondering if there was a way to make each of the current selected highlighted or would I have to go through and add them as a manual list to each page?
The code is:
<?php
if (!securePage($_SERVER['PHP_SELF'])){die();}
//Links for logged in user
if(isUserLoggedIn()) {
echo "<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>
<div id='button1'>
<a href='/Demos.php'>Demos</a></div>
<div id='button2'>
<a href='/Helpfiles.php'>Helpfiles</a></div>
<div id='greeting'>
Hello, $loggedInUser->displayname.</br>";
}
//Links for users not logged in
else{
echo "<div id='Default'>
<ul>
<li><a href='/login.php'>Login</a></li>
<li><a href='/register.php'>Register</a></li>
<li><a href='/forgot-password.php'>Forgot Password</a></li>";
echo "</ul></div>";
}
?>
Now I know that on a normal CSS one it would just be .current and you can do it that way, however I cannot make that work with this echo because they are all on the screen at the same time. What would be the best way? Manually add would see like the longer way.
p.s. this is used in conjunction with usercake
You don't need to put HTML into an echo in PHP. I would recommend something like this.
So you will end up with something like:
<?php
if(isUserLoggedIn()) {
?>
<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul>
</div>
<div id='greeting'>
Hello, <?php echo $loggedInUser->displayname; ?>
</br>
<?php } ?>
Then I would not recommend you to add the class with PHP because you will suffer from lisibility with a lots of if and else cases.
The best way to do this would be to use ID/Classes for your LIs and add the selected class to a specitic item with a simple JavaScript function.
Btw, if you really feel the needs to have this in PHP I recommend you to read this:
http://www.catswhocode.com/blog/snippets/highlight-current-menu-item-in-php
http://webdeveloperswall.com/php/how-to-highlight-the-current-page-in-menu-in-php
So you will have something like:
<?php if(isUserLoggedIn()) { ?>
<ul>
<?php
$url = $_SERVER['REQUEST_URI'];
$parts = parse_url($url);
$page_name = basename($parts['path']);
?>
<li><a class="<?php echo ($page_name=='acount.php')?'selected':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='user_settings.php')?'selected':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='logout.php')?'selected':'';?>" href="contact.php">CONTACT US</a></li>
</ul>
<?php } ?>
EDIT
Finally, you should end up with something like this: http://pastebin.com/V8jxwi7T
You could grab the page you are currently browsing and see if it matches. Something like this perhaps? (sorry for the crude example)
<?php
// will return 'home' is the filename is home.php
$filename = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);
?>
<li <?php if ($filename == "home") { echo "class='active'"; } ?>>
Home
</li>
Some info on pathinfo and how it works here
Just add class to selected <li> element, this way:
echo "<div id='Default'>
<ul>
<li><a href='/account.php' >Account Home</a></li>
<li class="selected"><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>";
In your CSS, put appropriate style for .selected class.
You should have a variable telling in which page you are, let's say it's $currentpage.
echo "<div id='Default'>
<ul>
<li".($currentpage=='account' ? ' class="selected"' : '')."><a href='/account.php' >Account Home</a></li>
<li".($currentpage=='usersettings' ? ' class="selected"' : '')."><a href='/user_settings.php' >User Settings</a></li>
<li><a href='/logout.php' >Logout</a></li>
</ul></div>";
I know this question comes across a lot, but I just can't figure out how to do this using the, already answered posts.
I have a header with navigation links. I would like to add class="active" to the link that's active at the moment.
How could I do this if I have the following navigation?
<nav>
<ul id="main_nav">
<li class="home">
<a href="search">
<i class="icon-search"></i>
<span>BEDRIJF ZOEKEN</span>
</a>
</li>
<li class="categorie">
<a href="categorieen/all">
<i class="icon-list-ul"></i>
<span>CATEGORIE</span>
</a>
</li>
<li class="aanbieding">
<a href="aanbiedingen">
<i class="icon-shopping-cart"></i>
<span>AANBIEDING</span>
</a>
</li>
<li class="vacature">
<a href="vacatures">
<i class="icon-copy"></i>
<span>VACATURE</span>
</a>
</li>
<li class="agenda">
<a href="agenda">
<i class="icon-calendar"></i>
<span>AGENDA</span>
</a>
</li>
<li class="contact">
<a href="contact">
<i class="icon-envelope"></i>
<span>CONTACT</span>
</a>
</li>
</ul>
</nav>
I tried this, but it did not work:
<script>
$(function() {
var href = $(this).find('a').attr('href');
alert(window.location.pathname)
if (href === window.location.pathname) {
$(this).addClass('active');
}
});
</script>
Maybe there's a better Codeigniter-ish way?
try this one.i think no need of javascript or jquery.
If you are using codeigniter then you can use URI Class.
<li class="home">
<a class="<?php if($this->uri->segment(1)=="search"){echo "active";}?>" href="<?=base_url('search')?>">
<i class="icon-search"></i>
<span>BEDRIJF ZOEKEN</span>
</a>
</li>
please let me know if you face any problem
I created a helper and saved it into the helper directory named as "menu_helper.php":
<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
if(!function_exists('active_link')) {
function activate_menu($controller) {
// Getting the class instance.
$ci = get_instance();
// Getting the router class to actived it.
$class = $ci->router->fetch_class();
return ($class == $controller) ? 'active' : '';
}
}
Then in config/autoload.php, I added "menu" as a helper on line 91.
The last step is to put the code for print the "active" class when accessing the page (i.e. Login Page):
<li class="<?php echo activate_menu('login'); ?>">
<?php echo anchor('login', 'Login'); ?>
</li>
if (href === window.location.pathname) {
$('a[href='+ href +']').addClass('active');
}
Try this one:
<a class="<?=(current_url()==base_url('search')) ? 'active':''?>" href="<?=base_url('search')?>">
I want to put my html navigation in a separate php file so when I need to edit it, I only have to edit it once. The problem starts when I want to add the class active to the active page.
I've got three pages and one common file.
common.php :
<?php
$nav = <<<EOD
<div id="nav">
<ul>
<li><a <? if($page == 'one'): ?> class="active"<? endif ?> href="index.php">Tab1</a>/</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
EOD;
?>
index.php :
All three pages are identical except their $page is different on each page.
<?php
$page = 'one';
require_once('common.php');
?>
<html>
<head></head>
<body>
<?php echo $nav; ?>
</body>
</html>
This simply won't work unless I put my nav on each page, but then the whole purpose of separating the nav from all pages is ruined.
Is what I want to accomplish even possible? What am I doing wrong?
Thanks
EDIT: When doing this, the php code inside the li don't seem to run, it's just being printed as if it was html
why don't you do it like this:
in the pages:
<html>
<head></head>
<body>
<?php $page = 'one'; include('navigation.php'); ?>
</body>
</html>
in the navigation.php
<div id="nav">
<ul>
<li>
<a <?php echo ($page == 'one') ? "class='active'" : ""; ?>
href="index1.php">Tab1</a>/</li>
<li>
<a <?php echo ($page == 'two') ? "class='active'" : ""; ?>
href="index2.php">Tab2</a>/</li>
<li>
<a <?php echo ($page == 'three') ? "class='active'" : ""; ?>
href="index3.php">Tab3</a>/</li>
</ul>
</div>
You will actually be able to control where in the page you are putting the navigation and what parameters you are passing to it.
Later edit: fixed syntax error.
A very easy solution to this problem is to do this.
<ul>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>">Home</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'portfolio.php'){echo 'current'; }else { echo ''; } ?>">Portfolio</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'services.php'){echo 'current'; }else { echo ''; } ?>">Services</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){echo 'current'; }else { echo ''; } ?>">Contact</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'links.php'){echo 'current'; }else { echo ''; } ?>">Links</li>
</ul>
Which will output
<ul>
<li class="current">Home</li>
<li class="">Portfolio</li>
<li class="">Services</li>
<li class="">Contact</li>
<li class="">Links</li>
</ul>
Your index.php code is correct. I am including the updated code for common.php below then I will explain the differences.
<?php
$class = ($page == 'one') ? 'class="active"' : '';
$nav = <<<EOD
<div id="nav">
<ul>
<li><a $class href="index.php">Tab1</a>/</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
EOD;
?>
The first issue is that you need to make sure that the end declaration for your heredoc -- EOD; -- is not indented at all. If it is indented, then you will get errors.
As for your issue with the PHP code not running within the heredoc statement, that is because you are looking at it wrong. Using a heredoc statement is not the same as closing the PHP tags. As such, you do not need to try reopening them. That will do nothing for you. The way the heredoc syntax works is that everything between the opening and closing is displayed exactly as written with the exception of variables. Those are replaced with the associated value. I removed your logic from the heredoc and used a tertiary function to determine the class to make this easier to see (though I don't believe any logical statements will work within the heredoc anyway)
To understand the heredoc syntax, it is the same as including it within double quotes ("), but without the need for escaping. So your code could also be written like this:
<?php
$class = ($page == 'one') ? 'class="active"' : '';
$nav = "<div id=\"nav\">
<ul>
<li><a $class href=\"index.php\">Tab1</a>/</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>";
?>
It will do exactly the same thing, just is written somewhat differently. Another difference between heredoc and the string is that you can escape out of the string in the middle where you can't in the heredoc. Using this logic, you can produce the following code:
<?php
$nav = "<div id=\"nav\">
<ul>
<li><a ".(($page == 'one') ? 'class="active"' : '')." href=\"index.php\">Tab1</a>/</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>";
?>
Then you can include the logic directly in the string like you originally intended.
Whichever method you choose makes very little (if any) difference in the performance of the script. It mostly boils down to preference. Either way, you need to make sure you understand how each works.
I think you need to put your $page = 'one'; above the require_once.. otherwise I don't understand the question.
Why don't you create a function or class for this navigation and put there active page as a parameter? This way you'd call it as, for example:
$navigation = new Navigation( 1 );
or
$navigation = navigation( 1 );
I know this is old, but none of these answers are very good (sry ppl)
The BEST way to do it (without writing out convoluted classes) is to compare the current $_SERVER['REQUEST_URI'] to the href of the link. You're almost there.
Try this. (Taken from http://ma.tt/scripts/intellimenu/)
$nav = <<<EOD
<div id="nav">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
EOD;
$lines = explode("\n", $nav);
foreach($lines as $line)
{
if(preg_match('/href="([^"]+)"/', $line, $url)) {
if(substr($_SERVER['REQUEST_URI'], 0, 5) == substr($url[1], 0, 5)) {
$line = str_replace('><a', ' class="current-menu-item"><a', $line);
}
}
echo $line . "\n";
}
$page='one' should occur before you require_once() not after. After is too late- the code has already been required, and $nav has already been defined.
You should use include('header.php'); and include('footer.php'); instead of setting a $nav variable early on. That increases flexibility.
Make more functions. Something like this really makes things easier to follow:
function maybe($x,$y){return $x?$y:'';}
function aclass($k){return " class=\"$k\" "; }
then you can write your "condition" like this:
<a href="..." <?= maybe($page=='one',aclass('active')) ?>> ....
You could use this PHP, hope it helps.
<?php if(basename($_SERVER['PHP_SELF'], '.php') == 'home' ) { ?> class="active" <?php } else { ?> <?php }?>
So a list would be like the below.
<ul>
<li <?php if( basename($_SERVER['PHP_SELF'], '.php') == 'home' ) { ?> class="active" <?php } else { ?> <?php }?>><i class="fa fa-dashboard"></i> <span>Home</span></li>
<li <?php if( basename($_SERVER['PHP_SELF'], '.php') == 'listings' ) { ?> class="active" <?php } else { ?> <?php }?>><i class="fa fa-th-list"></i> <span>Other</span></li>
</ul>
CALL common.php
<style>
.ddsmoothmenu ul li{float: left; padding: 0 20px;}
.ddsmoothmenu ul li a{display: block;
padding: 40px 15px 20px 15px;
color: #4b4b4b;
font-size: 13px;
font-family: 'Open Sans', Arial, sans-serif;
text-align: right;
text-transform: uppercase;
margin-left: 1px; color: #fff; background: #000;}
.current .test{ background: #2767A3; color: #fff;}
</style>
<div class="span8 ddsmoothmenu">
<!-- // Dropdown Menu // -->
<ul id="dropdown-menu" class="fixed">
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>">Home <i>::</i> <span>welcome</span></li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'about.php'){echo 'current'; }else { echo ''; } ?>">About us <i>::</i> <span>Who we are</span></li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'course.php'){echo 'current'; }else { echo ''; } ?>">Our Courses <i>::</i> <span>What we do</span></li>
</ul><!-- end #dropdown-menu -->
</div><!-- end .span8 -->
add each page
<?php include('common.php'); ?>
<ul>
<li><a <?php echo ($page == "yourfilename") ? "class='active'" : ""; ?> href="user.php" ><span>Article</span></a></li>
<li><a <?php echo ($page == "yourfilename") ? "class='active'" : ""; ?> href="newarticle.php"><span>New Articles</span></a></li>
</ul>
The solution i'm using is as follows and allows you to set the active class per php page.
Give each of your menu items a unique class, i use .nav-x (nav-about, here).
<li class="nav-item nav-about">
<a class="nav-link" href="about.php">About</a>
</li>
At the top of each page (about.php here):
<!-- Navbar Active Class -->
<?php $activeClass = '.nav-about > a'; ?>
Elsewhere (header.php / index.php):
<style>
<?php echo $activeClass; ?> {
color: #fff !important;
}
</style>
Simply change the .nav-about > a per page, .nav-forum > a, for example.
If you want different styling (colors etc) for each nav item, just attach the inline styling to that page instead of the index / header page.
seperate your page from nav bar.
pageOne.php:
$page="one";
include("navigation.php");
navigation.php
if($page=="one"){$oneIsActive = 'class="active"';}else{ $oneIsActive=""; }
if($page=="two"){$twoIsActive = 'class="active"';}else{ $twoIsActive=""; }
if($page=="three"){$threeIsActive = 'class="active"';}else{ $threeIsActive=""; }
<ul class="nav">
<li <?php echo $oneIsActive; ?>>One</li>
<li <?php echo $twoIsActive; ?>><a href="#">Page 2</li>
<li <?php echo $threeIsActive; ?>><a href="#">Page 3</li>
</ul>
I found that I could also set the title of my pages with this method as well.
$page="one";
$title="This is page one."
include("navigation.php");
and just grab the $title var and put it in between the "title" tags. Though I am sending it to my header page above my nav bar.
<a href="store/index" <?php if($_SERVER['REQUEST_URI'] == '/store/index') { ?>class="active"<?php } ?> > Link </a>
<a href="account/referral" <?php if($_SERVER['REQUEST_URI'] == '/account/referral') { ?>class="active"<?php } ?> > Link </a>
PHP code
<?php
function activeClass($chkStr){
// echo "testing data";
// echo strlen($_SERVER['REQUEST_URI']);
if($chkStr=="home" && strlen($_SERVER['REQUEST_URI'])<3){
return "active";
}
if (stripos($_SERVER['REQUEST_URI'], $chkStr)!==false){
return "active";
}
else{
return "";
}
}
?>
HTML CODE :
<ul class="navbar-nav">
<li class="nav-item <?php echo activeClass("home"); ?>">
<a class="nav-link txt" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item <?php echo activeClass("about-us.php"); ?>">
<a class="nav-link txt" href="about-us.php">About Us</a>
</li>
<li class="nav-item <?php echo activeClass("services.php"); ?>">
<a class="nav-link txt" href="services.php">Services</a>
</li>
<li class="nav-item <?php echo activeClass("our-team.php"); ?>">
<a class="nav-link txt" href="our-team.php">Our team</a>
</li>
<li class="nav-item <?php echo activeClass("media-awards.php"); ?>">
<a class="nav-link txt" href="media-awards.php">Media & Awards</a>
</li>
<li class="nav-item <?php echo activeClass("blog.php"); ?>">
<a class="nav-link txt" href="blog.php">Blog</a>
</li>
<li class="nav-item <?php echo activeClass("contact-us.php"); ?>">
<a class="nav-link txt" href="contact-us.php">Contact Us</a>
</li>
</ul>