CodingForums.com - View Single Post - jQuery [Help?] standards based fading navigation background

singedpiper · 10-24-2009, 04:31 PM

i've been looking for a way to make a rollover effect fade in and out without using images for navigation, for quite some time... I finally stumbled upon this link:

http://css-tricks.com/color-fading-menu-with-jquery/

This seems like the holy grail to me, but with one small issue, it's not written with styled list based navigation in mind, therefore being less than ideal in terms of logical HTML markup for screen readers.

I'd like to modify this script to work with:

Code:

<div id="navcontainer">
<ul id="navlist">
	<li id="active">	<a href="#" id="current">	link1 </a></li>
	<li>			<a href="link2.html">		link2 </a></li>
	<li>			<a href="link3.html">		link3 </a></li>
	<li>			<a href="link4.html">		link4 </a></li>
	<li>			<a href="link5.html">		link5 </a></li>
	<li>			<a href="link6.html">		link6 </a></li>
</ul>
</div>

but I'm totally lost. Could someone help me out with this? It looks doable, but i'm not too solid on layering divs in css or on jQuery coding.

10-24-2009, 04:31 PM	PM User \| #1
singedpiper Regular Coder Join Date: Jan 2005 Posts: 221 Thanks: 2 Thanked 0 Times in 0 Posts	[Help?] standards based fading navigation background i've been looking for a way to make a rollover effect fade in and out without using images for navigation, for quite some time... I finally stumbled upon this link: http://css-tricks.com/color-fading-menu-with-jquery/ This seems like the holy grail to me, but with one small issue, it's not written with styled list based navigation in mind, therefore being less than ideal in terms of logical HTML markup for screen readers. I'd like to modify this script to work with: Code: <div id="navcontainer"> <ul id="navlist"> <li id="active"> <a href="#" id="current"> link1 </a></li> <li> <a href="link2.html"> link2 </a></li> <li> <a href="link3.html"> link3 </a></li> <li> <a href="link4.html"> link4 </a></li> <li> <a href="link5.html"> link5 </a></li> <li> <a href="link6.html"> link6 </a></li> </ul> </div> but I'm totally lost. Could someone help me out with this? It looks doable, but i'm not too solid on layering divs in css or on jQuery coding.