Div+CSS+JS树型菜单(IE6/FF2)

最新推荐文章于 2024-10-02 08:30:00 发布
最新推荐文章于 2024-10-02 08:30:00 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 文章标签： css div ie function firefox class

<!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>Div+CSS+JS树型菜单，可刷新</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}

body { font-size:12px; }

/*定义整个ul菜单的行高和背景色*/
#nav { width:180px; line-height: 24px; list-style-type: none; text-align:left; }

/*==================一级目录===================*/
/*Width(一定要)，否则下面的li会变形*/
#nav a { width: 160px; display: block; padding-left:20px; }

#nav li { background:#CCC; /*一级目录的背景色*/
border-bottom:#FFF 1px solid; /*下面的一条白边*/
float:left; /*float：left,本不应该设置，但由于在Firefox不能正常显示
继承Nav的width,限制宽度，li自动向下延伸*/ }

#nav li a:hover{ background:#CC0000; /*一级目录onMouseOver显示的背景色*/ }
#nav a:link { color:#666; text-decoration:none; }
#nav a:visited { color:#666;text-decoration:none; }
#nav a:hover { color:#FFF;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:160px;
/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/ }

/*下面是二级目录的链接样式*/
#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; /* 二级onmouseover的字体颜色、背景色*/ }

/*==============================*/
#nav li:hover ul { left: auto; }
#nav li.sfhover ul { left: auto; }
#content { clear: left; }

/*此节，用来控制菜单是否全部展开，如果注释掉，菜单就全部展开，在调试程序时有用。*/
#nav ul.collapsed { display: none; }

#PARENT{ width:300px; padding-left:20px; }

-->
</style>
</head>

<body>
<div id="PARENT"> <ul id="nav">

<li><a href="#Menu=ChildMenu1" οnclick="DoMenu('ChildMenu1')">分类一</a>
<ul id="ChildMenu1" class="collapsed">
<li><a href="http://www.luoyeju.cn" target="_blank">栏目1</a></li>
<li><a href="http://www.luoyeju.cn" target="_blank">栏目2</a></li>
<li><a href="http://www.luoyeju.cn" target="_blank">栏目3</a></li>
</ul>
</li>

<li><a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">分类二</a>
<ul id="ChildMenu2" class="collapsed">
<li><a href="http://www.luoyeju.cn" target="_blank">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
<li><a href="#">栏目5</a></li>
</ul>
</li>

<li><a href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">分类三</a>
<ul id="ChildMenu3" class="collapsed">
<li><a href="#">栏目1</a></li>
<li><a href="http://www.luoyeju.cn" target="_blank">栏目2</a></li>
<li><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
</ul>
</li>

<li><a href="#Menu=ChildMenu4" οnclick="DoMenu('ChildMenu4')">分类四</a>
<ul id="ChildMenu4" class="collapsed">
<li><a href="#">栏目1</a></li>
<li><a href="http://www.luoyeju.cn" target="_blank">栏目2</a></li>
<li><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
</ul> </li>

</ul>
</div>
</body></html>

<script type=text/javascript>
<!--
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("Nav").getElementsByTagName("li");
for (var i=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(new RegExp("( ?|^)sfhover//b"), "");
}
}
}

function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
/*注释这一部分，目的是取消自动关闭上一个菜单的功能
if(LastLeftID!="")
{ document.getElementById(LastLeftID).className = "collapsed"; } */
LastLeftID = emid }

