javascript

Dynamic scalable navigation menu instance implemented by jQuery

This article illustrates the dynamic scalable navigation menu implemented by jQuery. Share to everybody for everybody reference. Specific implementation methods are 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery select</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body {padding:10px; font-family:" Song typeface "}
* {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"))
 // Determines whether an object is shown or hidden
 {
  if(!$(this).children(".div1").is(":animated")){
  // If no animation is currently performed, a new animation is added
  $(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" id="secondpane">
  <ul>
  <li class="">
  <a href="javascript:void(0);" class="a1"> Web page special effects </a>
  <div class="div1">js The special effects , Web page special effects </div>
  </li>
  <li class="">
  <a href="javascript:void(0);" class="a1"> Web page template </a>
  <div class="div1"> Web template download </div>
  </li>
  <li class="">
  <a href="javascript:void(0);" class="a1" style="border:none;"> Contact us  </a>
  <div class="div1" style="border-top:1px solid #ccc;"> About the home of scripts </div>
  </li>
 </ul>
 </div>
</body>
</html>

Hopefully, this article has been helpful in your jQuery programming.