I have a simple ul menu with nested ul menus here
http://www.ttmt.org.uk/forum/reload/
When the page loads the nested menus are hidden.
When the parent links are clicked I want them the nested ul to slidedown
and show the menu.
The first link 'One' is connected to another page, when it's clicked I want it's nested
menu to appear when the new page loads.
I'm thinking the only way to do this is pass a variable to the new page so it's knows which nested menu to open.
Is this the bested way to do this or is there a better way.
How can I pass a variable to the new page to open the nested menu.
<!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;
}
h1{
margin:50px;
font:bold 1.5em sans-serif;
}
</style>
</head>
<body>
<h1>Home</h1>
<ul id="nav">
<li><a href="one.html">One</a>
<ul class="children">
<li><a href="one.html">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 class="children">
<li><a href="#">Three/One</a></li>
<li><a href="#">Three/Two</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$('#nav li ul').slideUp();
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
</script>
</body>
</html>
No comments:
Post a Comment