當前位置：首頁 » 編程語言 » 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樹形菜單相關的閱讀推薦