function GetMenuID()
{
var MenuID="";
var _paramStr = new String(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 = new Array(_paramArr.length); }
//取所有#后面的，菜单只需用到Menu
//for (var i = 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>

我把金钱献给你
关注
专栏目录
css+js漂亮 二级横向导航菜单-大全
04-24
css+js 漂亮二级横向导航菜单-大全 样式多，供你选择
DIV+CSS+JS二级菜单
zhouzhenxing_0421的专栏
11-27 435
[code="html"] &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> DIV+CSS+JS二级菜单 &lt;style type="text/css"> #PARE..
原生JS无限级树形菜单（兼容各浏览器）
01-10
原生JS写的无限级树形菜单(包含文件：otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。 可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） 更多功能参见demo.html和demo1.html
利用JQuery实现网页左侧树形菜单(IE6测试通过)
chuzhenbin的专栏
03-16 3534
本次实验项目结构图:   1. 定义保存菜单数据的表结构 CREATE TABLE `tb_com_menu_info` ( `MENU_ID` varchar(8) NOT NULL, `MENU_NAME` varchar(30) DEFAULT NULL, `MENU_LINK` varchar(100) DEFAULT NULL, `MLEVEL` int(1
【jQuery】兼容IE6树形组件jquery-treeview-master
编程记录，亲测有效
01-07 2410
有时候，利用树形组件做导航也不失为一种好的想法，但树形组件，如果真要自己从0开始写，有点蛋疼。然而，jQuery中是直接有树形组件可以使用的。 以下是该组件在IE6的树形组件的测试效果，毫无障碍地兼容，而且美观： 要使用这个树形组件jquery-treeview-master，首先到它的官网（点击打开链接）上下载： 下载之后，解压，取走其中的jquery.treeview.j
Div+CSS+JS树型菜单
淮海工学院 缠小溪(Java/C++)
06-04 674
在网上找了一个Div+CSS+JS树型菜单，测试了一下在FF下有点问题，但是基本的功能都有了，收藏一下，学习学习。 Div+CSS+JS树型菜单，可刷新 <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav {
DIV+CSS+JS树形菜单
宏桥科技------PowerBridge
07-16 190
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;Div+CSS+JS树型菜单&lt;/title&gt; &lt;meta name="description&
CSS+DIV+JS树形2层菜单,支持FF
管子（zero）的杂乱空间
09-13 1308
  <!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--> Div+CSS+JS树型菜单，可刷新
CSS树形菜单
07-19 312
CSS树形菜单 不错的CSS树形菜单，树状列表，当然不全是CSS实现，部分功能还使用了JavaScript代码进行配合，删减了修饰用的菜单图片，大家用的时候自己图片加进去，IMG标签大部分都预留了出来，稍懂Html语法的朋友很容易就看懂的。 <!DO...
css实现的目录树型导航菜单
iteye_10902的博客
03-20 789
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
带数据库的ajax+asp无限级分类树型结构,好东西别错过
anjichan4261的博客
06-30 129
IE测试通过，FF有点小BUG Cls_Leibie.asp <% '数据库字段为类属性，添加、删除、修改、操作检查等函数为类的方法 Class Cls_Leibie Private nClassID,sClassName,nParentID,sParentPath,nDepth,nRootID,nChild,nOrderID,sFilePath '定义私有变量（类...
Jstree树形控件实现树形结构展示+自定义节点图标
Cmexico的专栏
12-25 1万+
因项目中用到树形展示数据功能，所以决定使用Jstree（jstree_pre1.0_fix_1）辅助前端展示，使用过程中，大部分参考官方doc和demo实现，由于需要自定义节点图片，起初着实纠结了很久，不过后来无意中看到网上一篇asp的帖子，构建方法，便摸索着修改了些源码，实现了自定义节点图标(下面会贴出相关代码).由于对此控件没有深入研究，所以有理解有误或者使用有误的地方，还请各位指教。 后台
树形菜单Demo
chinasoftosg的专栏
08-27 1678
menu.jsp:  String path = request.getContextPath();  String basePath = request.getScheme() + "://"    + request.getServerName() + ":" + request.getServerPort()    + path + "/"; %>  css/menu
五个最新的CSS特性以及如何使用它们
大前端
07-27 426
虽然CSS简单，但CSS是一门非常有意思的语言，CSS每年都有变化，而且都有不同的博主都在不同的时间段总结一些CSS的新特性。虽然这些新特性无法立刻得到众多浏览器的支持，但总是随着时间的发展，这些特性都会得到浏览器的支持。哪怕未得到支持，也有一些方法让浏览器支持，比如最为出外的cssnext，就可以让很多未来的CSS特性就立马使用，并且不用花太多时间来考虑浏览器的兼容性。 接下来要介绍的五个CSS...
用jquery模拟select实现下拉树形菜单。
热门推荐
08-31 2万+
之前随便写写，发现需要的人挺多，抽了点时间写了个完整的已上次到资源。  http://download.csdn.net/source/3461323首先感谢http://www.codesky.net/article/doc/200810/200810166672871.htm 的作者。控件原理就请到原文去看了。网上找了一下。etx也有类似的控件，无奈它的类库实在是不小，就自己封装了一个。HTM
网页常用JavaScript代码
Working_Harder的专栏
10-01 1万+
<script>// 弹出窗体 var url = "http://www.baidu.com"; win=window.showModalDialog(url,window,"dialogLeft:400;dialogTop:200;dialogWidth:560px;dialogHeight:380px;scroll:yes;menubar:no;toolbar:no;status:no
CSS中的flex概述
最新发布
学无止境
10-02 311
例如，当容器空间小于子元素的总宽度（或高度）时，子元素将按照。（默认值，当子元素未设置交叉轴方向的尺寸时）：子元素沿交叉轴方向拉伸，填满容器。：行（列）沿交叉轴均匀分布，每行（列）之间以及与容器边缘的间隔都相等。：子元素沿主轴均匀分布，每个子元素之间以及与容器边缘的间隔都相等。：行（列）沿交叉轴均匀分布，两端的行（列）与容器边缘对齐。：行（列）沿交叉轴均匀分布，每行（列）两侧都有相等的间隔。：子元素沿主轴均匀分布，每个子元素两侧都有相等的间隔。：子元素沿主轴均匀分布，两端的子元素与容器边缘对齐。
超级完美的DIV+CSS+JS二级树形菜单，刷新保持展开状态
"该资源提供了一个使用HTML、CSS和JavaScript实现的二级树型菜单解决方案，特别强调了在菜单展开后刷新页面不会影响菜单状态。原始代码存在一个问题，即#nav li的背景色设置未生效，但经过修正后，背景色问题已得到...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值