Home>

This is a secondary menu based on jquery.Researched for so many days,Just learned to write a menu with jquery,It's also an encouragement to yourself,I feel this menu is very good,Friends are welcome to give pointers.

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=gb2312" />
<title>jquery secondary menu</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function () {
 $("#container .menu1 ul li"). click (function () {
 var index=$("#container .menu1 ul li"). index (this);
  $(this) .addclass ("bg"). siblings (). removeclass ();
  $("#container .menu2 ul li ul"). eq (index) .show (). parent (). siblings ("li"). children ("ul"). hide ();
 })
})
</script>
<style type="text/css">
 body {margin:0;padding:0;font-family:"Songti";font-size:9pt;color:#ffffff;font-weight:bold}
#container {width:800px;height:auto;margin:0 auto;border:1px #1025c0 solid}
 #container .menu1 {width:800px;height:40px;border:none;background:url (images/menu1.gif) no-repeat}
 #container .menu1 ul {margin:0;padding:0;position:relative;padding-top:5px;}
 #container .menu1 ul li {float:left;padding-left:10px;height:35px;width:80px;line-height:35px;list-style:none;text-align:center;cursor:pointer}
 #container .menu2 {width:800px;height:35px;border:none;background-color:#333333;}
 #container .menu2 ul {margin:0;padding:0}
 #container .menu2 ul li {height:35px;line-height:35px;list-style:none;float:left;cursor:pointer}
 #container .menu2 ul li ul li {float:left;padding-left:20px;height:35px;line-height:35px;list-style:none}
 .bg {background-color:#333333}
 .hide {display:none}
</style>
</head>
<body>
<div>
<div>
<ul>
<li>First column</li>
<li>Second column</li>
<li>Third column</li>
<li>Fourth column</li>
<li>Fifth column</li>
</ul>
</div>
<div>
<ul>
<li>
<ul>
<li>first column</li><li>first column</li><li>first column</li>
</ul>
</li>
<li>
<ul>
<li>Second column</li><li>Second column</li><li>Second column</li>
</ul>
</li>
<li>
<ul>
<li>third column</li><li>third column</li><li>third column</li>
</ul>
</li>
<li>
<ul>
<li>fourth column</li><li>fourth column</li><li>fourth column</li>
</ul>
</li>
<li>
<ul>
<li>fifth column</li><li>fifth column</li><li>fifth column</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
  • Previous JSP tutorial method using JavaBean to complete business logic
  • Next Introduction to several important concepts in J2ME programming
  • Trends