。。复制代码
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>CSS+JS打造兼容性很好的三级导航菜单丨芯晴网页特效丨CsrCode.Cn</title>
- <style>
- .suckerdiv ul{
- margin: 0;
- padding: 0;
- list-style-type: none;
- width: 150px;
- border-bottom: 1px solid #ccc;
- }
- .suckerdiv ul li{
- position: relative;
- }
- .suckerdiv ul li ul{
- left: 149px;
- position: absolute;
- width: 160px;
- top: 0;
- display: none;
- }
- .suckerdiv ul li ul li ul{
- left: 159px;
- }
- .suckerdiv ul li a{
- display: block;
- color: black;
- text-decoration: none;
- font:12px 宋体;
- background: #fff;
- padding: 5px 5px;
- border: 1px solid #ccc;
- border-bottom: 0;
- }
- .suckerdiv ul li a:visited{
- color: black;
- }
- .suckerdiv ul li a:hover{
- color: white;
- background-color: gray;
- }
- .suckerdiv .subfolderstyle{
- background: url(http://www.codefans.net/jscss/demoimg/201201/arrow-list.gif) no-repeat center right;
- }
- * html .suckerdiv ul li { float: left; height: 1%; }
- * html .suckerdiv ul li a { height: 1%; }
- </style>
- <script type="text/javascript">
- var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
- function buildsubmenus(){
- for (var i=0; i<menuids.length; i++){
- var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
- for (var t=0; t<ultags.length; t++){
- ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
- ultags[t].parentNode.onmouseover=function(){
- this.getElementsByTagName("ul")[0].style.display="block"
- }
- ultags[t].parentNode.onmouseout=function(){
- this.getElementsByTagName("ul")[0].style.display="block"
- }
- }
- }
- }
- if (window.addEventListener)
- window.addEventListener("load", buildsubmenus, false)
- else if (window.attachEvent)
- window.attachEvent("onload", buildsubmenus)
- </script>
- </head>
- <body>
- <div class="suckerdiv">
- <ul id="suckertree1">
- <li><a href="#">Item 1</a></li>
- <li><a href="#">Item 2</a></li>
- <li><a href="#">Folder 1</a>
- <ul>
- <li><a href="#">Sub Item 1.1</a></li>
- <li><a href="#">Sub Item 1.2</a></li>
- </ul>
- </li>
- <li><a href="#">Item 3</a></li>
- <li><a href="#">Folder 2</a>
- <ul>
- <li><a href="#">Sub Item 2.1</a></li>
- <li><a href="#">Folder 2.1</a>
- <ul>
- <li><a href="#">Sub Item 2.1.1</a></li>
- <li><a href="#">Sub Item 2.1.2</a></li>
- <li><a href="#">Sub Item 2.1.3</a></li>
- <li><a href="#">Sub Item 2.1.4</a></li>
- </ul>
- </li>
- </ul>
- </a>
- </li>
- <li><a href="#">Item 4</a></li>
- </ul>
- </div>
- </body>
- </html>
- <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</font></p>
复制代码
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>CSS+JS打造兼容性很好的三級導航菜單?芯晴網頁特效?CsrCode.Cn</title>
- <style>
- .suckerdiv ul{
- margin: 0;
- padding: 0;
- list-style-type: none;
- width: 150px;
- border-bottom: 1px solid #ccc;
- }
- .suckerdiv ul li{
- position: relative;
- }
- .suckerdiv ul li ul{
- left: 149px;
- position: absolute;
- width: 160px;
- top: 0;
- display: none;
- }
- .suckerdiv ul li ul li ul{
- left: 159px;
- }
- .suckerdiv ul li a{
- display: block;
- color: black;
- text-decoration: none;
- font:12px 宋體;
- background: #fff;
- padding: 5px 5px;
- border: 1px solid #ccc;
- border-bottom: 0;
- }
- .suckerdiv ul li a:visited{
- color: black;
- }
- .suckerdiv ul li a:hover{
- color: white;
- background-color: gray;
- }
- .suckerdiv .subfolderstyle{
- background: url(http://www.codefans.net/jscss/demoimg/201201/arrow-list.gif) no-repeat center right;
- }
- * html .suckerdiv ul li { float: left; height: 1%; }
- * html .suckerdiv ul li a { height: 1%; }
- </style>
- <script type="text/javascript">
- var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
- function buildsubmenus(){
- for (var i=0; i<menuids.length; i++){
- var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
- for (var t=0; t<ultags.length; t++){
- ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
- ultags[t].parentNode.onmouseover=function(){
- this.getElementsByTagName("ul")[0].style.display="block"
- }
- ultags[t].parentNode.onmouseout=function(){
- this.getElementsByTagName("ul")[0].style.display="block"
- }
- }
- }
- }
- function test(){
- document.getElementsByTagName("ul")[1].style.display="none"
- document.getElementsByTagName("ul")[2].style.display="none"
- }
- if (window.addEventListener)
- window.addEventListener("load", buildsubmenus, false)
- else if (window.attachEvent)
- window.attachEvent("onload", buildsubmenus)
- </script>
- </head>
- <body>
- <div class="suckerdiv">
- <ul id="suckertree1">
- <li><a href="#">Item 1</a></li>
- <li><a href="#">Item 2</a></li>
- <li><a href="#" >Folder 1</a>
- <ul id="XXX1">
- <li><a href="#">Sub Item 1.1</a></li>
- <li><a href="#" >Sub Item 1.2</a></li>
- </ul>
- </li>
- <li><a href="#">Item 3</a></li>
- <li><a href="#">Folder 2</a>
- <ul id="XXX2">
- <li><a href="#">Sub Item 2.1</a></li>
- <li><a href="#">Folder 2.1</a>
- <ul>
- <li><a href="#">Sub Item 2.1.1</a></li>
- <li><a href="#">Sub Item 2.1.2</a></li>
- <li><a href="#">Sub Item 2.1.3</a></li>
- <li><a href="#">Sub Item 2.1.4</a></li>
- </ul>
- </li>
- </ul>
- </a>
- </li>
- <li><a href="#">Item 4</a></li>
- </ul>
- </div>
- </body>
- </html>
- <button onclick="test()">Copy Text</button>
- <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴網頁特效</a>?CsrCode.Cn 收集於互聯網,只為興趣與學習交流,不作商業用途。來源:源碼愛好者</font></p>
欢迎光临 批处理之家 (http://www.bathome.net/) | Powered by Discuz! 7.2 |