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
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>
Reply With Quote
Bookmarks