CSS+DIV+JS树形2层菜单

最新推荐文章于 2024-11-08 11:27:29 发布
最新推荐文章于 2024-11-08 11:27:29 发布
阅读量107 收藏
点赞数
文章标签： CSS Firefox .net JavaScript XHTML ViewUI
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>Div+CSS+JS树型菜单，可刷新</title>
<metaname="description"content="http://www.livepo.com">
<styletype="text/css">
<!--
*{margin:0;padding:0;border:0;}
body{font-family:arial,宋体,serif;font-size:12px;}
#nav{width:180px;line-height:24px;list-style-type:none;text-align:left;/*定义整个ul菜单的行高和背景色*/}
/*==================一级目录===================*/
#nava{width:160px;display:block;padding-left:20px;/*Width(一定要)，否则下面的Li会变形*/}
#navli{background:#CCC;/*一级目录的背景色*/border-bottom:#FFF1pxsolid;/*下面的一条白边*/float:left;/*float：left,本不应该设置，但由于在Firefox不能正常显示继承Nav的width,限制宽度，li自动向下延伸*/}
#navlia:hover{background:#CC0000;/*一级目录onMouseOver显示的背景色*/}
#nava:link{color:#666;text-decoration:none;}
#nava:visited{color:#666;text-decoration:none;}
#nava:hover{color:#FFF;text-decoration:none;font-weight:bold;}
/*==================二级目录===================*/
#navliul{list-style:none;text-align:left;}
#navliulli{background:#EBEBEB;/*二级目录的背景色*/}
#navliula{padding-left:20px;width:160px;/*padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/}
/*下面是二级目录的链接样式*/
#navliula:link{color:#666;text-decoration:none;}
#navliula:visited{color:#666;text-decoration:none;}
#navliula:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#CC0000;/*二级onmouseover的字体颜色、背景色*/}
/*==============================*/
#navli:hoverul{left:auto;}
#navli.sfhoverul{left:auto;}
#content{clear:left;}
#navul.collapsed{display:none;}
#PARENT{width:300px;padding-left:20px;}
/*==================三级目录===================*/
#navliulliul{list-style:none;text-align:left;}
#navliulliulli{background:#EBEBEB;/*二级目录的背景色*/}
#navliulliullia{padding-left:20px;width:160px;/*padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/}
/*下面是二级目录的链接样式*/
#navliulliullia:link{color:#666;text-decoration:none;}
#navliulliullia:visited{color:#666;text-decoration:none;}
#navliulliullia:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#CC0000;/*二级onmouseover的字体颜色、背景色*/}
-->
</style>
</head>

<body>
<divid="PARENT">

<ulid="nav">

<li><ahref="#Menu=ChildMenu1"οnclick="DoMenu('ChildMenu1')">1</a>
<ulid="ChildMenu1"class="collapsed">
<li><ahref="http://www.netany.net"target="_blank">11</a></li>
<li><ahref="http://www.netany.net"target="_blank">12</a></li>
<li><ahref="http://www.netany.net"target="_blank">13</a></li>
<li><ahref="http://www.netany.net"target="_blank">14</a></li>
</ul>
</li>

<li><ahref="#Menu=ChildMenu2"οnclick="DoMenu('ChildMenu2')">2</a>
<ulid="ChildMenu2"class="collapsed">
<li><ahref="#">21</a></li>
<li><ahref="#">22</a></li>
<li><ahref="#">23</a></li>
<li><ahref="#">24</a></li>
<li><ahref="#">25</a></li>
<li><ahref="#">26</a></li>
<li><ahref="#">27</a></li>
<li><ahref="#">28</a></li>
</ul>
</li>

<li><ahref="#Menu=ChildMenu3"οnclick="DoMenu('ChildMenu3')">3</a>
<ulid="ChildMenu3"class="collapsed">
<li><ahref="#">b1</a></li>
<li><ahref="#">b2</a></li>
<li><ahref="#">b3</a></li>
</ul>
</li>

<li><ahref="#Menu=ChildMenu4"οnclick="DoMenu('ChildMenu4')">4</a>
<ulid="ChildMenu4"class="collapsed">
<li><ahref="#">c1</a></li>
<li><ahref="#">c2</a></li>
<li><ahref="#">c3</a></li>
</ul>
</li>

