Reputation: 129
I am including header file in each of my web page for navigation bar, how can I show the current page activated/highlighted?
<div id="header"><div id="nav">
<ul id="menu">
<?php
$CurrentPage = $path_parts = pathinfo(__FILE__,PATHINFO_FILENAME); // u will get the current page name "index.php", home.php etc..
?>
<?php
if(!logged_in())
{
echo "<li id=\"<?php echo ($CurrentPage=='Home') ? 'current' : ''?>\" style=\"background-color: #CCFFFF;\" ><a href=\"index.php\">Home</a></li>";
}
?>
<?php
if(logged_in())
{
echo "<li id=\"<?php echo ($CurrentPage=='Home') ? 'current' : ''?>\" style=\"background-color: #CCFFFF;\" ><a href=\"index.php\">Home</a></li>";
}
?>
<?php
echo "<li id=\"<?php echo ($CurrentPage=='Contact Us') ? 'current' : ''?>\" style=\"background-color: #66FFFF;\"><a href=\"contact.php\">Contact Us</a></li>";
?>
</ul>
</div></div>
How can I include this CSS for id="current"
#header #nav ul li#current a {
background: transparent url(../images/current.gif) repeat-x left bottom;
color: #222;
}
Upvotes: 0
Views: 677
Reputation: 905
You can use
#nav #menu #current a
instead of
#header #nav ul li#current a
Maybe you should add #header
as well but i did not see any #header in the code above.
<style>
#header #nav #menu #current a {
background: transparent url(../images/current.gif) repeat-x left bottom;
color: #222;
}
</style>
<div id="header"><div id="nav">
<ul id="menu">
<?php
$CurrentPage = $path_parts = pathinfo(__FILE__,PATHINFO_FILENAME); // u will get the current page name "index.php", home.php etc..
?>
<?php
if(!logged_in())
{
echo "<li id=\"<?php echo ($CurrentPage=='Home') ? 'current' : ''?>\" style=\"background-color: #CCFFFF;\" ><a href=\"index.php\">Home</a></li>";
}
?>
<?php
if(logged_in())
{
echo "<li id=\"<?php echo ($CurrentPage=='Home') ? 'current' : ''?>\" style=\"background-color: #CCFFFF;\" ><a href=\"index.php\">Home</a></li>";
}
?>
<?php
echo "<li id=\"<?php echo ($CurrentPage=='Contact Us') ? 'current' : ''?>\" style=\"background-color: #66FFFF;\"><a href=\"contact.php\">Contact Us</a></li>";
?>
</ul>
</div></div>
Upvotes: 1