`
chixianhuadeyu
  • 浏览: 66516 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

树形菜单

    博客分类：
  • ajax
XHTMLHTML 
阅读更多
第一种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>nav</title> 
<script type="text/javascript"> 
<!--  
startList = function() {  
  if (document.all&&document.getElementById) {  
    navRoot = document.getElementById("nav");  
    for (i=0; i<navRoot.childNodes.length; i++) {  
      node = navRoot.childNodes[i];  
      if (node.nodeName=="li") {  
        node.onmouseover=function() {  
          this.className+="on";   
        }   
        node.onmouseout=function() {  
          thisthis.className=this.className.replace("on", "");   
        }  
      }  
    }  
  }  
}  
window.onload=startList;  
--> 
</script> 
<style type="text/css"> 
<!--  
body {  
  font-size: 12px   
  font-family: Arial,Verdana,Helvetica,sans-serif;  
}  
 
ul{  
  margin: 0;  
  padding: 0;  
  list-style: none;  
  width: 200px;  
}  
 
ul li {  
  position: relative;  
}  
 
ul li ul {  
  position: absolute;  
  left: 199px;  
  top: 0;  
  display: none;  
  list-style: none;  
  width: 200px;  
  margin: 0;  
  padding: 0;  
}  
 
ul li a {  
  display: block;  
  text-decoration: none;  
  background: #cccccc;  
  padding:5px 0 5px 20px;  
  border: 1px solid #ffffff;  
  border-bottom: 0;  
  color:#666666;  
}  
 
ul li a:hover {  
  background: #cc0000;  
  color:#ffffff;  
  font-weight:bold;  
}  
 
* html ul li {  
  float: left;  
  height: 1%;  
}  
* html ul li a {  
  height: 1%;  
}  
 
li:hover ul, li.on ul {  
  display: block;  
}   
 
--> 
</style> 
</head> 
 
<body> 
<ul id="nav"> 
    <li><a href="#">menu1</a> 
        <ul class="nav2"> 
            <li><a href="#">first</a></li> 
            <li><a href="#">second</a></li> 
        </ul> 
    </li> 
    <li><a href="#">menu2</a> 
        <ul class="nav2"> 
            <li><a href="#">first</a></li> 
            <li><a href="#">second</a></li> 
            <li><a href="#">third</a></li> 
        </ul> 
    </li> 
    <li><a href="#">menu3</a> 
        <ul class="nav2"> 
            <li><a href="#">first</a></li> 
            <li><a href="#">second</a></li> 
            <li><a href="#">third</a></li> 
            <li><a href="#">forth</a></li> 
            <li><a href="#">fifth</a></li> 
        </ul> 
    </li> 
    <li><a href="#">menu4</a> 
        <ul class="nav2"> 
            <li><a href="#">first</a></li> 
            <li><a href="#">second</a></li> 
            <li><a href="#">third</a></li> 
            <li><a href="#">forth</a></li> 
            <li><a href="#">fifth</a></li> 
            <li><a href="#">sixth</a></li> 
        </ul> 
    </li> 
</ul> 
</body> 
</html>

第二种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>nav</title> 
<script type=text/javascript> 
<!--  
var LastLeftID = "";  
 
function DoMenu(emid){  
    var obj = document.getElementById(emid);   
    obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");  
    if((LastLeftID!="")&&(emid!=LastLeftID)){  
        document.getElementById(LastLeftID).className = "collapsed";  
    }  
        LastLeftID = emid;  
}  
--> 
</script> 
 
<style type="text/css"> 
<!--  
body {  
font-family: Arial,Verdana,Helvetica,sans-serif;  
font-size:12px;  
}  
#nav {  
width:180px;  
list-style-type: none;  
text-align:left;  
margin:10px 0 0 10px;  
}  
 
#nav a {  
width: 180px;   
display: block;  
padding:5px 0 5px 20px;  
}  
 
#nav li {  
background:#cccccc;  
border-bottom:#ffffff 1px solid;  
float:left;  
}  
 
#nav li a:hover{  
background:#cc0000;  
}  
 
#nav a:link  {  
color:#666;  
text-decoration:none;  
}  
 
#nav a:visited  {  
color:#666;  
text-decoration:none;  
}  
 
#nav a:hover  {  
color:#ffffff;  
text-decoration:none;  
font-weight:bold;  
}  
 
#nav li ul {  
list-style:none;  
text-align:left;  
}  
 
#nav li ul li{   
background: #ebebeb;  
}  
 
#nav li ul a{  
padding-left:20px;  
width:180px;  
}  
 
#nav li ul a:link  {  
color:#666;  
text-decoration:none;  
}  
#nav li ul a:visited  {  
color:#666;  
text-decoration:none;  
}  
#nav li ul a:hover {  
color:#f3f3f3;  
text-decoration:none;  
font-weight:normal;  
background:#cc0000;  
}  
 
#nav li:hover ul {  
left: auto;  
}  
#nav li.sfhover ul {  
left: auto;  
}  
#content {  
clear: left;   
}  
#nav ul.collapsed {  
display: none;  
}  
--> 
</style> 
</head> 
<body> 
<ul id="nav"> 
    <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">menu1</a> 
         <ul id="ChildMenu1" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">menu2</a> 
         <ul id="ChildMenu2" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">menu3</a> 
         <ul id="ChildMenu3" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">menu4</a> 
         <ul id="ChildMenu4" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
</ul> 
</body> 
</html> 
分享到：
| Java通过Jolt调用Tuxedo服务
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    树形菜单树形菜单树形菜单树形菜单

    关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的...

    HTML树形菜单

    树形菜单

    JS无限级树形菜单

    JS无限级树形菜单3种

    java树形菜单

    该文档是用java代码编写的winfrom树形菜单。可以当模板用

    超多类型的JS 树形菜单

    JS树形菜单是很常用的JS特效代码，常用在管理软件当中，但是一套树形菜单已经不能满足需求，所以如果能有一套比较全面的树形菜单JS特效代码，将会非常方便，下面懒人萱将超全的JS树形菜单（dhtmlxTree）共享出来，...

    经典的树形菜单源码经典的树形菜单源码

    树形代码经典的树形菜单源码经典的树形菜单源码经典的树形菜单源码经典的树形菜单源码

    原生JS无限级树形菜单（兼容各浏览器）

    原生JS写的无限级树形菜单(包含文件：otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/...

    java动态树形菜单

    java实现的jsp动态树形菜单功能 简单的一个例子 代码全面 功能完善

    第十五节Tree树形菜单组件运用.docx

    第十五节Tree树形菜单组件运用.docx第十五节Tree树形菜单组件运用.docx第十五节Tree树形菜单组件运用.docx第十五节Tree树形菜单组件运用.docx第十五节Tree树形菜单组件运用.docx第十五节Tree树形菜单组件运用.docx第...

    CSS树形菜单

    前端树形菜单源码，前端树形菜单源码，前端树形菜单源码

    javascript 树形菜单

    树形菜单 树形菜单树形菜单 树形菜单树形菜单 树形菜单树形菜单 树形菜单

    好看实用js树形菜单

    好看实用js树形菜单，纯JS制作，有打开和关闭功能

    javascript制作 树形菜单.zip

    js制作 树形菜单.zip

    基于vue封装的树形菜单.zip

    基于vue封装的树形菜单，已实现单选、复选、级联中选、单选前回调、单选事件、复选事件，异步加载等功能，简单好用，欢迎下载demo。 基于vue封装的树形菜单，已实现单选、复选、级联中选、单选前回调、单选事件、...

    简单树形菜单实现(支持IE等浏览器)

    简单树形菜单实现，简单树形菜单实现，简单树形菜单实现，简单树形菜单实现，简单树形菜单实现，简单树形菜单实现

    JavaScript 树形菜单

    JavaScript 树形菜单JavaScript 树形菜单JavaScript 树形菜单

    jquery树形菜单例子

    快速上手Jquery树形菜单 jquery树形菜单例子 树形菜单 jquery jquery插件

    Unity TreeView树形菜单

    Unity 树形菜单，TreeView组件，自定义的美化TreeView源码和对应demo，样式好看，对初学者是很好的学习资料，然后也可用于Unity项目中

    ajax树形菜单 动态显示

    ajax树形菜单 动态显示菜单内容，避免加载不需要的东西

    微信小程序 树形菜单组件

    微信小程序 树形菜单组件 存放路径：/components/treeList/treeList listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： ...

Magicbox
Global site tag (gtag.js) - Google Analytics