I'm trying to understand the javascript behind the menu here /. Are they using a plugin? Is there a plugin (preferably jquery based) that can give a similar effect?

The html looks something like this:

  <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 -->

I'm trying to understand the javascript behind the menu here http://www.canadastartup./. Are they using a plugin? Is there a plugin (preferably jquery based) that can give a similar effect?

The html looks something like this:

  <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 -->

• javascript
• jquery
• jquery-plugins
• navigation

Share Improve this question Follow edited Jun 10, 2011 at 18:40 kapa 78.8k2121 gold badges165165 silver badges178178 bronze badges asked Jun 10, 2011 at 18:11 sameoldsameold 19.3k2222 gold badges6565 silver badges8888 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

looks like they are using 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 
});

though there may be more to it than that look around line 162 of source

I believe you are looking for the Lava Lamp:

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

---

Although, if you want to learn how to do it yourself, a great video tutorial is the one on Net Tuts:

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

To create the animation you see, they seem to be using the jQuery Lavalamp plugin.

You can check out the Demos and Tutorials here.