中山php|最優(yōu)網(wǎng)絡(luò) :中山做網(wǎng)站 中山php建站
最優(yōu)良人
Posts Tagged With: 下拉菜單
簡(jiǎn)單的下拉菜單,CSS+幾行JS代碼實(shí)現(xiàn)
2011/08/27 at 15:01 » Comments (212)
這是最近一個(gè)項(xiàng)目使用到的下拉菜單效果,首先定義一個(gè)id為nav的ul,ul->li里面放的是下拉出來(lái)的菜單,也是一個(gè)ul: <ul id="nav"> <li><a href="<?url ctrl=home?>">首 頁(yè)</a></li> <li><a href="#">|</a></li> <li><a href="#">關(guān)于我們</a> <!-- 下拉部分--> <ul><li><a href="#">公司簡(jiǎn)介</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 »