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

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/谷歌浏览器测试通过，其它的浏览器请朋友帮忙测试一下。

 下载demo

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