手工打造极酷的分离式滑动门导航菜单（4）

行为篇 

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

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方式来保持高亮，这可以根据不同的项目需求来定。这种方式也有不好的地方，有同好者可以交流一下！）

Js中创建了几个基本的函数，看起来就像下面这样（详细代码请参看源码）：

var temp;/*菜单ID*/
function getObj(objName){return(document.getElementById(objName));}
window.onload =function() {
var obj=getObj("menu");/*ul的id*/
var obj_a=obj.getElementsByTagName("a");
number=obj_a.length;
for (var i=0,j=obj_a.length;i<j;i++){
obj_a[i].index=i;
obj_a[i].className="normal";
obj_a[i].onclick=function(){click(this)};
obj_a[i].onmouseover=function(){overme(this)};
obj_a[i].onmouseout=function(){outme(this)};
obj_a[i].onfocus=function(){this.blur()};/*去掉IE下的虚线框，ff用样式解决*/
}
if (getCookie("show_a") != null) {
obj_a[getCookie("show_a")].className="cur";
temp=getCookie("show_a")
}
else{
var obj=getObj("menu");
var obj_a=obj.getElementsByTagName("a"); 
obj_a[0].className="cur";
//鼠标滑过效果
function overme(o){/*代码略，请看DEMO*/}
//鼠标移开后效果
function outme(o){/*代码略，请看DEMO*/}
//鼠标点击后效果
function click(o){/*代码略，请看DEMO*/}
//设置cookie
function setCookie(sName,sValue,expireMinute) {/*代码略，请看DEMO*/}
//获取cookie
function getCookie(sName) {/*代码略，请看DEMO*/}

加上以上的js后，我们控制了菜单的交互动作，并精简了菜单的结构，三层分离得比较彻底。这样结构未做作何过多的变动，就达到我们理想的状态。这样的结构在添加后台代码时，直接循环，只需要在菜单文字项的地方动态输出数据就行了，干净利落。

现在在各种主流浏览器中看看你的成果，是否显示得完全一样呢！

图五

至此，一个极酷的标准的滑动门导航菜单就在你手中诞生了！ 

总结：我们在制作这些案例时，要随时留意自己的结构，让它能保持良好的前后伸展性。尽量杜决冗余的无语义的标签，这在一个流水线似的工作环境中尤其显得重要。给后端程序带来巨大的方便的同时，也使自己的代码看来比较舒服！ 

本实例测试的兼容性环境是：

IE6/IE7/FF3/TT/OPERA9.63/谷歌浏览器测试通过，其它的浏览器请朋友帮忙测试一下。

源码下载：

远程下载：极酷漂亮滑动菜单.rar（8.65 KB）

本站下载： 极酷漂亮滑动菜单.rar （8.65 KB）