search

Home  >  Article  >  Web Front-end  >  Vertical folding menu code implemented by JS_javascript skills

Vertical folding menu code implemented by JS_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:36:021202browse

The example in this article describes the vertical folding menu code implemented by JS. Share it with everyone for your reference, the details are as follows:

Let’s take a look at the screenshots of the running effect:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-hxzd-menu-demo/

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>
<script language = JavaScript>
function showmenu(id) {
 var list = document.getElementById("list"+id);
 var menu = document.getElementById("menu"+id)
 if (list.style.display=="none") {
  document.getElementById("list"+id).style.display="block";
  menu.className = "title1";
 }else {
  document.getElementById("list"+id).style.display="none";
  menu.className = "title";
 }
} 
</script>
<style type="text/css">
<!--
*{margin:0;padding:0;list-style:none;font-size:14px}
#nav{margin:10px;text-align:center;line-height:25px;width:200px;}
.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}
.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}
.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}
-->
</style>
</head>
<body>
<div id="nav">  
  <div class="title" id="menu1" onclick="showmenu('1') ">Ajax下载</div>
  <div id="list1" class="content" style="display:none">
   <ul>
    <li>jQuery</li>
    <li>Extjs</li>
    <li>Mootools</li>
    </ul>
  </div> 
  <div class="title" id="menu2" onclick="showmenu('2')">网页代码</div>
  <div id="list2" class="content" style="display:none">
    <ul>
    <li>菜单导航</li>
    <li>层和布局</li>
    <li>图片切换</li>
    </ul>
  </div> 
</div>
</body>
</html>

I hope this article will be helpful to everyone in 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：JavaScript basic output and embedded writing tutorial_Basic knowledgeNext article：JavaScript basic output and embedded writing tutorial_Basic knowledge

Related articles

See more