Of Stack

jquery implements a vertical navigation menu with shrink function

  • 2020-12-18 01:45:27
  • OfStack

This article describes how to implement a common navigation menu, which has a vertical structure. Click on the navigation main title to expand or collapse the 2-level menu.
Code examples are as follows: 


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title> Vertical navigation menu </title>
<style type="text/css">
body{
 margin:0;
 padding:0 0 12px 0;
 font-size:12px;
 line-height:22px;
 font-family:"\5b8b\4f53", "Arial Narrow";
 background:#fff;
}
form, ul, li, p, h1, h2, h3, h4, h5, h6{
 margin:0;
 padding:0;
}
input, select{
 font-size:12px;
 line-height:16px;
}
img{border:0;}
ul, li{list-style-type:none;}
a{
 color:#00007F;
 text-decoration:none;
}
a:hover{
 color:#bd0a01;
 text-decoration:underline;
}
.box{
 width:150px;
 margin:0 auto;
}
.menu{
 overflow:hidden;
 border-color:#C4D5DF;
 border-style:solid;
 border-width:0 1px 1px;
}
.menu li.level1 a{
 display:block;
 height:28px;
 line-height:28px;
 background:#EBF3F8;
 font-weight:700;
 color:#5893B7;
 text-indent:14px;
 border-top:1px solid #C4D5DF;
}
.menu li.level1 a:hover{
 text-decoration:none;
}
.menu li.level1 a.current{
 background:#B1D7EF;
}
 
.menu li ul{
 overflow:hidden;
}
.menu li ul.level2{
 display:none;
}
.menu li ul.level2 li a{
 display:block;
 height:28px;
 line-height:28px;
 background:#ffffff;
 font-weight:400;
 color:#42556B;
 text-indent:18px;
 border-top:0px solid #ffffff;
 overflow:hidden;
}
.menu li ul.level2 li a:hover {
    color:#f60;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".level1 > a").click(function(){
  $(this).addClass("current") 
  .next().show() 
  .parent().siblings().children("a").removeClass("current")
  .next().hide(); 
  return false;
 }); 
});
</script>
</head>
<body>
<div class="box">
 <ul class="menu">
  <li class="level1"> 
   <a href="#none"> The front zone </a>
   <ul class="level2">
    <li><a href="#none">html The tutorial </a></li>
    <li><a href="#none" >css The tutorial </a></li>
    <li><a href="#none" >div The tutorial </a></li>
    <li><a href="#none" >jquery The tutorial </a></li>
   </ul>
  </li>
  <li class="level1"> 
   <a href="#none"> The resources section </a>
   <ul class="level2">
    <li><a href="#none"> The special effects to download </a></li>
    <li><a href="#none"> Computer special effects </a></li>
    <li><a href="#none"> Mobile phone special effects </a></li>
    <li><a href="#none"> Images are downloaded </a></li>
   </ul>
  </li>
  <li class="level1"> 
  <a href="#none"> The ant tribe </a>
   <ul class="level2">
    <li><a href="#none"> The front zone </a></li>
    <li><a href="#none"> Special zone </a></li>
    <li><a href="#none"> Master communication </a></li>
    <li><a href="#none"> Management section </a></li>
   </ul>
  </li>
 </ul>
</div>
</body>
</html>

The above code to achieve the vertical navigation menu effect, the following describes its implementation process.
1. Decomposition of implementation process:
1. < div class="box" > < /div > The outermost box element can center the navigation bar horizontally. The css code is as follows: 


.box{
 width:150px;
 margin:0 auto;
}

2. Structure and layout of folding menu: 


<li class="level1"> 
 <a href="#none"> The front zone </a>
 <ul class="level2">
  <li><a href="#none">html The tutorial </a></li>
  <li><a href="#none" >css The tutorial </a></li>
  <li><a href="#none" >div The tutorial </a></li>
  <li><a href="#none" >jquery The tutorial </a></li>
 </ul>
</li>

The above code is the structure of the collapse menu. a, the link for the primary navigation, is set to the block-level element using display:block, so that its size can be set. By default, the ul element, which is the level 2 menu, is hidden, meaning that the level 2 menu is folded.
2.jquery code Comments:
1.$(document).ready(function(){}), when the document structure is fully loaded before the execution of the function code.
2.$(".level1 > a").click(function(){}), register the click event handler function for the level 1 a element under the level1 element with the value of class attribute, that is, register the event handler function for the main navigation link.
3.$((this).addClass ("current").next ().parent ().siblings ().children ("a").removeClass ("current").hide (), this code is a chain call effect, the realization of click on the main navigation link to achieve the current click on the main navigation after the 2-level menu expansion, other menu folding effect.
4.return false, cancel the jump effect of the main navigation link.

That is the end of this article, I hope you learn jquery programming is helpful.

Related articles: