如何製作一個類似www.latimes.com的jQuery菜單？

Question

我想製作一個類似於本網站上的菜單：http://www.latimes.com/。但它的效果不如Los Angeles Times。

我該如何解決？有另一種方法嗎？

這是代碼顯示/隱藏子菜單通過點擊項目。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
     var $j = jQuery.noConflict(); 
     $j(document).ready(function() { 
     }); 
     function Reveal(a){ 
      var ul = a.parentNode.getElementsByTagName("UL").item(0); 
      $j(ul).show({height: 'toggle' ,opacity: 'toggle'}, 1); 
     } 
</script> 

我在調用Reveal功能鼠標：

<li><a href="#" onmousover="Reveal(this);">testimonials</a> 

Answer 1

不工作這麼好或根本不工作？我擔心你錯誤地使用show函數。而那toggle參數對我來說也不清楚。

我沒有在LA Times菜單中看到任何動畫，但是該語法（定義切換變量並使用它們而不帶引號）將更適合jQuery animate函數，而不是show。這是.animate(properties, [duration,] [easing,] [complete])

見http://api.jquery.com/show/和

莫名其妙地跟着你盡力去完成它的方式，我會做這樣的事情（未測試！）

<script type="text/javascript"> 
    var $j = jQuery.noConflict(); 
    $j(document).ready(function() { 
     $j('#mainNavi > li').hover(function() { 
       $j(this).children('ul').show(); 
     }, function() { 
       $j('#mainNavi > li > ul').hide(); 
     }); 
    }); 
</script> 

爲HTML，你會碰到這樣的：

<ul id="mainNavi"> 
    <li> 
     <a href="">link1</a> 
     <ul style="display: none"> 
       <li>submenu item1</li> 
       <li>submenu item2</li> 
     </ul> 
    </li> 
    <li> 
     <a href="">link2</a> 
     <ul style="display: none"> 
       <li>submenu item1</li> 
       <li>submenu item2</li> 
     </ul> 
    </li> 
</ul>