Companies need to write a project left navigation menu, find the Internet a lot of source code reference, are complex processes, portability is not very good, according to a relatively good last modified a bit to achieve the desired effect.
Front-end HTML code:
View Code
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 <title>jquery左侧导航网页菜单</title>
5 <link rel="stylesheet" type="text/css" href="css/css.css" />
6 <script type="text/javascript" src="js/jquery.min.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function () {
9 $('li.button a').click(function (e) {
10 var dropDown = $(this).parent().next();
11 $('.dropdown').not(dropDown).slideUp('slow');
12 dropDown.slideToggle('slow');
13 e.preventDefault();
14 })
15
16 });
17 </script>
18 </head>
19 <body style="text-align: center">
20 <div id="main">
21 <ul class="">
22 <li class="menu">
23 <ul>
24 <li class="button"><a href="#" class="green">菜单一<span></span></a></li>
25 <li class="dropdown">
26 <ul>
27 <li><a href="#">链接一</a></li>
28 <li><a href="#">链接二</a></li>
29 <li><a href="#">链接三</a></li>
30 <li><a href="#">链接四</a></li>
31 </ul>
32 </li>
33 </ul>
34 </li>
35 <li class="menu">
36 <ul>
37 <li class="button"><a href="#" class="orange">菜单二<span></span></a></li>
38 <li class="dropdown">
39 <ul>
40 <li><a href="#">链接一</a></li>
41 <li><a href="#">链接二</a></li>
42 <li><a href="#">链接三</a></li>
43 </ul>
44 </li>
45 </ul>
46 </li>
47 <li class="menu">
48 <ul>
49 <li class="button"><a href="#" class="blue">菜单三<span></span></a></li>
50 <li class="dropdown">
51 <ul>
52 <li><a href="#">链接一</a></li>
53 <li><a href="#">链接二</a></li>
54 <li><a href="#">链接三</a></li>
55 <li><a href="#">链接四</a></li>
56 </ul>
57 </li>
58 </ul>
59 </li>
60 </ul>
61 <div class="clear">
62 </div>
63 </div>
64 </body>
65 </html>Finally, I realized the show under the effect of:
Source: Jquery achieve vertical navigation menu pages
Reproduced in: https: //my.oschina.net/weisenz/blog/200631