html与js 如何实现树形菜单

用z-tree插件

①带有父子关系的标准

zTreeNodes

举例:

Js代码

1.var zTreeNodes = [

2.{“id”:1, “name”:”test1″, “nodes”:[

3.{“id”:11, “name”:”test11″, “nodes”:[

4.{“id”:111, “name”:”test111″}

5.”id”:12, “name”:”test12″}

②带有父子关系的简单

Array

格式

(isSimpleData)的zTreeNodes

举例:

Js代码

1.var treeNodes = [

2. {“id”:1, “pId”:0, “name”:”test1″},

3.{“id”:11, “pId”:1, “name”:”test11″},

4. {“id”:12, “pId”:1, “name”:”test12″},

5. {“id”:111, “pId”:11, “name”:”test111″},

例子:

(Java代码)

①在页面引用

zTree的js和css:

Html代码

1.

<!– ZTree树形插件 –>

2.<link

rel=”stylesheet”

href=”<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css”type

=”text/css”>

3.<!– <link rel=”stylesheet” href=”<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css” type=”text/css”> –>

4.<script ype=”text/javascript”src=”<%=root%>/Web/common/js/jquery-ztree-2.5.min.js”

></script>

谁可以帮我做一个html的一个菜单树形

这个就是多级树型菜单的伸缩问题

<br><SPAN><IMG

id=”Image_Closed”

style=”DISPLAY:

none”

onclick=”this.style.display=’none’;

Text_Closed.style.display=’inline’;

Image_Open.style.display=’inline’;

Text_Open.style.display=’inline’;”

src=”pic/m_o.gif”><IMG

id=”Image_Open<%=

i

%>”

onclick=”this.style.display=’none’;

Image_Closed.style.display=’inline’;

Text_Open.style.display=’none’;

Text_Closed.style.display=’inline’;”

src=”pic/m_c.gif”></SPAN>

<SPAN

id=”Text_Closed”>系统管理

<SPAN

id=”Text_Open”

style=”DISPLAY:

none;”>

‘主要是这句话进行修改下

<SPAN>

<br>

<IMG

src=”pic/m_c.gif”

/>管理用户<br>

</SPAN>

</SPAN>

</SPAN>

其他子目录依此设置

求解:初学者 也就刚刚学到HTML的定义列表 用ul dl ol 做出 树形菜单

直接用<ul><li>标签嵌套能实现,你去试试

<body>

<ul>

<li>我的电脑

<ul>

<li>本地磁盘(C)

<ul>

<li>我的文档</li>

<li>我的收藏</li>

</ul>

</li>

<li>本地磁盘(D)

<ul>

<li>我的游戏</li>

<li>我的资料</li>

<li>我的电影</li>

</ul>

</li>

</ul>

</li>

</body>

关于HTML树形菜单

给分~~~谢谢~

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<!– saved from url=(0046) –>

<HTML><HEAD><TITLE>New Page 28</TITLE>

<META http-equiv=Content-Type content=”text/html; charset=gb2312″>

<META content=”MSHTML 6.00.2800.1491″ name=GENERATOR>

<META content=FrontPage.Editor.Document name=ProgId>

<STYLE>#ssm2 A {

FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none

}

#ssm2 A:hover {

COLOR: #ccff33

}

body{background:url() no-repeat right center fixed;}

</STYLE>

</HEAD>

<BODY>

<SCRIPT language=JavaScript1.2>

function MM_displayStatusMsg(msgStr) {

status=msgStr;

document.MM_returnValue = true;

}

function highlight(x){

document.forms[x].elements[0].focus()

document.forms[x].elements[0].select()

}

function MM_jumpMenu(targ,selObj,restore){

eval(targ+”.location='”+selObj.options[selObj.selectedIndex].value+”‘”);

if (restore) selObj.selectedIndex=0;

}

var NS

IE=document.all;

NS=document.layers;

hdrFontFamily=”Verdana”;

hdrFontSize=”2″;

hdrFontColor=”white”;

hdrBGColor=”#CCCCCC”;

linkFontFamily=”Verdana”;

linkFontSize=”2″;

linkBGColor=”white”;

linkOverBGColor=”#CCCCCC”;

linkTarget=”_top”;

YOffset=60;

staticYOffset=20;

menuBGColor=”#CCCCCC”;

menuIsStatic=”no”;

menuHeader=”Main Index”

menuWidth=150; // Must be a multiple of 5!

staticMode=”advanced”

barBGColor=”#C0C0C0″;

barFontFamily=”Verdana”;

barFontSize=”2″;

barFontColor=”white”;

barText=”MENU”;

function moveOut() {

if (window.cancel) {

cancel=””;

}

if (window.moving2) {

clearTimeout(moving2);

moving2=””;

}

if ((IE ssm2.style.pixelLeft<0)||(NS document.ssm2.left<0)) {

if (IE) {ssm2.style.pixelLeft += (5%menuWidth);

}

if (NS) {

document.ssm2.left += (5%menuWidth);

}

moving1 = setTimeout(‘moveOut()’, 5)

}

else {

clearTimeout(moving1)

}

};

function moveBack() {

cancel = moveBack1()

}

function moveBack1() {

if (window.moving1) {

clearTimeout(moving1)

}

if ((IE ssm2.style.pixelLeft>(-menuWidth))||(NS document.ssm2.left>(-150))) {

if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);

}

if (NS) {

document.ssm2.left -= (5%menuWidth);

}

moving2 = setTimeout(‘moveBack1()’, 5)}

else {

clearTimeout(moving2)

}

};

lastY = 0;

function makeStatic(mode) {

if (IE) {winY = document.body.scrollTop;var NM=ssm2.style

}

if (NS) {winY = window.pageYOffset;var NM=document.ssm2

}

if (mode==”smooth”) {

if ((IE||NS) winY!=lastY) {

smooth = .2 * (winY – lastY);

if(smooth > 0) smooth = Math.ceil(smooth);

else smooth = Math.floor(smooth);

if (IE) NM.pixelTop+=smooth;

if (NS) NM.top+=smooth;

lastY = lastY+smooth;

}

setTimeout(‘makeStatic(“smooth”)’, 1)

}

else if (mode==”advanced”) {

if ((IE||NS) winY>YOffset-staticYOffset) {

if (IE) {NM.pixelTop=winY+staticYOffset

}

if (NS) {NM.top=winY+staticYOffset

}

}

else {

if (IE) {NM.pixelTop=YOffset

}

if (NS) {NM.top=YOffset-7

}

}

setTimeout(‘makeStatic(“advanced”)’, 1)

}

}

function init() {

if (IE) {

ssm2.style.pixelLeft = -menuWidth;

ssm2.style.visibility = “visible”

}

else if (NS) {

document.ssm2.left = -menuWidth;

document.ssm2.visibility = “show”

}

else {

alert(‘Choose either the “smooth” or “advanced” static modes!’)

}

}

function MM_displayStatusMsg(msgStr) {

status=msgStr;

document.MM_returnValue = true;

}

</SCRIPT>

<SCRIPT language=JavaScript1.2>

if (IE) {document.write(‘<DIV ID=”ssm2″ style=”visibility:hidden;Position : Absolute ;Left : 0px ;Top : ‘+YOffset+’px ;Z-Index : 20;width:1px” onmouseover=”moveOut()” onmouseout=”moveBack()”>’)}

if (NS) {document.write(‘<LAYER visibility=”hide” top=”‘+YOffset+'” name=”ssm2″ bgcolor=”‘+menuBGColor+'” left=”0″ onmouseover=”moveOut()” onmouseout=”moveBack()”>’)}

tempBar=””

for (i=0;i<barText.length;i++) {

tempBar+=barText.substring(i, i+1)+”<BR>”}

document.write(‘<table border=”0″ cellpadding=”0″ cellspacing=”1″ width=”‘+(menuWidth+16+2)+'” bgcolor=”‘+menuBGColor+'”><tr><td bgcolor=”‘+hdrBGColor+'” WIDTH=”‘+menuWidth+'”> <font face=”‘+hdrFontFamily+'” Size=”‘+hdrFontSize+'” COLOR=”‘+hdrFontColor+'”><b>’+menuHeader+'</b></font></td><td align=”center” rowspan=”100″ width=”16″ bgcolor=”‘+barBGColor+'”><p align=”center”><font face=”‘+barFontFamily+'” Size=”‘+barFontSize+'” COLOR=”‘+barFontColor+'”><B>’+tempBar+'</B></font></p></TD></tr>’)

function addItem(text, link, target) {

if (!target) {target=linkTarget}

document.write(‘<TR><TD BGCOLOR=”‘+linkBGColor+'” onmouseover=”bgColor=\”+linkOverBGColor+’\'” onmouseout=”bgColor=\”+linkBGColor+’\'”><ILAYER><LAYER onmouseover=”bgColor=\”+linkOverBGColor+’\'” onmouseout=”bgColor=\”+linkBGColor+’\'” WIDTH=”100%”><FONT face=”‘+linkFontFamily+'” Size=”‘+linkFontSize+'”> <A HREF=”‘+link+'” target=”‘+target+'” CLASS=”ssm2Items”>’+text+'</A></FONT></LAYER></ILAYER></TD></TR>’)}

function addHdr(text) {

document.write(‘<tr><td bgcolor=”‘+hdrBGColor+'” WIDTH=”140″> <font face=”‘+hdrFontFamily+'” Size=”‘+hdrFontSize+'” COLOR=”‘+hdrFontColor+'”><b>’+text+'</b></font></td></tr>’)}

//Only edit the script between HERE

addItem(‘偶和叶子’, ”, ”);

addItem(‘聆听心海’, ”, ”);

addItem(‘风言风语’, ”, ”);

addItem(‘风行风影’, ”, ”);

addItem(‘雁过留声’, ”, ‘_blank’);

addHdr(‘WELCOME TO’);

addItem(‘经广俱乐部’, ”, ‘_blank’);

// and HERE! No more!

document.write(‘<tr><td bgcolor=”‘+hdrBGColor+'”><font size=”0″ face=”Arial”> </font></td></TR></table>’)

if (IE) {document.write(‘</DIV>’)}

if (NS) {document.write(‘</LAYER>’)}

if ((IE||NS) (menuIsStatic==”yes”staticMode)) {makeStatic(staticMode);}

</SCRIPT>

<SCRIPT>

window.onload=init

</SCRIPT>

<p style=”height:1000px;”></p>

</BODY></HTML>

本文来自CSDN博客,转载请标明出处:

html asp.net实现树形菜单

css里的内容↓dt{cursor:pointer;}.show{display:block;}.hidden{display:none;}js里的内容↓function menu(){ var obj = document.getElementsByTagName(“dd”) for(i=0;i<obj.length;i++){ if(obj[i].className==”show”){ obj[i].className=”hidden”; } else{ obj[i].className=”show”; } }}body里的内容↓<dl> <dt onclick=”menu()”>菜单1</dt> <dd class=”show”>子菜单1</dd> <dd class=”show”>子菜单2</dd> <dd class=”show”>子菜单3</dd> <dt>菜单2</dt> <dt>菜单3</dt></dl>这里不让发完整的代码,把上面的代码放入相应的标签就可以用了。

请问这种树形结构的导航栏用html或者js怎么实现?

下面是最基本的框架,内容和样式你需要自己调整

<!DOCTYPE html>

<html>

<head>

<meta charset=”gb2312″ />

<title></title>

<style type=”text/css”>

#tree {

width: 150px;

}

#tree, #tree ul {

list-style: none; margin: 0; padding: 0; padding: 10px;

}

#tree li {

border: 1px solid #00f; padding: 10px; cursor: pointer;

}

#tree ul {

display: none;

}

</style>

<script type=”text/javascript”>

window.onload = function() {

var tree = document.getElementById(“tree”);

var lis = tree.getElementsByTagName(“li”);

for(var i = 0; i < lis.length; i++) {

(function(a) {

lis[a].onclick = function() {

if(typeof this.getElementsByTagName(“ul”) !== null) {

var ul_first = this.getElementsByTagName(“ul”)[0];

if(ul_first.style.display == “block”)

ul_first.style.display = “none”;

else

ul_first.style.display = “block”;

}

};

})(i);

}

};

</script>

</head>

<body>

<ul id=”tree”>

<li>菜单一

<ul>

<li>1-1</li><li>1-2</li><li>1-3</li><li>1-4</li>

</ul>

</li>

<li>菜单二

<ul>

<li>2-1</li><li>2-2</li><li>2-3</li><li>2-4</li>

</ul>

</li>

<li>菜单三

<ul>

<li>3-1</li><li>3-2</li><li>3-3</li><li>3-4</li>

</ul>

</li>

</ul>

</body>

</html>