drop down menu

shanec1928 · 14-03-2012 7:39pm #1

have only started doing html recently with college and have a website to build using dreamweaver. for the website i want to use a drop down menu. i have code for a drop down menu for javascript but dont know how to integrate it with html see example.
would it be easier to integrate the javascript code and if so how? or should i just look to find code for a drop down menu in html

tramoreman · 14-03-2012 9:52pm

if you have to build it using code you would be better to go with html and css.

shanec1928 · 16-03-2012 7:23am

mods could this be moved back to where it was as i feel that it has nothing to do with design and belongs in with development!

cavancola73 · 16-03-2012 11:41am

hey checkout my easy dropdown menu http://www.mcidesign.ie/blog/

Giblet · 16-03-2012 12:15pm

<!DOCTYPE html>
<html>
	<head>
		<style>			
			ul { margin: 0; padding:0; list-style:none }
			ul ul { display:none;}
			ul li { float:left; padding:0 10px; }			
			ul li li { display:block; clear:left;padding:0}
			.hover ul { display:block; }
		</style>
	</head>
	<body>
		<ul id="menu">
			<li class="top-level"><a href="#">Menu 1</a>
				<ul>
					<li>Sub 1.1
					<li>Sub 1.2
					<li>Sub 1.3
				</ul>
			<li class="top-level"><a href="#">Menu 2</a>
			    <ul>
			    	<li>Sub 2.1
			    	<li>Sub 2.2
			    	<li>Sub 2.3
			    </ul>			
			<li class="top-level"><a href="#">Menu 3</a>
			    <ul>
			    	<li>Sub 3.1
			    	<li>Sub 3.2
			    	<li>Sub 3.3
			    </ul>
		</ul>
		<script>	
            //This is just scaffolding with some helper functions, put into a seperate file.
			var html;
			function isHostObjectProperty(object, property) {
				return !!(typeof(object[property]) == 'object' && object[property]);
			};
			function isHostMethod(object, method) {
				var reFeaturedMethod = new RegExp('^(function|object)$', 'i');
				var type = typeof object[method];
				return !!((reFeaturedMethod.test(type) && object[method]) || type == 'unknown');
			};
			if(isHostObjectProperty(document, 'documentElement')) {
				html = document.documentElement;
			}

			function getElementTag(el){
				var elTag = (el.tagName || el.nodeName).toLowerCase();
				return elTag.indexOf('html:') > -1 ? elTag.substring(5) : elTag;
			}
		
			var attachListener;			
			if(html && isHostMethod(html, 'addEventListener')) {
				attachListener = function(el, eventType, fn) { 
					el.addEventListener(eventType, fn, false); 
				};
			} 
			else if(html && isHostMethod(html, 'attachEvent')) {
				attachListener = function(el, eventType, fn) { 
					el.attachEvent('on'+eventType, fn); 
				};
			}
			var hasClass;
			if (html && isHostObjectProperty(html, "classList") && isHostMethod(html.classList, "contains") ) {
				hasClass = function(el, className) {
					return el.classList.contains(className);
				};
			}
			else if(html && "string" == typeof html.className) {
				hasClass = function(el, className) {
					return (new RegExp('(^|\\s)' + className + '(\\s|$)')).test(el.className);
				};
			}
			function getParentByClass(klass, child){				
				var parentFound = false;
				var element = child;
				while(!parentFound){
					
					if(hasClass(element,klass)){
						parentFound = true;							
					}
					else {
						if(element.parentNode != document.documentElement){
							element = element.parentNode;
						}
						
						else {
							break;
						}
					}
				}
				if(parentFound){
					return element;
				}
				else {
					return null;
				}
			}			
			var getEventTarget = function(e) { 
				var target = e.target; 
			    if (target) { 			
					if (1 != target.nodeType) { 				
						target = target.parentNode; 
					} 
			    } 
			    else { 
				    target = e.srcElement; 
			    } 
			    return target; 
			}
                        
            //Custom code for this solution            
			if('function' === typeof attachListener){
				var ul = document.getElementById('menu');				
				if(ul){									
					attachListener(ul,'mouseover',function(e){							
						var delegateTarget = getParentByClass('top-level',getEventTarget(e));
						if(delegateTarget){
							delegateTarget.className = 'top-level hover';
						}						
					},false);	
					attachListener(ul,'mouseout',function(e){							
						var delegateTarget = getParentByClass('top-level',getEventTarget(e));
						if(delegateTarget){
							delegateTarget.className = 'top-level';
						}						
					},false);					
				}				
			}	
		</script>
	</body>
</html>

I recommend using CSS only for this (adding this rule and removing the script will allow it to work css only)

 ul li:hover ul { display:block; }

, but if you need IE6, then the above will work.
Should work in all browsers (tested IE5.5 too

) If you have any questions just ask.

shanec1928 · 22-03-2012 12:47pm

so i should use a blank css file in dreameweaver and then add it to the website?

drop down menu

Comments