CODEWITHSUNDEEP
jquerymenudrop-down-menu
stardust
stardust

Reputation: 339

How to make a jQuery menu that works like www.latimes.com?

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>

Upvotes: 0

Views: 273

Answers (1)

karameloso
karameloso

Reputation: 310

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>

Upvotes: 3

Related Questions