SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS/JavaScripting Switch (expanding) Menu query

    I am currently redesigning a site of mine, and have been provided with a menu similar to the switch (expanding) type menus.

    When a main menu item is clicked, if this item contains sub-menus, these will display below it.

    Currently, on a page when clicking on an item containing sub-menus each will expand and when clicking another menu item these will expand as well.

    I would like to modify this, so if a main item containing sub-menus is clicked, it will close any other opened sub-menus.

    This will prevent the navigation menu from becoming extremely long, so only one set of sub-menus can be displayed at once.

    The code I have at present is:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    /* Menu Navigation Styles */
    #menu{
    	border:1px solid #000000;
    }
    #content #menu,#menu li ul{
    	list-style:none;
    	margin:0px;
    }
    #menu li,#menu li ul li{
    	padding:5px;
    	margin:0px;
    }
    #menu li{
    	background:#F0DFBE;
    	font-weight:bold;
    	color:#D98E16;
    	cursor:pointer;
    	padding-bottom:5px;
    }
    #menu li h4{
    	background:url(../img/arr_down.gif) no-repeat right;
    	font-size:11px;
    }
    #menu li.over h4{
    	background-image:url(../img/arr_right.gif);
    }
    #menu li a{
    	color:#D98E16;
    	text-decoration:none;
    }
    #menu li.over{
    	padding-bottom:0px;
    }
    #menu li ul{
    	display:block;
    	margin-top:5px;
    }
    #menu li.over ul{
    	display:none;
    }
    #menu li ul li{
    	background:#F7F2E4;
    }
    #menu li ul li a{
    	color:#636363;
    	font-weight:normal;
    	text-decoration:none;
    }
    #menu li ul li a:hover{
    	color:#636363;
    	text-decoration:underline;
    }
    
    </style>
    <script language="JavaScript" type="text/javascript">startList=function() {
    	if(document.getElementById) {
    		navRoot = document.getElementById('menu');
    		for(i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if(node.nodeName=='LI') {
    				node.className='over';
    				node.onclick=function() {
    					if(this.className!='over')
    						this.className='over';
    					else
    						this.className='';
    				}
    			}
    		}
    	}
    }
    window.onload=startList;</script>
    </head>
    <body>
    <ul id="menu">
      <li>
        <h4>Menu Section 1</h4>
        <ul>
          <li><a href="#">Sublink 11</a></li>
          <li><a href="#">Sublink 12</a></li>
          <li><a href="#">Sublink 13</a></li>
          <li><a href="#">Sublink 14</a></li>
        </ul>
      </li>
      <li>Menu Section 2 
        <ul>
          <li><a href="#">Sublink 21</a></li>
          <li><a href="#">Sublink 22</a></li>
          <li><a href="#">Sublink 23</a></li>
          <li><a href="#">Sublink 24</a></li>
        </ul>
      </li>
      <li><a href="#">Menu Main Link</a></li>
      <li>Menu Section 3 
        <ul>
          <li><a href="#">Sublink 31</a></li>
          <li><a href="#">Sublink 32</a></li>
          <li><a href="#">Sublink 33</a></li>
          <li><a href="#">Sublink 34</a></li>
        </ul>
      </li>
    </ul>
    </body>
    </html>
    Thanks in advance for any assistance.

    Graham

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the following
    Code:
    var Nav = {
    	Init : function(){
    		navRoot = document.getElementById('menu').getElementsByTagName('LI');
    		for(i=0; i<navRoot.length; i++){
    			navRoot[i].className = 'over'; //Set default class
    			navRoot[i].onclick = Nav.Click; //Add Click event
    		};
    	},
    	Click : function(){
    		//Close all menus
    		for(i=0; i<navRoot.length; i++){
    			navRoot[i].className='over';
    		};
    		//Open clicked menu
    		this.className = '';
    	}
    };
    
    window.onload=Nav.Init;

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mortimer

    Thanks, does exactly what I am after. Keeps the menu much more usable too.

    I pasted the script directly below the script in use already, which I presume is correct....

    One other area, although not as important, is there any way that what I am using at the minute can be modified to support persistence (so it remembers which menu item was last expanded) whenever you revisit the page. Similar to the example on Dynamic Drive (http://www.dynamicdrive.com/dynamici...switchmenu.htm)

    Graham

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Graham,

    I have edited the code so that it will remember what section you last opened, I have done this by saving a cookie when a menu is selected and I am looking to see if this cookie exists when the code is initialised. I have also added Id's to the top top level navigation so that these can be used to set the cookies, you can change these to what ever you like. Below is the complete page.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    /* Menu Navigation Styles */
    #menu{
    	border:1px solid #000000;
    }
    #content #menu,#menu li ul{
    	list-style:none;
    	margin:0px;
    }
    #menu li,#menu li ul li{
    	padding:5px;
    	margin:0px;
    }
    #menu li{
    	background:#F0DFBE;
    	font-weight:bold;
    	color:#D98E16;
    	cursor:pointer;
    	padding-bottom:5px;
    }
    #menu li h4{
    	background:url(../img/arr_down.gif) no-repeat right;
    	font-size:11px;
    }
    #menu li.over h4{
    	background-image:url(../img/arr_right.gif);
    }
    #menu li a{
    	color:#D98E16;
    	text-decoration:none;
    }
    #menu li.over{
    	padding-bottom:0px;
    }
    #menu li ul{
    	display:block;
    	margin-top:5px;
    }
    #menu li.over ul{
    	display:none;
    }
    #menu li ul li{
    	background:#F7F2E4;
    }
    #menu li ul li a{
    	color:#636363;
    	font-weight:normal;
    	text-decoration:none;
    }
    #menu li ul li a:hover{
    	color:#636363;
    	text-decoration:underline;
    }
    
    </style>
    <script language="JavaScript" type="text/javascript">
    var Nav = {
    	Init : function(){
    		navRoot = document.getElementById('menu').getElementsByTagName('LI');
    		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].id){
    				navRoot[i].className = 'over'; //Set default class
    			};
    			navRoot[i].onclick = Nav.Click; //Add Click event
    		};
    	},
    	Click : function(){
    		//Close all menus
    		for(i=0; i<navRoot.length; i++){
    			navRoot[i].className='over';
    		};
    		//Open clicked menu
    		this.className = '';
    		Cookie.Create('section', this.id, 5); //create open menu cookie save for 5 days
    		return false;
    	}
    };
    
    /* 
    	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);
    	}
    };
    window.onload=Nav.Init;
    
    </script>
    </head>
    <body>
    <ul id="menu">
      <li id="section1">
        <h4>Menu Section 1</h4>
        <ul>
          <li><a href="#">Sublink 11</a></li>
          <li><a href="#">Sublink 12</a></li>
          <li><a href="#">Sublink 13</a></li>
          <li><a href="#">Sublink 14</a></li>
        </ul>
      </li>
      <li id="section2">Menu Section 2 
        <ul>
          <li><a href="#">Sublink 21</a></li>
          <li><a href="#">Sublink 22</a></li>
          <li><a href="#">Sublink 23</a></li>
          <li><a href="#">Sublink 24</a></li>
        </ul>
      </li>
      <li id="section3"><a href="#">Menu Main Link</a></li>
      <li id="section4">Menu Section 3 
        <ul>
          <li><a href="#">Sublink 31</a></li>
          <li><a href="#">Sublink 32</a></li>
          <li><a href="#">Sublink 33</a></li>
          <li><a href="#">Sublink 34</a></li>
        </ul>
      </li>
    </ul>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Mortimer

    That is fantastic.

    Tested this, and works brilliantly.

    Thanks so much for taking the time to solve this query, very much appreciated.

    Regards, Graham

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries Graham glad it was what you where after.

  7. #7
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is exactly what im looking for and really useful, would just like to thank you, on an expansive note is there anyway of making the menus open in a smooth (non tacky) slide transition, would that require something like mootools?


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
  •