jquery- 類似蘋果的選單

來弄一個類似蘋果產品介紹的選單。

外掛網址：
cool jQuery Apple’s New Slide Menu

參考結構準備html
<div id="menu-container">
<div id="loading"></div>
<ul>
<li><a href="#"><img src="assets/img/aep.png" /></a><h4><a href="#">After Effect</a></h4></li>
<li><a href="#"><img src="assets/img/ai.png" /></a><h4><a href="#">Illustrator</a></h4></li>
<li><a href="#"><img src="assets/img/fla.png" /></a><h4><a href="#">FLASH</a></h4></li>
<li><a href="#"><img src="assets/img/indd.png" /></a><h4><a href="#">InDesign</a></h4></li>
<li><a href="#"><img src="assets/img/psd.png" /></a><h4><a href="#">Photoshop</a></h4></li>
</ul>
</div>

另外要準備選單的
<div id="menu-controls">
<a href="#" data-target="0" class="active">Adobe</a>
<a href="#" data-target="1">Document</a>
<a href="#" data-target="2">Web</a>
<a href="#" data-target="3">Image</a>
</div>

然後參考範例的code就可以用這個plugin的效果了

view plaincopy to clipboardprint

1. var options = {   
2.         div: "#menu-container",   
3.         controls: "#menu-controls",   
4.         loader: "#loading",   
5.         x: 150,   
6.         y: 200,   
7.         easing: "easeOutBackSmall",   
8.         easeIn: "easeOutBack",   
9.         preloadAll: true  
10.     };   
11.        
12. var menu = new slideMenu(options);  

Demo