SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    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.

  2. #2
    SitePoint Zealot
    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.

  3. #3
    SitePoint Enthusiast
    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>

  4. #4
    SitePoint Enthusiast
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •