本文實例講述了JS CSS簡單樹形選單實作方法。分享給大家供大家參考。具體如下：
這是一款不錯的CSS樹形菜單，樹狀列表，當然不全是CSS實現，部分功能還使用了JavaScript代碼進行配合，刪減了修飾用的菜單圖片，大家用的時候自己圖片加進去，IMG標籤大部分都預留了出來，稍懂Html語法的朋友很容易就看懂的。
運作效果截圖如下：
線上示範網址如下：
http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/
具體程式碼如下：
<!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>
<title>树状列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
*{margin:0px;padding:0px;}
A:link{color: #000000; TEXT-DECORATION: none;}
A:visited {COLOR: #000000; TEXT-DECORATION: none}
A:active {COLOR: #3333ff; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: none}
.panel{ BACKGROUND: #DDE4EA; COLOR:#654125;}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img{
border:0px;
width:16px;
height:16px;
}
#menu{
margin-top: 0px;
}
.U1 {
background: #FFFFFF;
border-bottom:1px #9D9D9D solid;
}
.L1 a:link, .L1 a:visited{
color: #476074;
background: url("");
font-size:9pt;
display: block;
text-decoration: none;
height: 24px;
}
.L1 a:link span, .L1 a:visited span{
background: url("") no-repeat left;
padding-left: 15px;
height:24px;
vertical-align:middle;
padding:7px 0px 0px 16px;
cursor:pointer;
width:100%;
}
.L1 a:hover{
color: #000000;
font-weight:bold;
background: url("");
background-position: 0 -24px;
}
/* 一级菜单 active 效果 */
.L1 a:link.active, .L1 a:hover.active, .L1 a:active.active, .L1 a:visited.active{
background: url("");
background-position: 0 -24px;
}
.L1 a:link.active span, .L1 a:hover.active span, .L1 a:active.active span, .L1 a:visited.active span{
color: #000000;
font-weight:bold;
background: url("") no-repeat left;
}
.L21 a:link, .L21 a:visited, .L22 a:link, .L22 a:visited, .L3 a:link, .L3 a:visited{
color: #444659;
background: none;
height: 24px;
font-size:9pt;
display: block;
text-decoration: none;
padding-left: 13px;
background: none;
}
.L21 a:link span, .L21 a:visited span, .L22 a:link span, .L22 a:visited span, .L3 a:link span, .L3 a:visited span{
vertical-align:middle;
padding:7px 0px 0px 16px;
background: url("") no-repeat left center;
cursor:pointer;
width:100%;
}
.L22 a:link span, .L22 a:visited span, .L3 a:link span, .L3 a:visited span{
background:none;
}
.L21 a:hover, .L22 a:hover, .L3 a:hover{
background: url("") no-repeat top left;
font-weight:bold;
}
.L3 a:link span, .L3 a:visited span{
padding:7px 0px 0px 26px;
}
.L4 a:link span, .L4 a:visited span{
padding:7px 0px 0px 36px;
}
/* 二级菜单 active 效果 */
.L21 a:link.active, .L21 a:hover.active, .L21 a:active.active, .L21 a:visited.active{
background: none;
}
.L21 a:link.active span, .L21 a:hover.active span, .L21 a:active.active span, .L21 a:visited.active span{
color: #000000;
font-weight:bold;
background: url("") no-repeat left center;
}
/* 二、三级菜单 active */
.L22 a:link.active, .L22 a:hover.active, .L22 a:active.active, .L22 a:visited.active,
.L3 a:link.active, .L3 a:hover.active, .L3 a:active.active, .L3 a:visited.active{
background: url("") no-repeat left;
background-position: 0 -24px;
}
.L22 a:link.active span, .L22 a:hover.active span, .L22 a:active.active span, .L22 a:visited.active span,
.L3 a:link.active span, .L3 a:hover.active span, .L3 a:active.active span, .L3 a:visited.active span{
color: #FFFFFF;
font-weight:bold;
background: none;
}
.Ls{
text-align:right;
padding-top:4px;
height:20px;
font-size:9pt;
}
.setting:link, .setting:visited{
text-decoration: underline;
display:block;
}
</style>
</head>
<body class="panel" onLoad="init();">
<div id="sub_tabs" class="sub_tabs"></div>
<div id="body">
<!-- OA树开始-->
<ul id="menu">
<!--路政报表菜单 -->
<li class="L1"><a href="javascript:c('m01');" id="m01"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 路政报表</span></a></li>
<ul id="m01d" style="display:none;" class="U1">
<li class="L21"><a href="javascript:c('f40');" id="f40"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 路政报表1</span></a></li>
<ul id="f40d" style="display:none;">
<li class="L3"><a href="javascript:c('f42');"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" src= align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
<ul id="f42d" style="display:none;"><li class="L4" ><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" src= align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" >子报表内容</span></a></li></ul>
<li class="L3"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
</ul>
<li class="L21"><a href="javascript:c('f41');" id="f41"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 路政报表2</span></a></li>
<ul id="f41d" style="display:none;">
<li class="L3"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" >报表内容</span></a></li>
<li class="L3"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" >报表内容</span></a></li>
</ul>
<li class="L22"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" / alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" / alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" / alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
</ul>
<!--路政报表菜单 结束 -->
<!--路政报表菜单 -->
<li class="L1"><a href="javascript:c('m03');" id="m03"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 路政报表</span></a></li>
<ul id="m03d" style="display:none;" class="U1">
<li class="L21"><a href="javascript:c('f42');" id="f42"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" src= align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 路政报表1</span></a></li>
<ul id="f42d" style="display:none;">
<li class="L3"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
<li class="L3"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
</ul>
<li class="L21"><a href="javascript:c('f43');" id="f43"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" src= align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 路政报表2</span></a></li>
<ul id="f43d" style="display:none;">
<li class="L3"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" src= align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" >报表内容</span></a></li>
<li class="L3"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" src= align="absMiddle"/ alt="JS CSS簡單樹形選單實作方法_javascript技巧" >报表内容</span></a></li>
</ul>
<li class="L22"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" / alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" / alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" / alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" / alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" / alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 报表内容</span></a></li>
</ul>
<!--路政报表菜单 结束 -->
</ul>
</ul>
</div>
<script language="JavaScript">
window.onresize=function()
{
if(!parent.$('frame1')) return;
var rows = parent.$('frame1').rows.split(",");
if(rows.length < 2 || rows[1]!="*") return;
$("bottom_center").style.width = "0px";
if(document.body.clientHeight > $("sub_tabs").clientHeight+$("bottom").clientHeight)
$("body").style.height=(document.body.clientHeight-$("sub_tabs").clientHeight-$("bottom").clientHeight)+"px";
var widthTotal = parseInt($("bottom").clientWidth);
var widthLeft = parseInt($("bottom_left").clientWidth);
var widthRight = parseInt($("bottom_right").clientWidth);
if(!isNaN(widthTotal) && !isNaN(widthLeft) && !isNaN(widthRight))
{
$("bottom_center").style.width = widthTotal - widthLeft - widthRight + "px";
}
};
function init()
{
window.onresize();
}
var sub_menu="1";
function view_menu(id)
{
set_current("");
if($("menu").innerHTML.toLowerCase().indexOf("<li") >= 0)
$("menu_code_"+sub_menu).innerText=$("menu").innerHTML;
if($("menu_code_"+id).innerText=="" || isUndefined($("menu_code_"+id).innerText))
{
$("menu").innerHTML="<img src="/static/imghwm/default1.png" data-src="images/green_minus.gif" class="lazy" align='absMiddle' alt="JS CSS簡單樹形選單實作方法_javascript技巧" > 加载中，请稍候……";
if(id==2) args="MENU_TYPE=SHORTCUT&OA_SUB_WINDOW=0&MENU_DISPLAY=";
else if(id==3) args="MENU_TYPE=OA&OA_SUB_WINDOW=0";
else if(id==4) args="MENU_TYPE=FAV&OA_SUB_WINDOW=0";
else if(id==5) args="MENU_TYPE=FIS&OA_SUB_WINDOW=0";
else args="OA_SUB_WINDOW=0";
_get("menu_code.php", args, update_menu, true);
}
else
{
$("menu").innerHTML=$("menu_code_"+id).innerText;
}
if($('link_'+sub_menu))
$('link_'+sub_menu).className="";
$('link_'+id).className="active";
sub_menu=id;
setCookie("MENU_UI_1", id);
if(id == 5)
{
openURL("http://www.jb51.net/");
}
}
function update_menu(req)
{
if(req.status == 200)
{
if(req.responseText=="")
$("menu").innerHTML="<div style='padding:10px;'>无可访问菜单</div>";
else
{
$("menu").innerHTML=req.responseText;
if(sub_menu == 2) c('mMENU_SHORTCUT');
}
}
else
{
$("menu").innerHTML="<div style='padding:10px;'>错误："+req.status+"</div>";
}
}
var cur_id="",cur_expand="";
var flag=0,sflag=0;
//-------- 菜单点击事件 -------
function c(id)
{
var targetid,targetelement;
var strbuf;
var el=$(id);
if(!el)
return;
//-------- 如果点击了展开或收缩按钮---------
targetid=el.id+"d";
targetelement=$(targetid);
var expandUL=$(cur_expand+"d");
var expandLink=$(cur_expand);
if (targetelement.style.display=="none")
{
if(expandUL && expandLink && el.id.substr(0,1)=="m")
{
expandLink.className="";
expandUL.style.display='none';
}
if(el.id.substr(0,1)=="m")
cur_expand=el.id;
el.className="active";
targetelement.style.display='';
menu_flag=0;
//$("expand_link").;
}
else
{
el.className="";
targetelement.style.display="none";
menu_flag=1;
//$("expand_link").;
var links=document.getElementsByTagName("A");
for (i=0; i<links.length; i++)
{
el=links[i];
if(el.parentNode.className.toUpperCase()=="L1" && el.className=="active" && el.id.substr(0,1)=="m")
{
menu_flag=0;
// $("expand_link").;
break;
}
}
}
}
//-------- 打开网址 -------
var $ = function(id) {return document.getElementById(id);};
var userAgent = navigator.userAgent.toLowerCase();
var is_opera = userAgent.indexOf('opera') != -1 && opera.version();
var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
function MouseOverBtn(){event.srcElement.className+="Hover";}
function MouseOutBtn() {event.srcElement.className=event.srcElement.className.substr(0,event.srcElement.className.indexOf("Hover"));}
function CorrectButton()
{
var inputs=document.getElementsByTagName("INPUT");
for(var i=0; i<inputs.length; i++)
{
var el = inputs[i];
var elType = el.type.toLowerCase();
var elClass = el.className.toLowerCase();
var elLength = Math.ceil(el.value.replace(/[^\x00-\xff]/g,"**").length/2);
if(elType!="button" && elType!="submit" && elType!="reset" || elClass!="bigbutton"&&elClass!="smallbutton")
continue;
if(elLength<=3)
el.className+="A";
else if(elLength==4)
el.className+="B";
else if(elLength>=5 && elLength<=7)
el.className+="C";
else if(elLength>=8 && elLength<=11)
el.className+="D";
else
el.className+="E";
if(is_ie)
{
el.attachEvent("onmouseover", MouseOverBtn);
el.attachEvent("onmouseout", MouseOutBtn);
}
}
}
if(is_ie)
window.attachEvent("onload", CorrectButton);
else
window.addEventListener("load", CorrectButton,false);
</script>
</body>
</html>
希望本文所述對大家的JavaScript程式設計有所幫助。
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AMJavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AMPython更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AMPython更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AMPython和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
刺客信條陰影 - 如何找到鐵匠，解鎖武器和裝甲定制
1 個月前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
3 週前ByDDD
熱工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SublimeText3 Linux新版
SublimeText3 Linux最新版
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
禪工作室 13.0.1
強大的PHP整合開發環境
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
