SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Apr 25, 2007, 09:12 #1
- Join Date
- May 2005
- Posts
- 64
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
div show hide menu using javasript
My menus are...
main menu 1
sub menu 11
sub menu 12
sub menu 13
sub menu 14
main menu 2
sub menu 21
sub menu 22
sub menu 23
sub menu 24
sub menu 25
sub menu 26
main menu 3
sub menu 31
sub menu 32
sub menu 33
sub menu 34
I want a code to display main menu 1, main menu 2 and main menu 3 initially. When anyone clicks on main menu 1 it should display the sub menus of main menu 1. When anyone clicks on main menu 2, main menu 2 should expand and main menu 1 should be hidden automatically.
I also want to expand the main menu 1 automatically if one of the sub menus of main menu 1 is active.
Can anyone guide me in the right direction?
Any help is greatly appreciated. Thanks.
-
Apr 25, 2007, 09:47 #2
- Join Date
- Apr 2007
- Location
- New London, CT
- Posts
- 172
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
mootools, scriptaculous, or search google for accordion menus. i personally use the mootools framework. it is easy to use and simple to implement. i'd eventually, however, like to be able to have enough programming experience to have my own library.
-
Apr 25, 2007, 13:32 #3
- Join Date
- Nov 2006
- Posts
- 68
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If all you are after is an accordion menu then some thing like the following should do, there is no real need to include a library if that is the only function u want.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Title</title> <script type="text/javascript"> var Nav = { Init : function(){ navRoot = document.getElementById('menu').getElementsByTagName('UL'); for(i=0; i<navRoot.length; i++){ //Check if the cookie value matches current id if so don't hide if(Cookie.Read('section') != navRoot[i].parentNode.id){ navRoot[i].parentNode.className = 'closed'; //Set default class }; navRoot[i].parentNode.onclick = Nav.Click; //Add Click event }; }, Click : function(){ //Close all menus for(i=0; i<navRoot.length; i++){ navRoot[i].parentNode.className = 'closed'; }; //Open clicked menu this.className = 'open'; Cookie.Create('section', this.id, 5); //create open menu cookie save for 5 days } }; window.onload = function(){ Nav.Init(); } /* General cookie function based on quirksmode examples http://www.quirksmode.org/js/cookies.html */ var Cookie = { Create : function(name, value, days){ if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; }, Read : function(name){ var nameEQ = name.toLowerCase() + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i].toLowerCase(); while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }, Erase : function(){ this.Create(name, "", -1); } }; </script> <style type="text/css" media="screen"> #menu li{cursor:pointer;} #menu li.closed ul{display:none;} #menu li ul{display:block;} </style> </head> <body> <ul id="menu"> <li id="menu1"> Menu 1 <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> </ul> </li> <li id="menu2"> Menu2 <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> </ul> </li> <li id="menu3"> Menu3 <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> </ul> </li> </ul> </body> </html>
-
May 1, 2007, 07:25 #4
- Join Date
- May 2005
- Posts
- 64
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks guys. I just found this article http://www.howtocreate.co.uk/tutoria...seExample.html and found the solution. It works like a charm.
Bookmarks