SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Better Switch Menu

    Okay, so we're using this "switch menu" someone got off of dynamic drive and I'm wondering if the same thing can be done with unordered lists. All those divs just seems cludgy to me.

    Does anyone have any suggestions?

    I did see the one that is on the Mozilla Developer pages however that JavaScript is a little bit over my head. If someone has a link to a tutorial they would recommend I would greatly appreciate it.

    Okay...NVM...I found a some really good examples in a few books I have. (Simply JavaScript & Beginning JavaScript with DOM Scripting and AJAX)

    I do have a question though...could an "accordian" be used as a right-hand navigation that would keep the menu expanded when clicking on a link within that submenu.

    Sorry if this is a "noob" question. I'm trying to get away from copying and pasting others code and not fully understanding what it all does.
    Last edited by amidude; Apr 17, 2008 at 09:18.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amidude, Could you post some links/examples/pics/code so we know exactly what you're trying to do.

    Thanks
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Are you talking about something like this: http://www.arwebdesign.net/systems/CollapsingMenu ?

    If you are, feel free to use it.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    If it's a standard vertical slide then CSS Play has a lot of examples, most of which fully work without javascript
    http://www.cssplay.co.uk/menus/

    For example:
    http://www.cssplay.co.uk/menus/slide_fly.html
    http://www.cssplay.co.uk/menus/slide_definition.html
    http://www.cssplay.co.uk/menus/vertical_slide.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your responses. I definitely am talking about the switch menu here. ( http://www.dynamicdrive.com/dynamici...switchmenu.htm )

    I'm working with the dynamic menu here right now. I've got it mostly working. I have to make it close any other sub-menus when you click on another link with a sub-menu. ( http://www.beginningjavascript.com/C...avigation.html )

    I've been working with JavaScript for a while but I never learned the actual nuts and bolts of the language. (embarrassed) So that's what I'm trying to do now...actually learn the language and not just how to cut-n-paste and modify someone else's code. I went through the book and am reading up on what I'm doing and I coded it myself. I'm also working with the Simply JavaScript book to get a better understanding of JavaScript coding principals.

    I thank you all for your help.

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay here's what I have so far and it's not doing what I want it to do. I would like for the current page link to be bold. Plus I want the div that is open to close when another div item is clicked. It's not behaving very well. Any help would be greatly appreciated.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    	<title>New Navigation</title>
    	<style type="text/css">
    	*{
    		margin:0;
    		padding:0;
    		list-style:none;
    	}
    	body{
    		font-family:arial,sans-serif;
    		background:#c1c1c1;
    		color:#333;
    		font-size:100.01%;
    	}
    	#nav{
    		font-size:.8em;
    		float:left;
    		width:18em;
    		padding:.5em;
    	}
    	#nav a{
    		text-decoration:none;
    		color:#000;
    	}
    	#nav ul{
    		margin-left:.5em;
    	}
    	#nav li{
    		padding:.2em 0;
    	}
    	#nav strong{
    		font-weight:bold;
    	}
    	
    	#nav.dyn li ul{
    		display:none;	
    	}
    	#nav.dyn li ul.show{
    		display:block;	
    	}
    	#nav.dyn li{
    		padding-left:15px;
    	}
    	#nav.dyn li.parent{
    		background:url(images/bullet_toggle_plus.gif) 0 4px no-repeat;
    	}
    	#nav.dyn li.open{
    		background:url(images/bullet_toggle_minus.gif) 0 4px no-repeat;
    	}
    	</style>
    	<script type="text/javascript">
    	/*
    	DOMhelp 1.0
    	written by Chris Heilmann
    */
    DOMhelp={
    	debugWindowId:'DOMhelpdebug',
    	init:function(){
    		if(!document.getElementById || !document.createTextNode){return;}
    	},
    	lastSibling:function(node){
    		var tempObj=node.parentNode.lastChild;
    		while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
    			tempObj=tempObj.previousSibling;
    		}
    		return (tempObj.nodeType==1)?tempObj:false;
    	},
    	firstSibling:function(node){
    		var tempObj=node.parentNode.firstChild;
    		while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
    			tempObj=tempObj.nextSibling;
    		}
    		return (tempObj.nodeType==1)?tempObj:false;
    	},
    	getText:function(node){
    		if(!node.hasChildNodes()){return false;}
    		var reg=/^\s+$/;
    		var tempObj=node.firstChild;
    		while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
    			tempObj=tempObj.nextSibling;
    		}
    		return tempObj.nodeType==3?tempObj.nodeValue:false;
    	},
    	setText:function(node,txt){
    		if(!node.hasChildNodes()){return false;}
    		var reg=/^\s+$/;
    		var tempObj=node.firstChild;
    		while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
    			tempObj=tempObj.nextSibling;
    		}
    		if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}
    	},
    	createLink:function(to,txt){
    		var tempObj=document.createElement('a');
    		tempObj.appendChild(document.createTextNode(txt));
    		tempObj.setAttribute('href',to);
    		return tempObj;
    	},
    	createTextElm:function(elm,txt){
    		var tempObj=document.createElement(elm);
    		tempObj.appendChild(document.createTextNode(txt));
    		return tempObj;
    	},
    	closestSibling:function(node,direction){
    		var tempObj;
    		if(direction==-1 && node.previousSibling!=null){
    			tempObj=node.previousSibling;
    			while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
    				 tempObj=tempObj.previousSibling;
    			}
    		}else if(direction==1 && node.nextSibling!=null){
    			tempObj=node.nextSibling;
    			while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
    				 tempObj=tempObj.nextSibling;
    			}
    		}
    		return tempObj.nodeType==1?tempObj:false;
    	},
    	initDebug:function(){
    		if(DOMhelp.debug){DOMhelp.stopDebug();}
    		DOMhelp.debug=document.createElement('div');
    		DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
    		document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
    	},
    	setDebug:function(bug){
    		if(!DOMhelp.debug){DOMhelp.initDebug();}
    		DOMhelp.debug.innerHTML+=bug+'\n';
    	},
    	stopDebug:function(){
    		if(DOMhelp.debug){
    			DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
    			DOMhelp.debug=null;
    		}
    	},
    	getKey:function(e){
    		if(window.event){
    	      var key = window.event.keyCode;
    	    } else if(e){
    	      var key=e.keyCode;
    	    }
    		return key;
    	},
    /* helper methods */
    	getTarget:function(e){
    		var target = window.event ? window.event.srcElement : e ? e.target : null;
    		if (!target){return false;}
    		while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
    			target=target.parentNode;
    		}
    		return target;
    	},
    	stopBubble:function(e){
    		if(window.event && window.event.cancelBubble){
    			window.event.cancelBubble = true;
    		} 
    		if (e && e.stopPropagation){
    			e.stopPropagation();
    		}
    	},
    	stopDefault:function(e){
    		if(window.event && window.event.returnValue){
    			window.event.returnValue = false;
    		} 
    		if (e && e.preventDefault){
    			e.preventDefault();
    		}
    	},
    	cancelClick:function(e){
    		if (window.event){
    			window.event.cancelBubble = true;
    			window.event.returnValue = false;
    		}
    		if (e && e.stopPropagation && e.preventDefault){
    			e.stopPropagation();
    			e.preventDefault();
    		}
    	},
    	addEvent: function(elm, evType, fn, useCapture){
    		if (elm.addEventListener){
    			elm.addEventListener(evType, fn, useCapture);
    			return true;
    		} else if (elm.attachEvent) {
    			var r = elm.attachEvent('on' + evType, fn);
    			return r;
    		} else {
    			elm['on' + evType] = fn;
    		}
    	},
    	cssjs:function(a,o,c1,c2){
    		switch (a){
    			case 'swap':
    				o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
    			break;
    			case 'add':
    				if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    			break;
    			case 'remove':
    				var rep=o.className.match(' '+c1)?' '+c1:c1;
    				o.className=o.className.replace(rep,'');
    			break;
    			case 'check':
    				var found=false;
    				var temparray=o.className.split(' ');
    				for(var i=0;i<temparray.length;i++){
    					if(temparray[i]==c1){found=true;}
    				}
    				return found;
    			break;
    		}
    	},
        safariClickFix:function(){
          return false;
        }
    }
    DOMhelp.addEvent(window, 'load', DOMhelp.init, false);
    	</script>
    	<script type="text/javascript">
    	sn={
    	dynamicClass:'dyn',
    	showClass:'show',
    	parentClass:'parent',
    	openClass:'open',
    	navID:'nav',
    	init:function(){
    		var triggerLink;
    		if(!document.getElementById || !document.createTextNode){return;}
    		var nav=document.getElementById(sn.navID);
    		if(!nav){return;}
    		DOMhelp.cssjs('add',nav,sn.dynamicClass);		
    		var nested=nav.getElementsByTagName('ul');
    		for(var i=0;i<nested.length;i++){
    			triggerLink=nested[i].parentNode.getElementsByTagName('a')[0];
    			DOMhelp.cssjs('add',triggerLink.parentNode,sn.parentClass);		
    			DOMhelp.addEvent(triggerLink,'click',sn.changeSection,false);
    			triggerLink.onclick=DOMhelp.safariClickFix;
    			if(nested[i].parentNode.getElementsByTagName('strong').length>0){
    				DOMhelp.cssjs('add',triggerLink.parentNode,sn.openClass);		
    				DOMhelp.cssjs('add',nested[i],sn.showClass);		
    			}
    		}
    	},
    	changeSection:function(e){
    		var t=DOMhelp.getTarget(e);
    		var firstList=t.parentNode.getElementsByTagName('ul')[0];
    		if(DOMhelp.cssjs('check',firstList,sn.showClass)){
    			DOMhelp.cssjs('remove',firstList,sn.showClass)
    			DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);
    		} else {
    			DOMhelp.cssjs('add',firstList,sn.showClass)
    			DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);
    		}
    		DOMhelp.cancelClick(e);
    	}
    }
    DOMhelp.addEvent(window,'load',sn.init,false);
    	</script>
    </head>
    <body>
    <ul id="nav">
    	<li><a href="#">Preparing for college</a>
    		<ul>
    			<li><a href="opportunities.html">Opportunities Booklet</a></li>
    			<li><a href="resources.html">Resources</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Need a Loan</a>
    		<ul>
    			<li><a href="#">PLUS loan information</a></li>
    			<li><a href="#">PLUS Pre-approval process</a></li>
    			<li><a href="#">Consolidation lenders</a></li>
    			<li><a href="#">e-Sign promissory note</a></li>
    			<li><a href="#">Selecting a lender</a></li>
    			<li><a href="#">Entrance counseling</a></li>
    			<li><a href="#">Forms</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Leaving School / Repayment</a>
    		<ul>
    			<li><a href="#">Exit counseling</a></li>
    			<li><a href="#">Forbearance</a></li>
    			<li><a href="#">Deferments</a></li>
    			<li><a href="#">Loan consolidation</a></li>
    			<li><a href="#">Consequences of default</a></li>
    			<li><a href="#">Forms</a></li>
    		</ul>
    	</li>
    	<li><a href="#">In Default</a>
    		<ul>
    			<li><a href="#">Loan rehabilitation</a></li>
    			<li><a href="#">Pay your loan in full</a></li>
    			<li><a href="#">Consequences of default</a></li>
    			<li><a href="#">Loan consolidation</a></li>
    			<li><a href="#">F.A.Q.'s</a></li>
    			<li><a href="#">Forms</a></li>
    		</ul>
    	</li>
    	<li><a href="#">My Loan Information</a>
    		<ul>
    			<li><a href="#">Quick Statement</a></li>
    			<li><a href="#">NSLDS</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Bankruptcy</a></li>
    	<li><a href="#">Ombudsman</a></li>
    </ul>
    </body>
    </html>
    I'm using Christian Heilmann's solution from his page "beginningjavascript.com". Sorry the code is so long.

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I have the "bolding" of the current page done. The problem I'm having is including a function that will hide any other menu items that may be showing before opening the new menu item.

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    So is there an easier way to do this?

  10. #10
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Is this a stumper?

  11. #11
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have done something very similar to this with jQuery, and you will lose your bloated js in your <head>
    followed this article:
    http://www.learningjquery.com/2007/03/accordion-madness

    Instead of using toggle & slideUp:

    Code JavaScript:
    $(document).ready(function() {
      $('div#nav> ul li ul').hide();
      $('div#nav> ul li a').click(function() {
    	$(this).next('ul').show('fast')
    	.siblings('ul:visible').hide('fast');
      });
    });
    You might have to tweak it a little bit...

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. I will definitely use this...especially since I can get rid of all the bloat.


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
  •