Home >Web Front-end >JS Tutorial >Simple folding and expanding multi-level menu effect implemented by JS CSS_javascript skills

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

WBOYOriginal: 2016-05-16 15:39:461833browse

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>

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

Statement：

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

Previous article：Mobile Roulette Lottery Code Sharing_Javascript SkillsNext article：Mobile Roulette Lottery Code Sharing_Javascript Skills

See more

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

Related articles