Sent by Chris Heilmann on 29 July 2004 14:02
> Hello. I'm learning css and I wanted to know how you folks handle creating
> a
> current "state" of a button/link in a navigational system. I've seen it
> done
> this way:
>
> <div id="navcontainer">
> <ul id="navlist">
> <li id="active"><a href="#" id="current">Item one</a></li>
> <li><a href="#">Item two</a></li>
> <li><a href="#">Item three</a></li>
> <li><a href="#">Item four</a></li>
> <li><a href="#">Item five</a></li>
> </ul>
> </div>
>
> However, what If I want to use server side includes to make my navigation
> cosistent throughout the site? Would I have to serve a different
> navigation
> file for all pages that use item one, item two, or item three.
>
> Or is there a clever way Css can handle it. My site will have at least 30
> pages and I was hoping I could handle this with one css file.
The best option is to write out your navigation via the backend and add
the CSS highlight accordingly. This is the safest bet, as CSS cannot know
which page you are on.
You can keep the navigation in an array (or XML file, or DB, whatever) and
you loop through it, highlighting it when the page equals the current one.
In PHP for example:
<?PHP
$navwords=array(
'index'=>'Home',
'downloads'=>'Downloads',
'mags'=>'Mags',
'magshots'=>'Magshots',
'didyouknow'=>'Did you know?',
'wanted'=>'Wanted',
'thanks'=>'Credits+Contact',
'errors'=>'Errors'
);
$page=explode("/",$_SERVER['PHP_SELF']);
$page=explode(".",$page[sizeof($page)-1]);
echo '<div id="nav">';
echo '<ul>';
echo '<p>just strong</p>';
foreach(array_keys($navwords) as $n)
{
echo $page[0]!=$n?"\n".'<li><a
href="'.$n.'.php">'.$navwords[$n].'</a></li>':"\n".'<li><strong>'.$navwords[$n].'</strong></li>';
}
echo '</ul>';
echo '<p>linked and strong</p>';
echo '<ul>';
foreach(array_keys($navwords) as $n)
{
echo $page[0]!=$n?"\n".'<li><a
href="'.$n.'.php">'.$navwords[$n].'</a></li>':"\n".'<li><strong><a
href="'.$n.'.php">'.$navwords[$n].'</a></strong></li>';
}
echo '</ul>';
echo '</div>';
?>
I never saw much sense in doing the highlight in CSS only with two IDs,
when a strong could do the same job and not rely on CSS.
In your css you could style it (in this case):
#nav ul li a {}
and
#nav ul li strong a {}
HTH
Chris
--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/