Js+Css打造的红色经典伸缩菜单代码
生活随笔
收集整理的這篇文章主要介紹了
Js+Css打造的红色经典伸缩菜单代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼簡介:
JS+Css伸縮菜單，紅色，很好看。注：IE6下好像有點不正常，用的朋友自己修正下！
代碼內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Js+Css打造的紅色經典伸縮菜單代碼_網頁代碼站(www.webdm.cn)</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation > ul { list-style-type:none; margin:0px; padding:0px; } #navigation > ul > li { border-bottom:1px solid #ED9F9F; } #navigation > ul > li > a{ display:block; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515; border-right:1px solid #711515; } #navigation > ul > li > a:link, #navigation > ul > li > a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation > ul > li > a:hover{background-color:#990020;color:#ffff00; }#navigation ul li ul{list-style-type:none;margin:0px;padding:0px 0px 0px 0px; } #navigation ul li ul li{border-top:1px solid #ED9F9F; } #navigation ul li ul li a{display:block;padding:3px 3px 3px 0.5em;text-decoration:none;border-left:28px solid #a71f1f;border-right:1px solid #711515; } #navigation ul li ul li a:link, #navigation ul li ul li a:visited{background-color:#e85070;color:#FFFFFF; } #navigation ul li ul li a:hover{background-color:#c2425d;color:#ffff00; } #navigation ul li ul.myHide{display:none; } #navigation ul li ul.myShow{display:block; } --> </style> <script language="javascript"> function change(){//通過父元素li，找到兄弟元素ulvar oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//CSS交替更換來實現顯、隱if(oSecondDiv.className == "myHide")oSecondDiv.className = "myShow";elseoSecondDiv.className = "myHide"; } window.onload = function(){var oUl = document.getElementById("listUL");var aLi = oUl.childNodes; //子元素var oA;for(var i=0;i<aLi.length;i++){//如果子元素為li，且這個li有子菜單ulif(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){oA = aLi[i].firstChild; //找到超鏈接oA.onclick = change; //動態添加點擊函數}} } </script> </head> <body> <div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul class="myHide"><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul class="myHide"><li><a href="/">Basketball</a></li><li><a href="/">Football</a></li><li><a href="/">Volleyball</a></li></ul> </li><li><a href="/">Weather</a><ul class="myHide"><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="/">Contact Me</a></li></ul> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">網頁代碼站</a> - 最專業的代碼下載網站 - 致力為中國站長提供有質量的代碼！</p>代碼來自：http://www.webdm.cn/webcode/a172083e-f917-471b-9696-b07130cde2f9.html
轉載于:https://www.cnblogs.com/webdm/archive/2011/03/14/1983219.html
總結
以上是生活随笔為你收集整理的Js+Css打造的红色经典伸缩菜单代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分别统计中英文字符
- 下一篇： redhat enterprise 5