菜单导航中经常应用滑动门技术,之前用纯CSS样式也可以写滑动门,IE6中除了a标签,其它的标签还不兼容hover伪类,所以必须要把a标签写在span或者其它标签的外层,可是那样又不符合W3C标准,所以,还是用jQuery来完成吧,从来不用去考虑伪类兼容的问题了,代码如下:

HTML部分:

1
2
3
4
5
6
7
8
    <ulid="nav">
       <li class="active"><span><a href="./">Home</a></span></li>
        <li><span><a href="./">Products</a></span></li>
        <li><span><a href="./">About FINE-V</a></span></li>
        <li><span><a href="./">Production Process</a></span></li>
        <li><span><a href="./">Order Online</a></span></li>
        <li><span><a href="./">Contact Us</a></span></li>
    </ul>

.active 是鼠标滑过之后的样式,下面是jQuery代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<span style="color: #006600;font-style: italic">// JavaScript Document</span>
$<span style="color: #009900">(</span><span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #009900">{</span>
	$<span style="color: #009900">(</span><span style="color: #3366CC">"#nav li"</span><span style="color: #009900">)</span>.<span style="color: #660066">hover</span><span style="color: #009900">(</span><span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #009900">{</span>
				className<span style="color: #339933">=</span><span style="color: #009900">(</span> $<span style="color: #009900">(</span><span style="color: #000066;font-weight: bold">this</span><span style="color: #009900">)</span>.<span style="color: #660066">attr</span><span style="color: #009900">(</span><span style="color: #3366CC">"class"</span><span style="color: #009900">)</span><span style="color: #009900">)</span><span style="color: #339933">;</span>	
				$<span style="color: #009900">(</span><span style="color: #000066;font-weight: bold">this</span><span style="color: #009900">)</span>.<span style="color: #660066">addClass</span><span style="color: #009900">(</span><span style="color: #3366CC">"active"</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
				<span style="color: #009900">}</span><span style="color: #339933">,</span>
			<span style="color: #003366;font-weight: bold">function</span> <span style="color: #009900">(</span><span style="color: #009900">)</span> <span style="color: #009900">{</span>
				<span style="color: #000066;font-weight: bold">if</span><span style="color: #009900">(</span>className<span style="color: #339933">==</span><span style="color: #3366CC">""</span><span style="color: #009900">)</span><span style="color: #009900">{</span>
                                                                          $<span style="color: #009900">(</span><span style="color: #000066;font-weight: bold">this</span><span style="color: #009900">)</span>.<span style="color: #660066">removeClass</span><span style="color: #009900">(</span><span style="color: #3366CC">"active"</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
						<span style="color: #009900">}</span><span style="color: #000066;font-weight: bold">else</span><span style="color: #009900">{</span>
                                                                             $<span style="color: #009900">(</span><span style="color: #000066;font-weight: bold">this</span><span style="color: #009900">)</span>.<span style="color: #660066">addClass</span><span style="color: #009900">(</span>className<span style="color: #009900">)</span><span style="color: #339933">;</span> 
						 <span style="color: #009900">}</span>
						 <span style="color: #009900">}</span> 
<span style="color: #009900">)</span><span style="color: #339933">;</span>
<span style="color: #009900">}</span><span style="color: #009900">)</span>

呵呵,比较简单,就是多加了一个判断,大家可以参考一下,也比较实用。