The effect is as follows
Code resolution
Html
First, you reference jquery and Plug-ins between the head.
| The code is as follows |
Copy Code |
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/accordion.js" ></script> |
Next, the menu body code is written between the bodies, and the HTML code will consist of a series of unordered lists.
| The code is as follows |
Copy Code |
| <ul class= "NAV" >
<li><a href= "http://www.helloweba.com" > Home </a></li>
<li><a href= "#" > Services </a></li>
<li><a href= "#" > Case </a></li>
<li><a href= "#" > Articles </a></a>
<ul>
<li><a href= "#" target= "_blank" >XHTML/CSS</a></li>
<li><a href= "#" >Javascript/Ajax/jQuery</a>
<ul>
<li><a href= "#" >Cookies</a></li>
<li><a href= "#" >Event</a></li>
<li><a href= "#" >Games</a></li>
<li><a href= "#" >Images</a></li>
</ul>
</li>
<li><a href= "#" target= "_blank" >PHP/MYSQL</a></li>
<li><a href= "#" target= "_blank" > Front-end observation </a></li>
<li><a href= "#" target= "_blank" >html5/mobile web Apps </a></li>
</ul>
</li>
<li><a href= "#" > About </a></li>
</ul> |
Css
Of course, we're going to add a style to this unordered list so that it's very simple to present on the screen.
| The code is as follows |
Copy Code |
| . nav {width:213px; padding:40px 28px 25px 0;}
Ul.nav {padding:0; margin:0; font-size:1em; line-height:0.5em; list-style:none;}
Ul.nav Li {}
Ul.nav Li a {line-height:10px; font-size:14px padding:10px 5px; color: #000; display:block;
Text-decoration:none; Font-weight:bolder;}
Ul.nav li a:hover {background-color: #675C7C; Color:white;}
Ul.nav ul {margin:0; padding:0;display:none;}
Ul.nav ul li {margin:0; padding:0; clear:both;}
Ul.nav ul Li a {padding-left:20px; font-size:12px; font-weight:normal;}
Ul.nav ul li a:hover {background-color: #D3C99C; color: #675C7C;}
Ul.nav ul ul Li a {color:silver; padding-left:40px;}
Ul.nav ul ul Li a:hover {background-color: #D3CEB8; color: #675C7C;}
Ul.nav Span{float:right;} |
Jquery
Call the accordion plug-in, set the related properties, a beautiful accordion effect is complete.
| The code is as follows |
Copy Code |
$ (function () {
$ (". Nav"). Accordion ({
SPEED:500,
Closedsign: ' [+] ',
Openedsign: ' [-] '
});
}); |
Accordion provides the following option settings:
Speed: The number of milliseconds to set the time for the menu to expand and close.
Closedsign: The content that appears next to the menu when the subordinate menu is closed, can be any HTML or text.
Openedsign: When the subordinate menu expands, the content that appears next to the menu can be any HTML or text.
Note that if you want the menu to start when it is loaded, you can add class= "active" to the Li that corresponds to the expansion.
Instance Code
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "Utf-8" > <link rel= "stylesheet" type= text/css "href=". /css/main.css "/>
<script type= "Text/javascript" src= ". /js/jquery.js "></script>
<script type= "Text/javascript" src= "Accordion.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (". Nav"). Accordion ({
Accordion:true,
SPEED:500,
Closedsign: ' [+] ',
Openedsign: ' [-] '
});
});
</script>
<style>
. demo{width:300px margin:40px Auto; padding:10px background: #f7f7f7}
Ul{list-style:none}
. nav {width:213px padding:40px 28px 25px 0; font-family: "Microsoft Yahei", Arial, Helvetica, Sans-serif;}
Ul.nav {padding:0; margin:0; font-size:1em; line-height:0.5em; list-style:none;}
Ul.nav Li {}
Ul.nav Li a {line-height:10px; font-size:14px padding:10px 5px; color: #000; display:block; text-decoration:none; fo Nt-weight:bolder;}
Ul.nav li a:hover {background-color: #675C7C; Color:white;}
Ul.nav ul {margin:0; padding:0;display:none;}
Ul.nav ul li {margin:0; padding:0; clear:both;}
Ul.nav ul Li a {padding-left:20px; font-size:12px; font-weight:normal;}
Ul.nav ul li a:hover {background-color: #D3C99C; color: #675C7C;}
Ul.nav ul ul Li a {color:silver; padding-left:40px;}
Ul.nav ul ul Li a:hover {background-color: #D3CEB8; color: #675C7C;}
Ul.nav Span{float:right;}
</style>
<body> <div id= "Main" >
<div class= "Demo" >
<ul class= "NAV" >
<li><a href= "http://www.111cn.net" target= "_blank" > Home </a></li>
<li><a href= "#" > Services </a>
<ul>
<li><a href= "#" >JAVASCRIPT</a></li>
<li><a href= "#" >PHP</a></li>
<li><a href= "#" >MYSQL</a></li>
<li><a href= "#" >LINUX</a></li>
</ul>
</li>
<li><a href= "#" > Case </a></li>
<li><a href= "#" > Articles </a></a>
<ul>
<li class= "Active" ><a href= "4.html" target= "_blank" >XHTML/CSS</a></li>
<li><a href= "#" >Javascript/Ajax/jQuery</a>
<ul>
<li><a href= "#" >Cookies</a></li>
<li><a href= "#" >Event</a></li>
<li><a href= "#" >Games</a></li>
<li><a href= "#" >Images</a></li>
</ul>
</li>
<li><a href= "6.html" target= "_blank" >PHP/MYSQL</a></li>
<li><a href= "7.html" target= "_blank" > Front end observation </a></li>
<li><a href= "9.html" target= "_blank" >html5/mobile Web Applications </a></li>
</ul>
</li>
<li><a href= "about.html" target= "_blank" > About </a></li>
</ul>
</div>
</div> </body>
|
jquery Multi-Accordion menu Download: Http://file.111cn.net/download/2013/05/15/multi_menu.rar
