[jQuery] A complicated menu. Need some help.
My navigation menu is quite complicated and I can't get it working.
Can someone please help?
That's what I want and have until now:
A nested <UL> menu that slides to the left if I click a link with sub-
menus and fade in the sub-menu.
(sub-menus are not displayed by default via css)
<ul id="navigation">
<li>Home</li>
<li><span>Products</span>
<ul class="level2">
<li>Product A</li>
<li><span>Product B</span>
<ul class="level3">
<li>Product B Info</li>
</ul>
</li>
<li>Product C</li>
</ul>
</li>
<li><span>Team</span>
<ul class="level2">
<li>Boss</li>
<li>Sales Team</li>
<li>Bob</li>
</ul>
</li>
<li>Contact</li>
</ul>
jQuery:
$("#navigation span").click(function () {
// move the whole ul#navigation 100px to the left
$(this).parent().parent().animate({left:'-100px'},'slow');
// … and show the first submenu level2 (links products a-c)
$(this).next.show();
// but how can I 'see' if it is a nested span I click on and move
#navigation and the nested ul?
// and maybe the #navigation the nested ul and another nested
ul?
});
Thanks a million for any help!!