2013年2月11日 星期一

jquery- 類似蘋果的選單

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

外掛網址:
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的效果了
  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
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...