I am using php includes to limit redundancy on my pages, how can I have my navigation have the current page selected with say a certain color for the HOME button when my navigation is called from a header.php file.
If i were to say to add a "active" class to the home.php item and add a style so it looked different, that would happen across the board for all my pages, which is why I am using includes in the first place, how can I have one header.php file with my navigation, that also allows each page the ability to show the current page you are on reflected in the navigation?
This is the nav portion of the header.php file
<ul>
<li>About Us</li>
<li>Portfolio</li>
<li>News</li>
<li>Contact</li>
</ul>
This is the index.php file that the header.php file is included in
<?php
include("includes/header.php");
?>
<div class="span-8" id="welcome">
<p>Lorem ipsum</p>
</div>
<div class="span-16 last" id="slideshow">
<img src="images/introImage1.png" alt="fountain">
<img src="images/introImage2.png" alt="bench">
<img src="images/introImage3.png" alt="bridge">
</div>
<?php
include("includes/footer.php");
?>
Try this:
<ul>
<?php
$pages = array('index.php' => 'About Us', 'portfolio.php' => 'Portfolio', 'news.php' => 'News', 'contact.php' => 'Contact');
foreach($pages as $url => $title) {
$li = '<li ';
if($_SERVER[ 'PHP_SELF' ] == $url) {
$li .= 'class="active"';
}
$li .= '>' . $title . '</li>';
echo $li;
}
?>
</ul>
Another option would be to set an attribute against the body tag, and then use a matched pair to change the styling of any number of elements.
So, on your main (home) page, you may have:
<body id="home">
Home
About Us
Then, within your CSS have:
body#home a.home , body#about a.about {
color:#999;background-color:#000; }
And, yet another option would be to include a single CSS statement inside the actual page.
<style type="text/css">
a[href="<?php echo basename( $_SERVER['PHP_SELF'] ); ?>"] ,
a[href="<?php echo $_SERVER['PHP_SELF']; ?>"] {
/* Styles for Current Page Links */ }
</style>
Of course, that is dependent on the browser being able to use that CSS Selector.
And, if you want to be completely sure that all links to the file are covered (including full URIs), then also include the following selector:
a[href="http<?php
echo ( $_SERVER['HTTPS'] ? 's' : '' ).'://'.
$_SERVER['HTTP_HOST'].(
( $_SERVER['HTTPS'] && $_SERVER['SERVER_PORT']!=443 )
|| ( !$_SERVER['HTTPS'] && $_SERVER['SERVER_PORT']!=80 ) ?
':'.$_SERVER['SERVER_PORT'] : '' ).
$_SERVER['PHP_SELF']; ?>"]
UPDATED: Corrected PHP Variables to use.
Related
I'm trying to figure out how to add a css class to a <li> tag in my menu navigation. I'm using a template that gets included on every page of site. In the template is the menu navigation code. I need to set the css class on the <li> for the corresponding active page using PHP_SELF I presume?
Navigation looks like this
And this is what it should look like when the page is displayed that corresponds to the page that was clicked in the navigation menu.
Here is the navigation menu code
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li>Home</li>
<li <?php echo $class_current; ?>>Technician</li>
<li <?php echo $class_current; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
Here is the PHP function I am trying to create
function classCurrent(){
if(dirname($_SERVER['PHP_SELF']) == true) {
echo ' class="current"';
}
else {
echo '';
}
$current = classCurrent();
return $current;
}
I know this is possible, I just can't figure it all out yet.
You may try specifying some base class that has variables for the corresponding menus. So like if you are requesting the technician page:
Class Activmenu {
public $technician = true;}
alternatively you may use superglobal variables but this is safer. And in the menu you can check for the true item
if(Activemenu->technician)? echo'class="activeclass"' : 0;
Checking urls you will run into problems, if later on you have to modify your url structure.
So it is really simple actually to do this. All that needs to be done is have a variable set on the active page above the <html> tag preferably.
Example:
<?php $currentPage = 'technician';
<html>
So now we have this variable set on the technician page above the html tag. Now to call it in the template page on the navigation menu <li> all that needs to be done is the following.
<?php if ($currentPage=="technician") echo " class=\"current\""; ?>
Now just need to repeat this step for each page of the website.
This was also answered here PHP navigation menu
and a real good tutorial on how to do it is here http://alistapart.com/article/keepingcurrent
As a result the navigation code will end up looking something like this
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li<?php if ($currentPage=="home") echo " class=\"current\""; ?>>Home</li>
<li<?php if ($currentPage=="technician") echo " class=\"current\""; ?>>Technician</li>
<li<?php if ($currentPage=="programming") echo " class=\"current\""; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all pages, I cannot hardcode my active menu state for each page.
How can I dynamically set the activate state to work for each page?
Here is my current nav code:
<nav id="main-menu" class="padbot">
<ul id="ce">
<li class="cemenu">About</li>
<li class="cemenu">Consulting</li>
<li class="cemenu">Intelligence</li>
<li class="cemenu">Academy</li>
<li class="cemenu">Blog</li>
<li class="cemenu">Contact</li>
</ul>
I've already setup a CSS class called "active" that has my active state properties. Ideally, what I'm looking for is when your on the "About" page (or any of the other pages), the class I created for the active state will be appended to the current li classes's.
Example:
<li class="cemenu active">About</li>
Thanks!
you could try something along the lines of
<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>">About</li>
You can do this way:
This will add the active class to the <a> which contains the page from the url.
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.cemenu a[href*="'+page+'"]').addClass('active');
});
and if you want to add class to its parent li the replace the last line to this and css class should be like this:
.active a{
css
properties
for active li's a
}
// using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active');
or
// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');
just tryout the fiddle here
First, there is a css pseudo class prepared for styling 'active' links :
a:active {css}
For your situation, you would have to add this class to your styling :
.active a, a:active {css}
But your needs seems more on the PHP side than the CSS, perhaps someone else will help you with that part. There would be a javascript solution with jQuery, finding the actual location then inject a css selector to the proper element.
Check this article and this other one about wordpress. It will help you.
Stack Overflow references :
How do I target each menu different items on active state in Wordpress
How to add Active states and icons in wordpress wp_nav_menu()
Loosing Nav Active State in Wordpress Dynamic Menu
google search
try something like this:
<?php $pages = array('about' => 'About Us', 'blog' => 'blog') ?>
<ul>
<?php foreach($pages as $url => $page): ?>
<?php $isActive = $_SERVER["REQUEST_URI"] == $url ?>
<li<?php echo $isActive ? ' class="active"' : '' ?>>
<?php echo $page ?>
</li>
<?php endforeach ?>
</ul>
It may be worth looking into using wordpres functions such as get_page_link which would be nicer than using the Server super global as that's not nice. This would also fail if you have wordpress in a folder and not the document root, it's just a simple example to get you started :)
You can try like this
<li class="<?php
if($this_page=='Home'){
echo 'active';
}
?>">
Home
</li>
<li class="<?php
if($this_page=='Contact'){
echo 'active';
}
?>">
Contact
</li>
And then in your home page
$this_page='Home';
And in your contact page
$this_page='Contact';
You could use preg_replace() to add class="active" like this:
ob_start();
echo '<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>';
$output = ob_get_clean();
$pattern = '~<li><a href="'.$url.'">~';
$replacement = '<li class="active"><a href="'.$url.'">';
echo preg_replace($pattern, $replacement, $output);
In my html page, I use a PHP include to insert my site-wide header:
<?php include 'header.php'; ?>
Here is the code in header.php:
<div id="header">
<div id="navigation">
<ul>
<li>home</li>
<li>about us</li>
<li>competition</li>
<li>media</li>
<li>sponsors</li>
<li>contact us</li>
</ul>
</div>
</div>
Here is the CSS in the header of the HTML document:
#nav_about { color:#4c005c; }
The "active" class in the inserted code is to change the color of that link to signify what page you are on. That functions fine, as "active" is defined in the CSS document linked to the html file. I want to modify the color of a particular link depending on what page it is included in. Thing is, the CSS on that page (the one defining #nav_about) does not apply when I test it out. The include works fine though.
In summary, I need to find a way to modify a site-wide snippet of HTML that is inserted via a PHP include with CSS on that page it is inserted in.
I am new to HTML and PHP, so I assume it is some lack of knowledge here.
A simple way to do change the class of the HTML element based on the current page you are on in PHP might look something like this:
<?php
$nav_links = array(
'/index.php' => array('id' => 'nav_home', 'label' => 'Home'),
'/about_us.php' => array('id' => 'nav_about', 'label' => 'About Us'),
// and so on for each link
);
?>
<div id="header">
<div id="navigation">
<ul>
<?php
foreach ($nav_links as $href => $link_info) {
if ($_SERVER['REQUEST_URI'] === $href) {
?>
<li><?php echo $link_info['label']; ?></li>
<?php
} else {
?>
<li><?php echo $link_info['label']; ?></li>
<?php
}
}
?>
</ul>
</div>
</div>
Here you would just apply class=active for the link that corresponds to the currently viewed page. This also makes it really easy to separate out you page/link configuration if you so desire.
Sounds like a selector specificity issue. What's the CSS for your navigation links?
If it's something like #navigation li {color: #abc}, that will take priority over the #nav_about selector.
Selector specificity is ranked by the number of ids, classes, and elements in each.
1 id + 1 element > 1 id.
Increase the specificity of the #nav_about selector (e.g. change it to #navigation #nav_about) and you should be fine.
Try using the traditional way, inside the PHP tags,
<?php
echo "<link rel='stylesheet' href='css-filename.css' type='text/css'>";
?>
I'm currently working on a site for a client - It is all working fine but within the navigation I have setup of for the child links using the following code
<div id="sub_nav_del">
<h4>Take a seat</h4>
<?php
$subnav_parent = ($post->post_parent) ? $post->post_parent : $post->ID;
$pages = get_pages('child_of=' . $subnav_parent . '&sort_column=menu_order');
$count = 0;
foreach($pages as $page)
{ ?>
<ul>
<li>
<h5 class="del">
<a href="<?php echo get_page_link($page->ID) ?>" ><?php echo $page->post_title ?></a>
</h5>
</li>
</ul>
<?php
}
?>
</div>
You can see an example at http://www.lagourmetteria.co.uk/take-a-seat/wine-room/, for that page I would like the current pages link orange.
I would like it to make the current link to be a different colour just within the child navigation. Is there a simple way to do this, unfortunately my PHP skills aren't fantastic.
You already have what you need as a class in the <body> which is wine-room (probably the slug). So in your CSS you can do the following magic:
body.wine-room a[href*="wine-room"],
body.tasting-room a[href*="tasting-room"],
body.food-drink-menu a[href*="food-drink-menu"],
body.have-it-all-private-parties a[href*="have-it-all-private-parties"]
{
color: orange !important;
}
UPDATE
Added all slugs on that submenu.
UPDATE 2
Added !important to supersede any other style.
How do i implement a dynamic navigation in php?
e.g
Home | about | contact | faq | tutorials
i need to automatically generate the links dynamically respectively to each page without much script. e.g i should have all the links without manually entering the links to each other page?
If you just want to display a menu for a known set of pages without re-architecting your current code, how about this:
<?php
$pages = array(
'index.php' => 'Home',
'about.php' => 'About',
'contact.php' => 'Contact',
'faq.php' => 'FAQ',
'tutorials.php' => 'Tutorials',
) ;
$currentPage = basename($_SERVER['REQUEST_URI']) ;
?>
<div id="menu">
<ul id="menuList">
<?php foreach ($pages as $filename => $pageTitle) {
if ($filename == $currentPage) { ?>
<li class="current"><?php echo $pageTitle ; ?></li>
<?php } else { ?>
<li><?php echo $pageTitle ; ?></li>
<?php
} //if
} //foreach
?>
</ul>
</div>
Put this in its own file, say menu.php, and then include it in each page. Then you can style your menu with CSS.
i agree with the first solution even if its a bit simply. For me you have to split your website into some script where you include your navigation script like the second solution.
but if you really want to make a dynamic navigation, your data cant be write in a file and they are stock in a database or on an xml file....
to do that you have to create a class or a function who parse your data and create array like first solution.
/* header.php (main header template)*/
<html>
<head>
...
</head>
<body>
<div id="mainMenu">
<?php echo Navigation::getNav($databaseCnx);?>
</div>
and in another script you have to create a class who manage the data
<?php
class Navigation{
static function getNav($cnx){
$menuList = '<ul>';
$dataFromDataBase = $cnx->getArray('MySqlRequest');
foreach($dataFromDataBase as $menu) {
$menuList .='<li>'.$menu->name.'</li>';
}
$menuList .= '</ul>';
return $menuList;
}
}
i write it fast but i hope i can help some who look for tips to create dynamic menu.
It seems that you want to include a menu file in all your pages.
You can use include().
In all your pages:
<html>
<body>
<?php include('navigation.php'); ?>
Contents of this page here...
</body>
</html>
And in navigation.php:
<div id="mainmenu">
Home | About | etc...
</div>
This way you can update your navigation menu just once for all your pages.