当前位置：首页 » 编程语言 » html树形菜单

html树形菜单

发布时间: 2021-03-05 22:52:48

㈠ 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.

2.<link
rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type
="text/css">
3.
4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"
></script>

㈡ html树形菜单如何做出点击其他菜单栏，当前菜单栏就自动关闭的效果急急急！！

<divid="menu">
<divclass="smtitle">
<ahref=""class="smtitle_a">列表1</a>
<ul>
<li><ahref="">列表1</a></li>
<li><ahref="">列表1</a></li>
<li><ahref="">列表1</a></li>
<li><ahref="">列表1</a></li>
<li><ahref="">列表1</a></li>
</ul>
</div>
<divclass="smtitle">
<ahref=""class="smtitle_a">列表2</a>
<ul>
<li><ahref="">列表2</a></li>
<li><ahref="">列表2</a></li>
<li><ahref="">列表2</a></li>
<li><ahref="">列表2</a></li>
</ul>
</div>
<divclass="smtitle">
<ahref=""class="smtitle_a">列表3</a>
<ul>
<li><ahref="">列表3</a></li>
<li><ahref="">列表3</a></li>
<li><ahref="">列表3</a></li>
<li><ahref="">列表3</a></li>
</ul>
</div>
</div>

<style>

#menu .smtitle ul

{

list-style: none;

display: none;

}

</style>

function initMenu() {

// $('#menu ul').hide();

// $('#menu ul.smbody').show();

$('#menu div a').click(

() {

$(this).parent().parent().find("a.smtitle_a").css("background", "url(../images/i_sm_collapsed.gif) no-repeat 10px center");

var checkElement = $(this).next();

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {

$('#menu ul:visible').slideDown('normal');

checkElement.slideUp('normal');

checkElement.prev().css("background", "url(../images/i_sm_collapsed.gif) no-repeat 10px center");

return false;

}

if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

$('#menu ul:visible').slideUp('normal');

checkElement.slideDown('normal');

checkElement.prev().css("background", "url(../images/i_sm_expanded.gif) no-repeat 10px center");

return false;

}

);

}

$(document).ready(function () { initMenu(); });

</script>

样式自已去写一下就好了

㈢ javascript实现动态加载树形菜单(tree),

页面既然得到从服务器传过来的json数据之后，还要转换为Object
比如，服务器组装好的内json数据：容
{
id:'001',
nodeMsg:'节点1'
}
这个是ajax成功之后的回调
function(xhr){
var o = eval('(' + xhr.responseText + ')');
alert(o.id + ':' + o.nodeMsg);
}

㈣ html中点击树形菜单，显示内容，怎么实现。

详细内容那用DIV接收，定义ID，点击的时候把内容给这个DIV就是了

var d= document.createElement("div");

d.innerHTML="显示的一句话";

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

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

<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>

㈥ html树状菜单加号点击变减号，再点击变回加号

最好图片吧~ 看的有点晕~

㈦ html插入树型菜单可以吗、

Javascript

<html>
<head>
<title>简单树型菜单</title>
</head>
<body>
<script language="javascript">
// 隐藏div
function hideAll() {
for(i=0;i<odiv.length;i++) {
// 用display="none"实现隐藏
odiv[i].style.display="none";
}
}
// 显示所有的div
function showObj(num) {
if (odiv[num].style.display=="none") {
hideAll();
// 以行显示div
odiv[num].style.display="inline";
}
else {
odiv[num].style.display="none";
}
}
</script>
<table>
<tr >
<td>
<a href="#" onclick="showObj(0)">菜单一</a><br>
<div id="odiv" style="display:none">Menu1-1<br>Menu1-2<br>Menu1-3</div>
</td>
</tr>
<tr >
<td>
<a href="#" onclick="showObj(1)">菜单二</a><br>
<div id="odiv" style="display:none">Menu2-1<br>Menu2-2<br>Menu2-3</div>
</td>
</tr>
<tr >
<td>
<a href="#" onclick="showObj(2)">菜单三</a><br>
<div id="odiv" style="display:none">Menu3-1<br>Menu3-2<br>Menu3-3</div>
</td>
</tr>
</table>
</body>
</html>

㈧求教html大神一个二级树形菜单但是又要求菜单数据从后台获取动态添加，下面代码，大牛们帮帮忙急！~~~

你好，很高兴为你作答。
使用ajax方法，从后台获取菜单，
组装菜单信息，构件html代码形如 "<li>.....</li>"。
使用jquery的append或者html等方法将构件的代码嵌入到页面中即可。

㈨ 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>这里不让发完整的代码，把上面的代码放入相应的标签就可以用了。

㈩ CSS树状菜单

<head>
<title>1231</title>
<style type="text/css">
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>

</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<ul>
<li><a href="#">zero dollars</a></li>
<li><a href="#">wrapping text</a></li>
<li><a href="#">styled form</a></li>
<li><a href="#">active focus</a></li>
<li><a href="#">shadow boxing</a></li>
<li><a href=".#">image map</a></li>
<li><a href="#">fun backgrounds</a></li>
<li><a href="#">fade scrolling</a></li>
<li><a href="#">em sized images</a></li>
</ul>

</li>
<li><a class="hide" href="index.html">MENUS</a>

<ul>
<li><a href="#" title="a coded list of spies">spies menu</a></li>
<li><a href="#" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="#" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="#" title="an unordered list with link images">link images</a></li>
<li><a href="#" title="non-rectangular links">non-rectangular</a></li>
<li><a href="#" title="jigsaw links">jigsaw links</a></li>
<li><a href="#" title="circular links">circular links</a></li>
</ul>

</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>

</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>

</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>

</li>
</ul>

<div class="clear"> </div>
</div>
</body>
</html>
运行一下试试！不知道是不是你要的效果~

阅读全文

html树形菜单

与html树形菜单相关的阅读推荐