Home>

This is a multi-level drop-down menu based on jquery.With animation effect,All elements are nested in a circular format of ul li ul li ul li. If there is no subordinate classification, end the nesting with li a.The reason why toggle () is not used in the code is to hide all the elements after the lower menu of the menu while shrinking the menu.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery multi-level drop-down menu</title>
<script language="javascript" type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
ul, li {
list-style:none;
font-size:12px;
line-height:20px;
width:80px;
margin:0;
padding-left:6px;
}
.child {
 display:none;
}
.nav a {
display:block;
color:#5c84c1;
padding-left:22px;
}
</style>
<script language="javascript" type="text/javascript">
 //Explanation All elements are nested in a circular format of ul li ul li ul li If there is no subordinate classification, end the nesting with li a
 $(document) .ready (function () {
 //$(".nav ul li "). children (" ul "). hide ();
  $(". nav"). find ("li"). not (":has (ul)"). children ("a"). css ({textdecoration:"none", color:"#333", background :"none"})
  .click (function () {
  $(this) .get (0) .location.href="" "+ $(this) .attr (" href ") +" "";
  });
 $(". nav"). find ("li:has (ul)"). children ("a"). css ({background:"url (images/statu_close.gif) no-repeat left top;"})
  .click (function () {
  if ($(this) .next ("ul"). is (":hidden")) {
  $(this) .next ("ul"). slidedown ("slow");
  if ($(this) .parent ("li"). siblings ("li"). children ("ul"). is (":visible")) {
  $(this) .parent ("li"). siblings ("li"). find ("ul"). slideup ("1000");
  $(this) .parent ("li"). siblings ("li:has (ul)"). children ("a"). css ({background:"url (images/statu_close.gif) no-repeat left top ;"})
   .end (). find ("li:has (ul)"). children ("a"). css ({background:"url (images/statu_close.gif) no-repeat left top;"});}
  $(this) .css ({background:"url (images/statu_open.gif) no-repeat left top;"});
  return false;
 } else {
  $(this) .next ("ul"). slideup ("normal");
  //The reason why toggle () is not used is to hide all elements after the lower menu of the menu while shrinking the menu
  $(this) .css ({background:"url (images/statu_close.gif) no-repeat left top;"});
  $(this) .next ("ul"). children ("li"). find ("ul"). fadeout ("normal");
  $(this) .next ("ul"). find ("li:has (ul)"). children ("a"). css ({background:"url (images/statu_close.gif) no-repeat left top ;"});
  return false;
  }
  });
 });
</script>
</head>
<body>
<div>
 <ul>
 <li>
  <a href="#">First level menu 1</a>
  <ul>
  <li>
   <a href="#">Secondary menu 1</a>
   </li>
   <li>
   <a href="#">Secondary menu 1</a>
   <ul>
   <li>
   <a href="#">Third level menu 1</a>
   </li>
   <li>
   <a href="#">Third level menu 1</a>
   </li>
   </ul>
   </li>
   <li>
   <a href="#">Secondary menu 2</a>
   <ul>
   <li>
   <a href="#">Third level menu 2</a>
   </li>
   <li>
   <a href="#">Third level menu 2</a>
   <ul>
    <li>
    <a href="#">Four-level menu</a>
    </li>
    <li>
    <a href="#">Four-level menu 1</a>
    </li>
    <li>
    <a href="#">Four-level menu 1</a>
    <ul>
    <li>
     <a href="#">Five-level menu 1</a>
     </li>
     <li>
     <a href="#">Five-level menu 1</a>
     </li>
     <li>
     <a href="#">Five-level menu 1</a>
     </li>
    </ul>
    </li>
   </ul>
   </li>
   </ul>
   </li>
  </ul>
  </li>
  <li>
  <a href="#">First level menu 2</a>
  <ul>
  <li>
   <a href="#">Secondary menu 1</a>
   </li>
   <li>
   <a href="#">Secondary menu 1</a>
   </li>
  </ul>
  </li>
  <li>
  <a href="#">First level menu 3</a>
  <ul>
  <li>
   <a href="#">Secondary menu 1</a>
   </li>
   <li>
   <a href="#">Secondary menu 1</a>
   </li>
  </ul>
  </li>
  <li>
  <a href="#">First level menu 4</a>
  </li>
 </ul>
</div>
</body>
</html>
  • Previous Sample code for implementing Map in JavaScript
  • Next Alternative accordion effect webpage content switching code implemented by JS