CODEWITHSUNDEEP
css
raj
raj

Reputation: 129

highlighting current list-item in navigation bar

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

Answers (1)

Jurgo
Jurgo

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

Related Questions