Menu
Hide/Show Simple drop down menu
Hi all
I thought this was going to be simple but it’s driving me mad.
I have a simple unordered list menu here with a nested sub menu
[url]http://www.ttmt.org.uk/forum/nav/#
The nested menus are hidden and I want them to slide down when the button is clicked.
When another button is clicked I want other nested menus to hide.
This all works until I click the nested menu link and that menu closes and opens again.
When a nested menu link is clicked i want it to stay open.
I want to use this in WordPress, I don’t know how easy it is to add id/classes to the <li> and select
just that <li>
Is it possible to do this with the current html.
[code]
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css”>
<style type=”text/css”>
#nav{
margin:50px;
width:200px;
}
#nav li a{
background:#aaa;
display:block;
padding:5px;
margin:0 0 2px 0;
text-decoration:none;
}
#nav ul li a{
background:red;
color:white;
display:block;
padding:5px;
margin:0 0 2px 5px;
}
</style>
</head>
<body>
<ul id=”nav”>
<li><a href=”#”>One</a>
<ul>
<li><a href=”#”>One/One</a></li>
<li><a href=”#”>One/Two</a></li>
<li><a href=”#”>One/Three</a></li>
</ul>
</li>
<li><a href=”#”>Two</a></li>
<li><a href=”#”>Three</a>
<ul>
<li><a href=”#”>Three/One</a></li>
<li><a href=”#”>Three/Two</a></li>
</ul>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#nav ul’).slideUp();
$(‘#nav li’).click(function(){
$(‘#nav ul’).slideUp();
$(‘ul’, this).slideDown();
});
});
</script>
</body>
</html>