Simple folding and expanding multi-level menu effect implemented by JS CSS

Simple folding and expanding multi-level menu effect implemented by JS CSS_javascript skills

WBOY

Release： 2016-05-16 15:39:46

Original

1796 people have browsed it

The example in this article describes the foldable and expanded multi-level menu effect implemented by JS CSS. Share it with everyone for your reference. The details are as follows:

This is a multi-level folding menu implemented in JS CSS, which can be folded, expanded, or collapsed. It does not reference any external files and does not use images. Although it is simple and a bit rough, the core things have been shown to you. Everyone, friends who are studying the collapsing menu, this small example may be just what you need, study it carefully.

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-zdzk-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>
<style>
#side_nav ul{display:none}
</style>
</head>
<body>
<ul id="side_nav">
 <li><span>菜单1</span>
  <ul>
   <li><a href="#">菜单1-0</a></li>
   <li><a href="#">菜单1-1</a></li>
  </ul>
 </li>
 <li><span>菜单2</span>
  <ul>
   <li><a href="#">菜单2-0</a></li>
   <li><a href="#">菜单2-1</a></li>
  </ul>
 </li>
 <li><span>菜单3</span>
  <ul>
   <li><a href="#">菜单3-0</a></li>
  </ul>
 </li>
</ul>
<script type="text/javascript">
<!--
 (function(){
  var navWrap=document.getElementById("side_nav");
  var nav1s=navWrap.getElementsByTagName("span");
  var nav2s=navWrap.getElementsByTagName("ul");
  for(var i=0,len=nav1s.length;i<len;i++){
   nav1s[i].onclick=(function(i){
    return function(){
     for(var j=0;j<len;j++){
      nav2s[j].style.display="none";
     }
     nav2s[i].style.display="block";
    }
   })(i)
  }
 })()
//-->
</script>
</body>
</html>

Copy after login

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