CSS实例:超酷的网站导航按钮

li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}

ok,似乎大功告成，在不同浏览器下看看，似乎都能达到满意的效果。下面是截图：

图四

现在纯CSS版的滑动门菜单基本上就做好了。

行为篇

上面的效果似乎离我的理想状态的菜单又更进了一步。不过也有暇痴。

1.如我点击一个菜单后其焦点虚线框让人感到非常讨厌。

2.还有点击后不能高亮记录当前选中项。

一步一步来解决吧！

为了除去此虚线框，我们可以在A标签属性中加入onfocus="this.blur();"这句代码，这是非常立竿见影的方法。那么就需要在结构上添加一些内容，可能就会变成下面这种结构了：

<li><a href="#none" title="冰极峰" onfocus="this.blur();"><span>冰极峰博客</span></a></li>

可是，我们别忘了，要尽量避免“行为”给“结构”造成干扰，这是我们在开始就提出的要求。因此，这种方法基本上可以否决了。

另外我们想记录当前选中项菜单，这种制作方法有很多种，纯CSS的做法可能会为每一个菜单项创建一个ID，然后用样式表来设置不同页面下调用高亮菜单的样式。但这种方法又会对结构添加一些字符。

上面两个解决方案都需要在结构中嵌入一些本来该用“动作”来表现的东西，这会造成结构冗余，可读性较差，并且给人感觉页面很乱。

我想该是JS粉墨登场的时候了...

我想在页面一载入时就遍历UL下的所有A标签，自动给它加上一个样式，这个样式就是li a的样式，我们可以将它改成一个class类，我们取名为normal吧，方便JS动态调用，并将li a:hover也换成一个class类，取名为over，作为JS动态调用鼠标移上时的效果，而li a:active就是当前选中状态了,取名为cur，将它们三个都在样式表中作出修改。

在页面载入后，用for循环给每个菜单A标签注入onclick，onmouseover，onmouseout事件，我们就可以摒弃用a:link，a:hover，a:active来摸拟三态效果了，因为这样更便于控制当前选中菜单的高亮效果。顺便在这个循环中去掉讨厌的虚线框（虽说在FF下只用一句样式就可以搞定，但在IE中显然是不行的！）。然后我们用cookie来记录选中的菜单项ID，并设置其为5分钟后过期。这样无论你如何恶意刷屏，高亮菜单还是能记住。（是否采用cookie方式来保持高亮，这可以根据不同的项目需求来定。这种方式也有不好的地

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!