<li><ahref="#Menu=ChildMenu5"οnclick="DoMenu('ChildMenu5')">5</a>
<ulid="ChildMenu5"class="collapsed">
<li><ahref="#">d1</a></li>
<li><ahref="#">d2</a></li>
<li><ahref="#">d3</a></li>
</ul>
</li>

<li><ahref="#Menu=ChildMenu6"οnclick="DoMenu('ChildMenu6')">6</a>
<ulid="ChildMenu6"class="collapsed">
<li><ahref="#">e1</a></li>
<li><ahref="#">e2</a></li>
<li><ahref="#">e3</a></li>
</ul>
</li>

<li><ahref="#Menu=ChildMenu7"οnclick="DoMenu('ChildMenu7')">7</a>
<ulid="ChildMenu7"class="collapsed">
<li><ahref="#">f1</a></li>
<li><ahref="#">f2</a></li>
<li><ahref="#">f3</a></li>
</ul>
</li>

<li><ahref="#Menu=ChildMenu8"οnclick="DoMenu('ChildMenu8')">8</a>
<ulid="ChildMenu8"class="collapsed">
<li><ahref="#">f1</a></li>
<li><ahref="#">f2</a></li>
<li><ahref="#">f3</a></li>
</ul>
</li>

</ul>
</div>
</body>
</html>
<scripttype=text/javascript><!--
varLastLeftID="";

functionmenuFix(){
varobj=document.getElementById("nav").getElementsByTagName("li");

for(vari=0;i<obj.length;i++){
obj[i].οnmοuseοver=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
obj[i].onMouseDown=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
obj[i].onMouseUp=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
obj[i].οnmοuseοut=function(){
this.className=this.className.replace(newRegExp("(?|^)sfhover\\b"),"");
}
}
}

