3 replies [Last post]
bmk245
Offline
newbie
Last seen: 9 years 8 weeks ago
Timezone: GMT-6
Joined: 2009-06-19
Posts: 2
Points: 0

Hello all I am trying to figure out how to set my CSS/html code correctly so that when a new page is selected the color changes to the same color as the hover. At this point I can go into every page and set the "active" class to that specific page however, I am trying to tie all of this together with php to save time if a change to any page elements needs to happen. Any suggestions would be most appreciated!

[CSS Code]
/* Top Menu Navigation */
/* The CSS Code for the menu starts here */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 5px 0;
padding: 0 0 0 10px;
list-style-type: none;
font-size: 13px;
background: #eee;
height: 40px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;

}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
/* Blue Menu */
#menu.blue {
border-top: 2px solid #356AA0;
border-left: 2px solid #356AA0;
border-bottom: 2px solid #204061;
border-right: 2px solid #204061;
background: #356AA0;}
#menu.blue a {color: #fff;}
#menu.blue li a:hover, #menu.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}

[HTML Code]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 10 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

A server side scripted

A server side scripted solution would always be the preference, and in the simplest sense can be achieved by giving each page/file a pageName variable then doing a simple check in the menu to see if the pageName matches the linkname and then printing out a class='active' or variations on that principle.

There is also a pure CSS driven method that can be employed though:

http://csscreator.com/node/33662

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

bmk245
Offline
newbie
Last seen: 9 years 8 weeks ago
Timezone: GMT-6
Joined: 2009-06-19
Posts: 2
Points: 0

So using php code I could

So using php code I could write a page id checker to see if it matches then print a class='active' to whichever page it matches? It seems that if I were to use a purely CSS driven one I need to add the menu code to every page for which I would need an "active" state set and then for the rest of the pages simply use my php code to draw the menu?

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 8 years 18 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Hi, Maybe the css way is

Hi,

Maybe the css way is better, but I use a php function in an included page and I sent the page as an argument in the function.

<?
function display_nav($the_page) {
navigation structure here
}
?>

This gives you the page through, so that you can add an active class to the link the user is on.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.