Current page link highlighting ?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
deejay
Forum Contributor
Posts: 201
Joined: Wed Jan 22, 2003 3:33 am
Location: Cornwall

Current page link highlighting ?

Post 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.
User avatar
<CrGeary.com/>
Forum Newbie
Posts: 3
Joined: Sat Apr 10, 2010 3:30 pm
Location: England, UK

Re: Current page link highlighting ?

Post 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
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Current page link highlighting ?

Post 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>
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Current page link highlighting ?

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Post Reply