Forum Moderators: not2easy
Thanks
Each menu item has a class, say class="navMenu", on each page just add an id to, say id="navActive" that changes the css properties of the active page link to a different background color, that's the easiest way to do that.
Yes, I mean the menu bar.
To what element would you add id = "NavActive"?
<div class="menu"><a... class="navMenu">item 1</a></div>
<div class="menu"><a... class="navMenu" id="navActive">item 2</a></div>
<div class="menu"><a... class="navMenu">item 3</a></div>
That's assuming you have your a.navMenu set to display:block; already.
Of if you don't, you could make the div 'menu' get the id for the active page link, it doesn't really matter which you do, the effect is the same
[edited by: isitreal at 3:46 pm (utc) on Feb. 27, 2004]
So, in other words, in your example, on the contact.htm page, your menu bar HTML would include the id="navbar" in the hyperlink that would take you to the contact.htm page.
So, your HTML would be:
<A href="contact.htm" id="NavBar">Contact Us</a>
Don't forget to add an ID selector to your cascading style sheet like:
#NavBar { color:red; }
You get the picture :) I hope this helps.
Bruce
I think it would be better to use an ID instead of class since you only need to highlight one hyperlink.
<body>In my CSS I have a list of IDs that correspond to each link...
#bindex a#index, #bcontact a#contact{color:#369;background:#eee;}And then the id is assigned to each link. All the body ids start with b as you cannot have two ids on the same page that are the same.
I keep my classes for the links because that way I can use all the other CSS I applied to the link, and just let the id cascade the background color to the active state without having to add more CSS than necessary, easier to maintain that way I think.
CSS Beveled Button Effect [webmasterworld.com]
I'm all for keeping things slim and trim. I'm wondering now if there is a better way to do this.
if ( stristr( $pv_main_menu_item, $_SERVER['SCRIPT_NAME'] ) )
{
write out the id for the link;
}
I'm wondering now if there is a better way to do this
IMHO this is the best way using "purely" CSS.. if you haven't got the luxury of dynamically generating the page. besides if you dynamically generate the page you still need to a unique identifer of some sort to make the (php, ASP) argument true? so this is the same thing isn't it?
Also by giving the body a unique ID (or class if you already use a CSS signature) there are more things you can use it for too, like using different background graphics for different "sections" of the site too. ;)
And it keeps the HTML super slick as the only thing you have to amend is the body ID no trawling through to find which link (<anchor) should be active or not.. less room for error.. you control it from the one CSS file. The menu can then be called from an include if required because the HTML is the same site wide..
A site which uses this method to full effect..
http://www.it-enquirer.com/publishing/web-development/itecss.html
this page has the stylesheet featured on it.. then if you surf the rest of the site you see the different menu sections highlighted and the background graphic at in the top right changes too if required.
Also the layout changes between four different columnar styles. All from one stylesheet!
2 x body classes are used for this site as it's required that the layout styles will change but the menu /graphic highlight might stay the same within a "section"..
(the one hack btw is an aesthetic one ~ Macs don't like a background graphic attached to the absolute bottom of a page, so it was agreed that rather than fiddle with pixels they just don't get it at all!) Pixel perfection was not the goal with this site :)
As always it would depend on the application.. but I think this one would have actually been more complicated to "script" perhaps? and if it had've been it would probably have needed multiple stylesheets.
Suzy
IMHO this is the best way using "purely" CSS.. if you haven't got the luxury of dynamically generating the page. besides if you dynamically generate the page you still need to a unique identifer of some sort to make the (php, ASP) argument true? so this is the same thing isn't it?
If you are generating your pages, which I suspect most are once they get past a certain number of pages, no unique identifier is needed, the script reads the script name (that's it's filename, that is), compares it with the link url, if the link contains the filename, it's a match, and it prints the active state id for that menu item, no identifiers are needed, I got hung up on that too for a long time until I realized that PHP always knows what page it's on, anything as long as you request that information from it.
The rest all sounds cool though, but not practical for very large sites I think, but very interesting for a small tech/design site, that's a tempting idea to use actually, I might do it on my next web design site rebuild, thanks for that idea.
HTML:
<body id="page-about">
<ul>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
CSS:
#page-about .about, #page-contact .contact {
font-weight: bold;
}
But, again, for small sites, this is really a great technique, it's an impressive way to fake active server side programming.
You'll notice in the example that you gave that you need one id per page, and one id per nav item, that's not going to work on a large site with a complex navigation, and thousands of pages, for what are I hope very obvious reasons, plus every time you add a page, you have to go in and add a body id, update the css, etc, this is exactly why it's not a practical technique for anything other than small, more or less static sites.
