中山php|最優(yōu)網(wǎng)絡(luò) ：中山做網(wǎng)站 中山php建站
最優(yōu)良人
Posts Tagged With: 下拉菜單
簡單的下拉菜單，CSS+幾行JS代碼實現(xiàn)
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="#">關(guān)于我們</a> <!-- 下拉部分--> <ul><li><a href="#">公司簡介</a></li> <li><a href="#">總經(jīng)理致辭</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 »