JS CSS simple tree menu implementation method_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS CSS simple tree menu implementation method_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

css js tree menu

The example in this article describes how to implement a simple tree menu in JS CSS. Share it with everyone for your reference. The details are as follows:

This is a good CSS tree menu and tree list. Of course, it is not all implemented in CSS. Some functions also use JavaScript code to coordinate, and the menu pictures used for decoration are deleted. When you use it, you can add your own pictures. Once inside, most of the IMG tags are reserved, which can be easily understood by friends who know a little about Html syntax.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/

The specific code is as follows:

<!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="" align="absMiddle"/> 路政报表</span></a></li>
<ul id="m01d" style="display:none;" class="U1">
<li class="L21"><a href="javascript:c('f40');" id="f40"><span><img src="" align="absMiddle"/> 路政报表1</span></a></li>
 <ul id="f40d" style="display:none;">
 <li class="L3"><a href="javascript:c('f42');"><span><img src= align="absMiddle"/> 报表内容</span></a></li>
  <ul id="f42d" style="display:none;"><li class="L4" ><a href="#"><span><img src= align="absMiddle"/>子报表内容</span></a></li></ul>
 <li class="L3"><a href="#"><span><img src="" align="absMiddle"/> 报表内容</span></a></li>
 </ul>
<li class="L21"><a href="javascript:c('f41');" id="f41"><span><img src="" align="absMiddle"/> 路政报表2</span></a></li>
 <ul id="f41d" style="display:none;">
 <li class="L3"><a href="#"><span><img src="" align="absMiddle"/>报表内容</span></a></li>
 <li class="L3"><a href="#"><span><img src="" align="absMiddle"/>报表内容</span></a></li> 
 </ul>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
</ul>
<!--路政报表菜单 结束 -->
<!--路政报表菜单 -->
<li class="L1"><a href="javascript:c('m03');" id="m03"><span><img src="" align="absMiddle"/> 路政报表</span></a></li>
<ul id="m03d" style="display:none;" class="U1">
<li class="L21"><a href="javascript:c('f42');" id="f42"><span><img src= align="absMiddle"/> 路政报表1</span></a></li>
 <ul id="f42d" style="display:none;">
 <li class="L3"><a href="#"><span><img src="" align="absMiddle"/> 报表内容</span></a></li>
 <li class="L3"><a href="#"><span><img src="" align="absMiddle"/> 报表内容</span></a></li>
 </ul>
<li class="L21"><a href="javascript:c('f43');" id="f43"><span><img src= align="absMiddle"/> 路政报表2</span></a></li>
 <ul id="f43d" style="display:none;">
 <li class="L3"><a href="#"><span><img src= align="absMiddle"/>报表内容</span></a></li>
 <li class="L3"><a href="#"><span><img src= align="absMiddle"/>报表内容</span></a></li> 
 </ul>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</span></a></li>
<li class="L22"><a href="#"><span><img src="" /> 报表内容</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='/images/loading.gif' align='absMiddle'> 加载中，请稍候……";
   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").src="images/green_minus.gif";
 }
 else
 {
   el.className="";
   targetelement.style.display="none";
   menu_flag=1;
   //$("expand_link").src="images/green_plus.gif";
   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").src="images/green_minus.gif";
     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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

1 months ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7384

Java Tutorial

1628

CakePHP Tutorial

1357

Laravel Tutorial

1267

PHP Tutorial

1216

Related knowledge

What are the encoded fonts used in the picture? How to apply this font style in a project? Apr 05, 2025 pm 05:06 PM

Introduction and use of encoded fonts In programming and web design, choosing the right font can greatly improve the readability and aesthetics of the code. recent,...

How to draw a specific shape with an orange background color using CSS' clip-path property? Apr 05, 2025 pm 04:36 PM

Practical application cases of CSS drawing function In modern web design, CSS can not only be used for layout and style, but also for creating complex graphics and animations. May...

How to add loading animation to the a tag click and then jump? Apr 05, 2025 pm 04:48 PM

Cleverly implementing the short animation and jump after clicking the a tag, many times, we hope that after clicking the a tag, the page can first display a short loading event...

How to customize the hover effect of merge rows in el-table? Apr 05, 2025 pm 06:54 PM

How to customize the hover effect of merge rows in el-table? Using Element...

How to elegantly achieve high adaptability of the middle content in the three-line layout? Apr 05, 2025 pm 04:39 PM

Discussion on the height of adaptive intermediate content in three-line layout In web layout, you often encounter the need to implement three-line layout and the intermediate content is highly variable...

What is the

element in CSS for? Apr 05, 2025 pm 04:51 PM

What are the elements in CSS for? During the learning and using CSS, you may encounter some less common HTML elements, such as &lt...

How to use locally installed 'Jingnanmai Round' on a web page without loading the font file? Apr 05, 2025 pm 04:54 PM

How to use locally installed font files on web pages In web page development, sometimes we will encounter the situation where we need to use specific fonts installed on our computer...

How to correctly display the locally installed 'Jingnan Mai Round Body' on the web page? Apr 05, 2025 pm 10:33 PM

Using locally installed font files in web pages Recently, I downloaded a free font from the internet and successfully installed it into my system. Now...

See all articles