Forum Moderators: not2easy
Is there another way to do this?
I'm using menu code that utilizes JS, HTML and CSS. I don't know how to write JS but pretty familiar with CSS so I hope something can be controlled there.
change color when you're on that page only
There are two ways to mark the "current" link with html and css. The "low tech" way is to manually add a class, say, current, for instance, to the corresponding link on each page, then just style that class how you want the current link to display...
.current{background:red;}
This works a treat, but it's not very fun, and of course if you serve the navigation from a central location to each page on the site, via a CMS or other templatizing system, this doesn't work at all without falling back on scripting.
If you want to be able to use the same navigation code on all pages but still have the current link display, you can use an ID in the <body> tag to pull it off.
For this, you have to set each navigation link up with a unique ID, and then assign each page's BODY tag a unique ID as well...
<body id="page1">
<div id="nav">
<ul>
<li><a href="#" id="link1"></li>
<li><a href="#" id="link2"></li>
<li><a href="#" id="link3"></li>
</ul>
</div>
</body>
Now in the CSS, you use the decendant selector to target the right link on the right page with the right styles...
body#page1 a#link1,
body#page2 a#link2,
body#page3 a#link3 {background:red;}
not display all the visited pages
a:link, a:visiter{}
a:link:hover, a:visited:hover{}
a:link:active, a:visited:active{}
This will make visited and unvisited links behave the same.
cEM
