SoFunction
Updated on 2025-03-06

jquery implements vertical navigation menu with shrink function

This article introduces how a more common navigation menu is implemented. It has a vertical structure. Clicking on the navigation main title can expand or collapse the secondary menu.
The code example is 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 {
 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="/jquery/1.9.0/"></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"> 
   &lt;a href="#none">Front-end zone</a>   &lt;ul class="level2"&gt;
    &lt;li&gt;&lt;a href="#none">html tutorial</a></li>    &lt;li&gt;&lt;a href="#none" >css tutorial</a></li>    &lt;li&gt;&lt;a href="#none" >div tutorial</a></li>    &lt;li&gt;&lt;a href="#none" >jquery tutorial</a></li>   &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="level1"&gt; 
   &lt;a href="#none">Resource Zone</a>   &lt;ul class="level2"&gt;
    &lt;li&gt;&lt;a href="#none">Special Effect Download</a></li>    &lt;li&gt;&lt;a href="#none">Computer special effects</a></li>    &lt;li&gt;&lt;a href="#none">Mobile Special Effects</a></li>    &lt;li&gt;&lt;a href="#none">Picture download</a></li>   &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="level1"&gt; 
  &lt;a href="#none">Ant Tribe</a>   &lt;ul class="level2"&gt;
    &lt;li&gt;&lt;a href="#none">Front-end zone</a></li>    &lt;li&gt;&lt;a href="#none">Special Effects Zone</a></li>    &lt;li&gt;&lt;a href="#none">Webmaster communication</a></li>    &lt;li&gt;&lt;a href="#none">Management Zone</a></li>   &lt;/ul&gt;
  &lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

The above code implements the effect of the vertical navigation menu. The following is to introduce its implementation process.
1. Implement process decomposition:
1.<div class="box"></div>The outermost box element can achieve a horizontal centering effect on the entire navigation bar. The css code is as follows:

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

2. Structural layout of the folded menu:

&lt;li class="level1"&gt; 
 &lt;a href="#none">Front-end zone</a> &lt;ul class="level2"&gt;
  &lt;li&gt;&lt;a href="#none">html tutorial</a></li>  &lt;li&gt;&lt;a href="#none" >css tutorial</a></li>  &lt;li&gt;&lt;a href="#none" >div tutorial</a></li>  &lt;li&gt;&lt;a href="#none" >jquery tutorial</a></li> &lt;/ul&gt;
&lt;/li&gt;

The above code is the structure of the collapsed menu. As the main navigation link a is set to a block-level element, so that its size can be set. At the same time, by default, the ul element as the secondary menu is hidden, that is, the secondary menu is folded.
2.jquery code comments:
1.$(document).ready(function(){})，When the document structure is fully loaded, execute the code in the function.
2.$(".level1 > a").click(function(){})，Register the click event handling function for the first-level A element with the class attribute value of level1 element, that is, register the event handling function for the main navigation link.
3.$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide()，This code is a chain call effect, which realizes the effect of clicking on the main navigation link to realize the secondary menu expansion after the current clicking on the main navigation, and the other menu collapses.
false，Cancel the jump effect of the main navigation link.

The above is all about this article, I hope it will be helpful for everyone to learn jquery programming.