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のメニューのいずれかのアニメーションを見ませんでしたが、その構文（引用符なしトグル変数を定義し、それらを使用しては）showよりもjQueryのanimate機能のために、より適しているであろう。それはhttp://api.jquery.com/show/と

は何とかあなたがそれを達成しようとする方法を次のように表示.animate(properties, [duration,] [easing,] [complete])

で、私のようなものだろう（テストしていません！）をHTMLとして

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

、あなたのようなものを持っているでしょう：

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