JS技术

编写无限级横向菜单_源码_Javascript教程

字号+ 作者：H5之家 来源：H5之家 2015-10-01 08:27 我要评论( )

编写无限级横向菜单_源码,学习编写无限级横向菜单_源码,编写无限级横向菜单_源码,查看编写无限级横向菜单_源码,教程网3月27日整理!DOCTYPE html PUBLIC -/

教程网3月27日整理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无限级菜单</title>
<style type="text/css">
*,body,ul,li {margin:0;padding:0;list-style: none;}
body {font:12px Arial; background:#000;}
a { border:none; color:#FFF; text-decoration:none;}
.menu {width:980px; margin:auto; background:url("") repeat-x 0 0;}
#menu { padding-left:210px; background:url("") no-repeat 0 -36px; height:36px; }
 #menu li { float:left;;}
 #menu li a {display:block;clear:both;font-size:14px;padding-right:14px;}
 #menu li a strong {display:inline-block; height:16px;padding:15px 0 5px 15px;overflow:hidden;}
 #menu li a:hover,
 #menu li a.ok {background:url("") no-repeat right -72px; }
 #menu li a:hover strong,
 #menu li a.ok strong{
  padding:8px 0 12px 15px;
  background:url("") no-repeat 0 -72px;
 }
 #menu li ul {display:none; width:125px;position:absolute;background-color:#D9D9D9;}
 #menu li ul li { float:none;vertical-align:top; overflow:hidden;}
 #menu li ul li a {
  float:left;
  width:115px;
  _float:none;
  _display:inline-block;
  padding:7px 0 4px 10px;
  text-align:left;
  font-size:12px;
  border-bottom:#000 1px solid;
  overflow:hidden;
 }
 #menu li ul li a:hover{ background-image:none; background-color:#F00;}
 #menu li ul li ul {left:125px;} 
</style>
<script language="javascript">
var Menu = ["menu"];
window.onload = function(){
 var li = document.getElementById(Menu).getElementsByTagName("li");
 for(var i=0;i<li.length;i++){
  var li_ul = li[i].getElementsByTagName("ul");
  if(li_ul.length){
   li[i].onmouseout = function(){
    this.getElementsByTagName("a")[0].style.backgroundColor = "";
    this.getElementsByTagName("ul")[0].style.display ="none";
   }
   if(li[i].parentNode.id!=Menu){
    li[i].onmouseover= function(){
     this.getElementsByTagName("a")[0].style.backgroundColor = "#F00";
     this.getElementsByTagName("ul")[0].style.display ="block";
    }
   }
  }
 }
}
function ShowMenu(obj){
 var li = document.getElementById(Menu).getElementsByTagName("li");
 for(var c=0;c<li.length;c++){
  if(li[c].parentNode.id==Menu){
   li[c].getElementsByTagName("a")[0].className = "";
  }
 }
 obj.getElementsByTagName("a")[0].className = "ok";
 obj.getElementsByTagName("a")[0].style.backgroundColor = "#F00";
 obj.getElementsByTagName("ul")[0].style.display ="block";
}
</script>
</head>
<body>
<div class="menu">
<ul id="menu">
    <li onmouseover="javascript:ShowMenu(this)"><a href="javascript:void(0)"><strong>二级菜单B</strong></a>
  <ul>
   <li><a href="javascript:void(0)">二级菜单B_1</a>
    <ul>
     <li><a href="javascript:void(0)">二级菜单B_1_1</a>
      <ul>
       <li><a href="javascript:void(0)">二级菜单B_1_1_1</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_1_2</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_1_3</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_1_4</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_1_5</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_1_6</a></li>
      </ul>
     </li>
     <li><a href="javascript:void(0)">二级菜单B_1_1</a>
      <ul>
       <li><a href="javascript:void(0)">二级菜单B_1_2_1</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_2_2</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_2_3</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_2_4</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_2_5</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_2_6</a></li>
      </ul>
     </li>
     <li><a href="javascript:void(0)">二级菜单B_1_1</a>
      <ul>
       <li><a href="javascript:void(0)">二级菜单B_1_3_1</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_3_2</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_3_3</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_3_4</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_3_5</a></li>
       <li><a href="javascript:void(0)">二级菜单B_1_3_6</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li><a href="javascript:void(0)">二级菜单B_2</a>
    <ul>
     <li><a href="javascript:void(0)">二级菜单B_2_1</a></li>
     <li><a href="javascript:void(0)">二级菜单B_2_2</a></li>
     <li><a href="javascript:void(0)">二级菜单B_2_3</a></li>
     <li><a href="javascript:void(0)">二级菜单B_2_4</a></li>
     <li><a href="javascript:void(0)">二级菜单B_2_5</a></li>
     <li><a href="javascript:void(0)">二级菜单B_2_6</a></li>
    </ul>
   </li>
  </ul>
 </li>
 
    <li onmouseover="javascript:ShowMenu(this)"><a href="javascript:void(0)"><strong>三级菜单C</strong></a>
  <ul>
   <li><a href="javascript:void(0)">三级菜单C_1</a>
    <ul>
     <li><a href="javascript:void(0)">三级菜单C_1_1</a>
      <ul>
       <li><a href="javascript:void(0)">三级菜单C_1_1_1</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_1_2</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_1_3</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_1_4</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_1_5</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_1_6</a></li>
      </ul>
     </li>
     <li><a href="javascript:void(0)">三级菜单C_1_1</a>
      <ul>
       <li><a href="javascript:void(0)">三级菜单C_1_2_1</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_2_2</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_2_3</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_2_4</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_2_5</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_2_6</a></li>
      </ul>
     </li>
     <li><a href="javascript:void(0)">三级菜单C_1_1</a>
      <ul>
       <li><a href="javascript:void(0)">三级菜单C_1_3_1</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_3_2</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_3_3</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_3_4</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_3_5</a></li>
       <li><a href="javascript:void(0)">三级菜单C_1_3_6</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li><a href="javascript:void(0)">三级菜单C_2</a>
    <ul>
     <li><a href="javascript:void(0)">三级菜单C_2_1</a></li>
     <li><a href="javascript:void(0)">三级菜单C_2_2</a></li>
     <li><a href="javascript:void(0)">三级菜单C_2_3</a></li>
     <li><a href="javascript:void(0)">三级菜单C_2_4</a></li>
     <li><a href="javascript:void(0)">三级菜单C_2_5</a></li>
     <li><a href="javascript:void(0)">三级菜单C_2_6</a></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>
