"Exclusive" sliding menu
"Exclusive" sliding menu
Hi to all! I'm new on this forum and this is my first post.
I'm quite new in jQuery, and i'm trying to create a menu with "exclusive" sliding submenus. It should behave in this way: when i click on a link in the menu (1.0 or 2.0 in this example), the relative subMenu slides down, showing the two links in the submenu. This is what this code does, you can prove it. Then, what i want to have is that when i click another link in the mainMenu (so, 1.0 or 2.0) any other subMenu shown (or already slided down) will slideUp and disappear, leaving just the right submenu displayed.
Can anyone help me?
Thanks a lot.
-
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li > div").hide();
$("a").click(function(){
if($(this).parent().parent().get(0).id == "menu")
{
if($(this).siblings().display = "none")
$(this).siblings().slideDown("slow");
}
})
})
</script>
</head>
<body>
<a href="#">Non slide</a>
<ul id="menu">
<li>
<a class="one" href="#">1.0</a>
<div>
<ul class="subMenu">
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
</ul>
</div>
</li>
<li>
<a class="two" href="#">2.0</a>
<div>
<ul class="subMenu">
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>