Question

我正在尝试了解这里菜单背后的javascript http://www.canadastartup.com/。他们使用插件吗？是否有一个插件（最好基于jquery）可以产生类似的效果？

html看起来像这样：

  <ul class="nav sf-js-enabled">
     <li><a href="">Home</a></li>
     <li class="page_item page-item-61 current_page_item selectedLava">
        <a title="" href="">About us</a>
     </li>
     <li class="page_item page-item-38"><a title="" href="">Marketing Services</a></li>
     <li class="page_item page-item-47"><a title="" href="">Sales Services</a></li>
     <li class="page_item page-item-31"><a title="" href="">Business Services</a></li>
     <li class="page_item page-item-67"><a title="" href="">Contact us</a></li>

     <li class="backLava" 
         style="left: 67px; top: 83px; width: 70px; height: 32px; overflow: hidden;">
       <div class="leftLava"></div>
       <div class="bottomLava"></div>
       <div class="cornerLava"></div>
     </li>
  </ul> <!-- end ul.nav -->

Answer 1

看起来他们正在使用superfish

jQuery('ul.nav').superfish({ 
    delay:       200,                            // one second delay on mouseout 
    animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
    speed:       'fast',                          // faster animation speed 
    autoArrows:  true,                           // disable generation of arrow mark-up 
    dropShadows: false                            // disable drop shadows 
});

尽管可能还有更多内容，而不是围绕资源的第162行看看

Answer 2

我相信你正在寻找熔岩灯：

http://www.canadastartup.com/wp-content/themes/TheProfessional/js/jquery.lavalamp.1.3.3-min.js

虽然，如果你想学习如何自己动手，一个很棒的视频教程是关于Net Tuts的：

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/

Answer 3

要创建您看到的动画，他们似乎正在使用jQuery Lavalamp plugin。

您可以查看Demos and Tutorials here。

这里的js在哪里

3 个答案: