Page 1 of 1

Current page link highlighting ?

Posted: Thu Mar 18, 2010 3:31 am
by deejay
Hi

What I'm trying to do is probably really simple, so I'll be having a stupid moment no doubt.

On my buttons I have a pink background when I hover over the button. This works fine. What i also need to do is for the button background to remain pink if I am on that page. The header file is called from an 'includes' folder BTW so I will not be able to assign a seperate class to it for each page I am on.

Here's my css.

Code: Select all

 
#menu a {
    display: block;
    width: 100px;
    padding: 3px;
    margin-right: 2pt;
    background-color: #e6e6e6;
    text-decoration: none;
    text-align: center;
    font-family: Georgia,"Times New Roman", Times, serif;
    font-size: 10px;
    font-weight: bold;
    color: #4c4c4c;
    border: none;
}
 
#menu a:hover, #menu a:active {
    background-color: #ed1e79;
    color: #fff;
}

Thanks in advance for any help.

Re: Current page link highlighting ?

Posted: Sat Apr 10, 2010 3:54 pm
by <CrGeary.com/>
You could give each button in your navigation an #id, and also give your body an id, so then in your css you can do:

Code: Select all

#home-page #home-btn, #contact-page #contact-btn, #about-page #about-btn {
     background-color: #ed1e79;
}
I just found you a tutorial. Hope It Helps

Re: Current page link highlighting ?

Posted: Sun Apr 11, 2010 5:49 am
by kaszu
The header file is called from an 'includes' folder BTW so I will not be able to assign a seperate class to it for each page I am on.
Can't you do something like following?
main.php

Code: Select all

<?php
$current_page = 'about';
include('includes/header.php');
header.php

Code: Select all

<?php
    $current_page = (isset($current_page) ? $current_page : '');
?>
<div id="nav">
    <a href="/" class="<?php echo ($current_page == 'home' ? 'selected' : ''); ?>">Home</a>
    <a href="/about" class="<?php echo ($current_page == 'about' ? 'selected' : ''); ?>">About</a>
</div>

Re: Current page link highlighting ?

Posted: Sat Apr 24, 2010 10:41 am
by social_experiment
Here is a function that could help.

Code: Select all

<?php
 /*
 example of '$links';
 protected $links = array('home' => 'index.php',
                                     'about' => 'about.php);
 */

function admin_navigation() {
	 	foreach ($this->links as $key => $value) {
				$lengthOfFileName = strlen($value);
				$extractedName = substr($_SERVER['PHP_SELF'], -($lengthOfFileName));				
				if ($extractedName == $value) {
					echo "<span class=\"inactive\">$key</span>";
				}
				else {
					echo "<a href=\"$value\" title=\"$key\">$key</a>";
				}
		}
	 }?>
'$links' is an associative array that contains your pages and the pagenames. When the navigation is created, the script checks the name of the page (physical name of the page i.e index, about). If it matches it echo's a <span> tag with a value of 'inactive'. The css then 'dresses' up that link as something else so you can have it appear different from the other links.