SoFunction
Updated on 2025-03-03

Example of dynamic scalable navigation menu implemented by jQuery

This article describes the dynamic scalable navigation menu implemented by jQuery. Share it for your reference. The specific implementation method is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery select</title>
<script type="text/javascript" src="jquery-1.6."></script>
<style type="text/css">
body {padding:10px; font-family:"Songyi"}
* {margin:0; padding:0; font-size:12px;}
a{ color: #333;}
ul,li {
list-style-type:none;
}
.menu_list li a {
display:block; line-height:30px;
text-align:center; height:30px;
background:#e8e8e8; border-bottom:1px solid #ccc;
}
.hover {
background:#e8e8e8;
}
.div1{
height:200px; display:none;
padding:5px;
}
.menu_list{
width:200px; background:#f2f2f2;
border:1px solid #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
 $(".menu_list ul li").click(function()
 {
 if($(this).children(".div1").is(":hidden"))
 //Judge whether the object is displayed or hidden {
  if(!$(this).children(".div1").is(":animated")){
  //If there is no animation currently, add a new animation  $(this).children(".div1").animate({height:'show'},1000)
  .end().siblings().find(".div1").hide(1000);}
 }else{
  if(!$(this).children(".div1").is(":animated")){
  $(this).children(".div1").animate({height:'hide'},1000)
  .end().siblings().find(".div1").hide(1000);}
  }
  }
 );
});
</script>
<div class="menu_list" >
  <ul>
  <li class="">
  <a href="javascript:void(0);" class="a1">Web page effects</a>
  <div class="div1">jsSpecial effects,Web page effects</div>
  </li>
  <li class="">
  <a href="javascript:void(0);" class="a1">Web page templates</a>
  <div class="div1">Web page templates下载</div>
  </li>
  <li class="">
  <a href="javascript:void(0);" class="a1" style="border:none;">Contact Us </a>
  &lt;div class="div1" style="border-top:1px solid #ccc;">About me</div>  &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

I hope this article will be helpful to everyone's jQuery programming.