Как сделать меню JQuery, которое работает как www.latimes.com?

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/ и http://api.jquery.com/animate/

Следуя каким-то образом, как вы пытаетесь это сделать, я бы сделал что-то вроде (не проверено!)

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