Question

I am trying to make a menu that works like the one on this website: http://www.latimes.com/. But it is doesn’t works so good as on Los Angeles Times.

How can I fix it? Is there another way?

Here is the code shows/hides submenu by click on item.

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

I call the Reveal function on mouse over:

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

Answer 1

Doesn’t work so good or doesn’t work at all? I am afraid you are mis-using the show function. And that toggle parameter is also unclear for me.

I didn’t see any animations in the LA Times menu, but that syntax (defining the toggle variables and using them without quotes) would be more suitable for the jQuery animate function than for show. It is .animate( properties, [duration,] [easing,] [complete] )

See http://api.jquery.com/show/ and http://api.jquery.com/animate/

Following somehow the way you try to accomplish it, I would do something like (not tested!)

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

As HTML, you would have something like:

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