</div>
</body>
</html>

　

学习

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 学习JavaScript之this,call,apply

    学习JavaScript之this,call,apply

    2016-01-28 20:45

  • 零基础入门学习Python（10）：函数 - qq_33256568的博客 - 博客频道 - CSDN.NET qq_3

    零基础入门学习Python（10）：函数 - qq_33256568的博客 - 博客频道

    2015-12-15 09:04

  • Swift 2.0学习笔记（Day48）——类型检查与转换 - 关东升 - 博客频道 - CSDN.NET 关东升 iO

    Swift 2.0学习笔记（Day48）——类型检查与转换 - 关东升 - 博客频道

    2015-12-14 18:16

  • 有趣的Ruby-学习笔记1 - 我可以接受失败，但我不能接受放弃。--迈克尔 乔丹 - 博客频道 - CSDN.NET

    有趣的Ruby-学习笔记1 - 我可以接受失败，但我不能接受放弃。--迈克

    2015-12-14 17:17

网友点评
精彩导读
【JavaScript.2】辨析Typeof操作符作用，罗列JS五大数据类型阵容 - 孟东辉 廊坊师范学院信息技术提高班

【JavaScript.2】辨析Typeof操作符作用，罗列

Word Search -- LeetCode - Code Ganker - 博客频道 - CSDN.NET Code

Word Search -- LeetCode - Code Ganker - 博

ubuntu 14.04 安装 minidwep-gtk, aircrack-ng, reaver 搭建抓包环境 - 心

ubuntu 14.04 安装 minidwep-gtk, aircrack-n

求职篇-带我装逼，带我飞 - 巫_1曲待续 - 博客频道 - CSDN.NET 巫_1曲待续 一个人走到任何境地全都是因

求职篇-带我装逼，带我飞 - 巫_1曲待续 - 博

ubuntu thrift 0.9.3编译安装 - Dean Chen的专栏 - 博客频道 - CSDN.NET Dea

ubuntu thrift 0.9.3编译安装 - Dean Chen的

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习