On Mon, 02 Aug 2010 19:42:34 +0100, MB <digital.disc...@gmail.com> wrote:
> Shortie Designs said: > >> I'm trying to keep the current page navigation link a different colour >> to >> the rest of the navigation link - this way users will know what page >> they >> are on. Ie: if the user is on the 'ABOUT US' page - then the About US >> link >> in the navigation bar is a different colour. I don't want to use >> JavaScript. > > The best way if using a dynamic web page is to use an id on the current > page link in the navigation. If it's a static web site you could use a > combination of an id on the body tag and the links and target those with > unique descendant selectors. > For example these HTML snippets: > <body id=markets"> > <li><a id="nav-markets" href="markets.html">markets</a></li> > <li><a id="nav-products" href="products.html">products</a></li> > > could be targeted with these selectors: > #markets #nav-markets, #products #nav-products to add a little to MB's method, and maybe confound the SSI doubters a little bit. The 'active' page can easily have its link disabled with no more than CSS by changing the cursor to a standard arrow so that the user does not expect any action, and the addition of the 'pointer-events' property set to none. An entire item on the menu can be just as easily hidden by using display: none; Both examples can be seen on my 'very much work in progress' at http://redlemonarts.com/_dev/textbeast/index.html the relevant css is in http://redlemonarts.com/_dev/textbeast/css/navbuttons.css (line 62) (bonus for whoever tells me why the four panels are rendered differently between surprising browsers, Firefox and IE7/8 versus all the rest! Duncan ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