functionDoMenu(emid)
{
varobj=document.getElementById(emid);
obj.className=(obj.className.toLowerCase()=="expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID))//关闭上一个Menu
{
document.getElementById(LastLeftID).className="collapsed";
}
LastLeftID=emid;
}

functionGetMenuID()
{

varMenuID="";
var_paramStr=newString(window.location.href);

var_sharpPos=_paramStr.indexOf("#");

if(_sharpPos>=0&&_sharpPos<_paramStr.length-1)
{
_paramStr=_paramStr.substring(_sharpPos+1,_paramStr.length);
}
else
{
_paramStr="";
}

if(_paramStr.length>0)
{
var_paramArr=_paramStr.split("&");
if(_paramArr.length>0)
{
var_paramKeyVal=_paramArr[0].split("=");
if(_paramKeyVal.length>0)
{
MenuID=_paramKeyVal[1];
}
}
/*
if(_paramArr.length>0)
{
var_arr=newArray(_paramArr.length);
}

//取所有#后面的，菜单只需用到Menu
//for(vari=0;i<_paramArr.length;i++)
{
var_paramKeyVal=_paramArr[i].split('=');

if(_paramKeyVal.length>0)
{
_arr[_paramKeyVal[0]]=_paramKeyVal[1];
}
}
*/
}

if(MenuID!="")
{
DoMenu(MenuID)
}
}

GetMenuID();//*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
--></script>
iteye_6481
关注
html用div做出一颗树的效果,如何用js代码绘制一棵树
weixin_39582656的博客
06-04 659
本篇文章给大家分享的内容是如何用js代码绘制一棵树 ，有着一定的参考价值，有需要的朋友可以参考一下第一步新建HTML文档：/*设置body样式*/body{overflow:hidden;background: black;}第二步建一个js文档：//创建画布var mycanvas=document.createElement("canvas");//设置树的宽度和高度mycanvas.widt...
DIV+CSS+JS实现树形菜单
我笔记
01-22 1032
&lt;html &gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Div+CSS+JS树型菜单，可刷新&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0
自适应分辨率可扩展二层JS下拉层菜单
flynetcn的专栏
11-28 2068
自适应分辨率可扩展二层JS下拉菜单作者：黑眼圈的猪序言：随着互联网的普及和网页制作技术的发展，越来越多的网友开始制作自己的网站。做为网站最重要的部分—导航菜单也出现了各式各样的设计和制作方法。其 中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式。那么，在下面我将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率 可扩展二层JS下拉菜单”的工作原理和使用方法。1、
Div+CSS+JS树型菜单，可刷新
liusen5555的专栏
08-28 538
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Div+CSS+JS树型菜单，可刷新http://www.livepo.com">*{margin:0;padding:0;border:0;}body { font-family: arial, 宋体, serif; fon
DIV+CSS构成的树型菜单
拓
09-08 701
DIV+CSS构成的树型菜单效果图：可以折叠的。源代码：DIV+CSS构成的树型菜单<!--body {margin: 0px;padding: 0;font: 12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;text-al
js修改select、2层的第二次
你是我永远的少年
10-20 629
var selects = document.getElementById("departId"); for(var index = 0; index < departList.length; index++) { var Option = document.createElement("OPTION"); Option.text=depart
DIV+CSS+JS树形菜单
07-27
标题中的“DIV+CSS+JS树形菜单”指的是在网页设计中使用HTML的`<div>`元素、CSS样式以及JavaScript脚本来实现一种交互式的树状菜单。这种菜单通常用于网站的导航，允许用户通过展开和折叠节点来浏览多级结构的内容。...
Div+Css+js树形菜单
01-05
本项目以“Div+Css+js树形菜单”为主题，利用HTML的Div元素、CSS样式和JavaScript脚本来实现一个功能完备、视觉效果良好的树形菜单。 首先，Div是HTML中的一个布局容器，用于组织和控制页面内容的布局。在树形菜单...
Div+CSS+JS 三级树形菜单
09-25
Div+CSS+JS的三级树形菜单，很实用的。 一级菜单可以同时展开，二级菜单只能展开一个，其他自动关闭。 bitding 修正版。
html树形菜单折叠 css,JS+CSS简单树形菜单实现方法
weixin_42099070的博客
06-03 871
本文实例讲述了JS+CSS简单树形菜单实现方法。分享给大家供大家参考。具体如下：这是一款不错的CSS树形菜单，树状列表，当然不全是CSS实现，部分功能还使用了JavaScript代码进行配合，删减了修饰用的菜单图片，大家用的时候自己图片加进去，IMG标签大部分都预留了出来，稍懂Html语法的朋友很容易就看懂的。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w...
easyui 简单tree，只有两层节点
lindiwo的博客
01-22 616
由于工作需要想要做成如下图效果的界面，如下图，左边的是树结构，右边的是树二级结构下面对应的关联的数据。 关于树的二级数据，如下： <div id="orgTree" class="easyui-tree" style="margin: 20px 0 0 0" data-options="url:CTX_PATH+'hr/labor/basicdispatch/basicD
二级下拉菜单布局（纵向、横向）
热门推荐
Number7421的博客
04-27 2万+
一级菜单在ul列表内建立li元素并清除默认样式让所有li元素左浮动并清除浮动DOM中文档结构如下：&lt;ul class="clearfix"&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;2&
了解 .NET 运行时与 .NET 框架：基础概念与相互关系
Leo的博客
11-06 1248
NET框架是由微软开发的一个完整的软件开发平台，它为开发者提供了用于构建、运行和部署应用程序的基础设施。自2002年首次发布以来，.NET框架成为了许多开发者用来构建 Windows 平台应用（例如桌面应用、Web 应用、企业级应用等）的一项核心技术。类库：.NET框架包含大量的预构建类库，开发者可以直接利用这些库来实现常见的功能（例如文件操作、数据库访问、用户界面设计、网络通信等）。这些类库帮助开发者加速开发过程，避免重复造轮子。
.NET6中WPF项目添加System.Windows.Forms引用
最新发布
^@^lemon tea^@^
11-08 178
.NET6中WPF项目添加System.Windows.Forms引用
.Net IOC理解及代码实现
lvxingzhe3的博客
11-07 568
.NET IOC理解与代码实现(帮助初学者对IOC更全面深入理解)
FastReport将停止 .NET Framework 上的 WebReport 更新
励志做最业余的专业博主，控件产品可以私我~
11-06 548
从2024/ 12 /1 日起，Fastreport将停止发布更新和提供对 FastReport.Web (.NET Framework) 的技术支持。
超级完美的DIV+CSS+JS二级树形菜单，刷新保持展开状态
"该资源提供了一个使用HTML、CSS和JavaScript实现的二级树型菜单解决方案，特别强调了在菜单展开后刷新页面不会影响菜单状态。原始代码存在一个问题，即#nav li的背景色设置未生效，但经过修正后，背景色问题已得到...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值