Hi Stephen.
AFAIK there's no simple way around putting a common nav bar on every page,
other than by the use of Frames, which I wouldn't recommend.
It's a PITA when a client suddenly wants an extra 'button' added to the
navigation. :-(
I have this problem with nearly all of my websites, but at least with CSS you
only need write the style for the nav, once.
Instead of the <li id="current"><a href="#">Link 1</a></li> construct, I now
prefer to specifically style the 'current' mode as fixed, with the cursor
defined as "default" for the state and an image that the user can recognise as
specifically 'current'.
Something along the lines of:
<div id="navbar">
<div id="current">
<ul>
<li>Costumes</li>
</ul>
</div>
<ul>
<li><a href="scenery.htm">Scenery</a></li>
<li><a href="lighting.htm">Lighting</a></li>
<li><a href="sound.htm">Sound</a></li>
<li><a href="magic.htm">Magic & FX</a></li>
<li><a href="props.htm">Props</a></li>
<li><a href="memorabilia.htm">Memorabilia</a></li>
<li><a href="misc.htm">Miscellaneous</a></li>
<li><a href="../index.htm">Home</a></li>
</ul>
</div>
#navbar li a, #navbar #current li {
background-image:url(../images/SmBlankMulti.png);
position:relative;
background-position:0 0;
background-repeat: no-repeat;
cursor:pointer;
etc................
}
.navbar li a:hover {
background-position:0 -28px;
}
.navbar li a:active, #navbar #current li {
background-position:0 -56px;
color:aqua;
}
#navbar #current li {
cursor:default;
color:aqua;
}
Hope this helps.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
----- Original Message -----
From: Stephen Carrell
To: [email protected]
Sent: Tuesday, August 05, 2008 2:46 PM
Subject: [css-d] Dynamic Navigation Link Aid
Hi all,
I'm new to this forum and relatively new to CSS-based web design, so please
excuse my newb-ness over the following days/weeks/etc.
I'm trying to find a way to style the navigation links in a document that
will highlight the page that the user is on, and do it in such a way that I
don't have to hand-code every page. Thus far, I've used:
<ul>
<li id="current"><a href="#">Link 1</a></li>
<li><a href="page2.html">Link 2</a></li>
<li><a href="page3.html">Link 3</a></li>
<li><a href="page4.html">Link 4</a></li>
</ul>
and styled #current to make the link stand out. It works, but there _has_ to
be a better way than doing this for every nav menu in every page in a
website.
Can anyone help me out? I'd appreciate it; thanks!
Regards,
Stephen Carrell
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
