How do I write a php function to show class in navigation menu url using php self


Tags: php,css,navigationbar

Problem :

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

Navigation Menu

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.

Navigation Menu with class="current"

Here is the navigation menu code

<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li><a href="/">Home</a></li>
<li <?php echo $class_current; ?>><a href="technician-jobs/">Technician</a></li>
<li <?php echo $class_current; ?>><a href="programming-jobs/">Programming</a></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.



Solution :

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\""; ?>><a href="/">Home</a></li>
<li<?php if ($currentPage=="technician") echo " class=\"current\""; ?>><a href="technician-jobs/">Technician</a></li>
<li<?php if ($currentPage=="programming") echo " class=\"current\""; ?>><a href="programming-jobs/">Programming</a></li>
</ul>
</div>
<!-- MENU END -->

    CSS Howto..

    how to activate the functions of a div in css after focusing in a textbox in asp.net?

    how can i add class to errorsummay without remove header message

    How to add style to words (HTML/CSS)

    ASP.NET - How to include CSS only if it isn't alrealy included?

    how to access image through div

    how to add css padding for button such that it is consistent with column width?

    How to change css for active link based on the hashtag

    How to get all images(overlapping allowed) in one line using css?

    How to align with digits inside to the right, jQuery

    Css positioning: how to position a block/paragraph under another

    How to create a fixed div inside an another div?

    How to capture table row on button click to add css class knockout js

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    After ul li's float left ,how can I make text-align center?

    How to style this value with jQuery

    how to div.width css property using js or jquery?

    How to change css style of input and some text in one function?

    How to make image appear upon hover over text using css?

    How do I use CSS to centre this content?

    How to click on a link from the header and then go back with HTML, Javascript and CSS? [closed]

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How to solve CSS background transparency?

    How can I block/allow access to document.styleSheets information, and what is the reason for this

    small space keeps showing to right side of my website w

    how to get background image present in other folder using css?

    How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?

    How to reserve a DIV width with “left:100%” CSS rule

    How to create an overlay to be used under a pop up

    How to format a long
     HTML block suitable for width limited device such as iPhone

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)