Good Afternoon, I am having a hard time setting the navigational links to active state when a user clicks on the link. I have a header.php file that holds the nav and lavalamp id. The header.php is included on each page. When I click on the "about" page link, the line still remains on its default position which is on the "home" link. I am running this in php if that helps.
Appreciate your help...Thank you.
The header.php consists of the following html:
<div id="nav" class="grid_9 push_3">
<ul class="lavaLamp" id="lavaLampLine">
<li><a href="index.php">HOME</a></li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="product.php">SUPPORT</a></li>
<li><a href="blog">OUR BLOG</a></li>
<li><a href="contact.php">CONTACT US</a></li>
</ul><!-- end menu -->
</div><!-- end nav -->
The css:
/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height:15px;
width:421px;
margin:3px 0;
padding:80px 0 0 0;
/* overflow: hidden; */
}
/* Force the list to flow horizontally */
.lavaLamp li {
float:left;
list-style:none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
border-bottom:4px solid #3A7CB8;
width:9px;
height:15px;
top:90px;
position:absolute;
z-index:8;
}
.lavaLamp li.back .left {
border-bottom:4px solid #3A7CB8;
height:15px;
overflow:hidden;
margin-right: 5px; /* 5px is the width of the rounded shape */
}
/* Styles for each menu-item. */
.lavaLamp li a {
font-size:16px;
font-weight:normal;
text-decoration:none;
display:inline;
color:#095BA6;
text-align:center;
margin: auto 12px;
display: block;
float: left;
cursor:pointer;
outline: none;
z-index:10;
height:30px;
position:relative;
}
.lavaLamp li a:hover, .lavaLamp li a:active, .lavaLamp li a:visited {
border: none;
}
.active {
border: none;
color:#000000;
font-weight:bold;
}
Use a PHP if/else statement to add the class "current" to the li you're on.
something like:
<li <?php if(strpos($_SERVER["PHP_SELF"],"index.php") !== false) echo 'class="current'; ?>><a href="index.php" >HOME</a></li>
for each li, change "index.php" to whatever the filename it is. This is pretty inefficient... you could also do it like this:
<?php
$parts = Explode('/', $_SERVER["PHP_SELF"]);
$currentFile = $parts[count($parts) - 1];
?>
and then in each LI you can say:
<li <?php if($currentFile == "index.php") echo 'class="current'; ?>><a href="index.php" >HOME</a></li>
(source: http://www.scriptygoddess.com/archives/2007/07/13/use-php-to-get-the-current-pagefile-name/)