Hi guys.

 

I'm currently doing a navigation using CSS, I have the rollover part already. However I do no know how to set it to show the current page it's on. Example, the default color of the background is white, and when you mouse over it's light gray. So say I click "contact" I would like the button to have a specific color while on the contact page.

 

Here is my navigation in dreamweaver

 <div id="navi">
 <ul>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Home</a></li>
 </ul>
</div>

 

And here is the CSS format

 

#container #navi {
font-family: Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
color: #000;
width: 789px;
line-height: 40px;
font-size: medium;
letter-spacing: 2px;
background-color: #FFF;
height: 40px;
float: right;
}

#container #navi ul {
list-style-type:none;
margin: 0px;
padding: 0px;
}

#container #navi li {
float: right;

}

#container #navi li a:link, #navi li a:visited {
font-family:Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
display:block;
color: #ff7011;
font-size: medium;
font-weight: bold;
text-align: center;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
}

#container #navi li a:hover, #navi li a:active {
color: #ff7011;
background-color: #e5e8e9;
display: block;
}

 

Thanks a million

Method 1:-

The simple way is to add a class for the current page in the CSS file

a.current { background-color: lime; }

and then add the class into the appropriate link for that page (so it's in a different link on each page):-

<li><a class="current" href="#">Portfolio</a></li>

However, that means editing every page's menu when you need to add or change a link in the future.

 

Method 2:-

If you have a PHP "include" file for the nav:-

 

You give each page ul tag a different id, for instance:-

<ul id="contactpage"> on the Contact page, <ul id="portfoliopage"> on the Portfolio page, <ul id="servicespage"> and <ul id="aboutpage"> and <ul id="homepage">.

 

and the li tags in the "include" file would have:-

<li id="contactlink"><a href="#">Contact</a></li>

<li id="portfoliolink"><a href="#">Portfolio</a></li>

<li id="serviceslink"><a href="#">Services</a></li>

<li id="aboutlink"><a href="#">About</a></li>

<li id="homelink"><a href="#">Home</a></li>

 

then put only he above li tags in the "include" file nav.inc which is the same for every page when inserted by the PHP;

 

the html markup is <ul id="contact"><?php include ("nav.inc"); ?><ul> (with different ul id on every page);

then you add CSS for matched pairs:-

 

#contactpage li#contactlink a, #portfoliopage li#portfoliolink a, #servicespage li#serviceslink a, #aboutpage li#aboutlink a, #homepage li#homelink a { background-color: lime; }

 

When a page ul id matches the id in only one li tag, the background will change. It may look complicated to set up, but if you add a link or change a link url in the future, you only have to edit the nav.inc file; the main pages stay the same.

 

Method 3:-

There is also a method that is entirely PHP; see the last example here:-

http://www.wickham43.net/highlighthome.php

I tend to have a css style in the background... e.g.

 

 

<style>
.current { background-color:lime; font-weight:bold; }
ul li a { display:block; border:none;height:100%;width:100%;}
</style>

<ul>
   <li class="active"><a href="#">Homepage</a></li>
   <li><a href="#"><a href="#">About</a></li>
   <li><a href="#"><a href="#">Account</a></li>
</ul>

 

 

A simple (but effective) method in PHP:

 

Save the below file as menu.inc.php

<?php

$pages  =   array();


$pages[0]['text']  =   'Homepage';
$pages[0]['url']   =   '/ok.php';

$pages[1]['text']  =   'About us';
$pages[1]['url']   =   '/about.php';

$pages[2]['text']  =   'Account';
$pages[2]['url']   =   '/users/account.php';

$menu_html         =   '<li class="%s"><a href="%s">%s</a></li>' . "\n";
$menu_open         =   '<ul>';
$menu_close        =   '</ul>';

// Build menu
if (is_array($pages) && count($pages) != 0)
{
   $current_page   =   $_SERVER['PHP_SELF'];

   echo $menu_open;
   foreach ($pages as $page)
   {
       if ($current_page == $page['url'])
       {
           vprintf($menu_html,array('active',$page['url'],$page['text']));
       }
       else
       {
           vprintf($menu_html,array('',$page['url'],$page['text']));
       }

   }
   echo $menu_close;
}

 

Then just dump that into your main template using an include

 

<html>
<head>
<title> your site...</title>
</head>

<body>

<!-- menu -->
<div id="navi">
<?php include('menu.inc.php'); ?>
</div>

.... main content here etc...

</body>
</html>