中山php|最优网络中山做网站 中山php建站

最优良人

Posts Tagged With: 下拉菜单

简单的下拉菜单,CSS+几行JS代码实现

2011/08/27 at 15:01 » Comments (212)

这是最近一个项目使用到的下拉菜单效果,首先定义一个id为nav的ul,ul->li里面放的是下拉出来的菜单,也是一个ul: <ul id="nav"> <li><a href="<?url ctrl=home?>">首 页</a></li> <li><a href="#">|</a></li> <li><a href="#">关于我们</a> <!-- 下拉部分--> <ul><li><a href="#">公司简介</a></li> <li><a href="#">总经理致辞</a></li> </ul></li> <!-- 下拉部分--> </ul> js就几行代码: <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ...more »