手工打造分离式滑动门导航菜单 [5]行为篇

mseed

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

• 如我点击一个菜单后其焦点虚线框让人感到非常讨厌。
• 还有点击后不能高亮记录当前选中项。
  

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

1. <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中创建了几个基本的函数，看起来就像下面这样（详细代码请参看源码）：

1. var temp;/*菜单ID*/
   
2. function getObj(objName){return(document.getElementById(objName));}
   
3. window.onload =function() {
   
4. var obj=getObj("menu");/*ul的id*/
   
5.        var obj_a=obj.getElementsByTagName("a");
   
6.        number=obj_a.length;
   
7.        for (var i=0,j=obj_a.length;i<j;i++){
   
8.               obj_a[i].index=i;
   
9.               obj_a[i].className="normal";
   
10.               obj_a[i].onclick=function(){click(this)};
    
11.               obj_a[i].onmouseover=function(){overme(this)};
    
12.               obj_a[i].onmouseout=function(){outme(this)};
    
13. obj_a[i].onfocus=function(){this.blur()};/*去掉IE下的虚线框，ff用样式解决*/
    
14. }
    
15.     if (getCookie("show_a") != null) {
    
16.               obj_a[getCookie("show_a")].className="cur";
    
17.               temp=getCookie("show_a")
    
18.        }
    
19.        else{
    
20.            var obj=getObj("menu");
    
21.            var obj_a=obj.getElementsByTagName("a");         
    
22.               obj_a[0].className="cur";         
    
23.        }      
    
24.     }
    
25. //鼠标滑过效果
    
26. function overme(o){/*代码略，请看DEMO*/}
    
27. //鼠标移开后效果
    
28. function outme(o){/*代码略，请看DEMO*/}
    
29. //鼠标点击后效果
    
30. function click(o){/*代码略，请看DEMO*/}
    
31. //设置cookie
    
32. function setCookie(sName,sValue,expireMinute) {/*代码略，请看DEMO*/}
    
33. //获取cookie
    
34. function getCookie(sName) {/*代码略，请看DEMO*/}

复制代码

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