SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sublist and Main Nav Size width?

    Hello,

    I am doing a drop down menu using JavaScript but css to style it. I am having a difficult time matching the sub list to the main link and it looks funky. Once you see it you will know what I am talking about. Can you please take a look and see what is wrong?

    URL: http://abkdesign.com/test.html

    Thanks

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    set all default padding and margins to 0
    *{margin:0;padding:0;}

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    *{margin:0;padding:0;}
    
    #slidedown li {
    list-style-type:none;
    border-top:1px solid #000;
    }
    
    #slidedown ul{width:140px;}
    
    #slidedown {background:#ff6600;
    padding: 6px 5px 6px 5px;
    }
    
    #slidedown a {
    color: #000000;
    background:#CCCCCC;
    display:block;
    text-decoration: none;
    width:130px;
    padding: 6px 5px 6px 5px;
    }
    
    #slidedown a:hover{
    background:#003366;
    color:#ffffff;
    }
    
    
    </style>
    
    <script type="text/javascript">
    
    	var expandFirstItemAutomatically = 0;	// Expand first menu item automatically ?
    	var initMenuIdToExpand = false;	// Id of menu item that should be initially expanded. the id is defined in the <li> tag.
    	var expandMenuItemByUrl = false;	// Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand
    	
    	
    	var initialMenuItemAlwaysExpanded = true;	// NOT IMPLEMENTED YET
    	
    	var dhtmlgoodies_slmenuObj;
    	var divToScroll = false;
    	var ulToScroll = false;	
    	var divCounter = 1;
    	var otherDivsToScroll = new Array();
    	var divToHide = false;
    	var parentDivToHide = new Array();
    	var ulToHide = false;
    	var offsetOpera = 0;
    	if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;	
    	var slideMenuHeightOfCurrentBox = 0;
    	var objectsToExpand = new Array();
    	var initExpandIndex = 0;
    	var alwaysExpanedItems = new Array();
    		
    	function popMenusToShow()
    	{
    		var obj = divToScroll;
    		var endArray = new Array();
    		while(obj && obj.tagName!='BODY'){
    			if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
    				var objFound = -1;
    				for(var no=0;no<otherDivsToScroll.length;no++){
    					if(otherDivsToScroll[no]==obj){
    						objFound = no;		
    					}					
    				}	
    				if(objFound>=0){
    					otherDivsToScroll.splice(objFound,1);	
    				}		
    			}	
    			obj = obj.parentNode;
    		}	
    	}
    
    	function showSubMenu(e,inputObj)
    	{
    
    		if(this && this.tagName)inputObj = this.parentNode;
    		if(inputObj && inputObj.tagName=='LI'){
    			divToScroll = inputObj.getElementsByTagName('DIV')[0];
    			for(var no=0;no<otherDivsToScroll.length;no++){
    				if(otherDivsToScroll[no]==divToScroll)return;
    			}			
    		}
    		hidingInProcess = false;
    		if(otherDivsToScroll.length>0){
    			if(divToScroll){				
    				if(otherDivsToScroll.length>0){
    					popMenusToShow();
    				}
    				if(otherDivsToScroll.length>0){	
    					autoHideMenus();
    					hidingInProcess = true;
    				}
    			}	
    		}		
    		if(divToScroll && !hidingInProcess){
    			divToScroll.style.display='';
    			otherDivsToScroll.length = 0;
    			otherDivToScroll = divToScroll.parentNode;
    			otherDivsToScroll.push(divToScroll);	
    			while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
    				if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
    					otherDivsToScroll.push(otherDivToScroll);					
    				}
    				otherDivToScroll = otherDivToScroll.parentNode;
    			}			
    			ulToScroll = divToScroll.getElementsByTagName('UL')[0];
    			if(divToScroll.style.height.replace('px','')=='0')scrollDownSub();
    		}	
    		
    
    	}
    	
    	
    
    	function autoHideMenus()
    	{
    		if(otherDivsToScroll.length>0){
    			divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
    			parentDivToHide.length=0;
    			var obj = divToHide.parentNode.parentNode.parentNode;
    			while(obj && obj.tagName=='DIV'){			
    				if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
    				obj = obj.parentNode.parentNode.parentNode;
    			}
    			var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
    			if(tmpHeight<0)tmpHeight=0;
    			if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight  + 'px';
    			ulToHide = divToHide.getElementsByTagName('UL')[0];
    			slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
    			scrollUpMenu();		
    		}else{
    			slideMenuHeightOfCurrentBox = 0;
    			showSubMenu();			
    		}
    	}
    
    	
    	function scrollUpMenu()
    	{
    
    		var height = divToHide.offsetHeight;
    		height-=15;
    		if(height<0)height=0;
    		divToHide.style.height = height + 'px';
    	
    		for(var no=0;no<parentDivToHide.length;no++){	
    			parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
    		}
    		if(height>0){
    			setTimeout('scrollUpMenu()',1); // Speed of the menu going down
    		}else{
    			divToHide.style.display='none';
    			otherDivsToScroll.length = otherDivsToScroll.length-1;
    			autoHideMenus();			
    		}
    	}	
    	
    	function scrollDownSub()
    	{
    		if(divToScroll){			
    			var height = divToScroll.offsetHeight/1;
    			var offsetMove =Math.min(5,(ulToScroll.offsetHeight - height));
    			height = height +offsetMove ;
    			divToScroll.style.height = height + 'px';
    			
    			for(var no=1;no<otherDivsToScroll.length;no++){
    				var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
    				otherDivsToScroll[no].style.height = tmpHeight + 'px';
    			}			
    			if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
    				divToScroll = false;
    				ulToScroll = false;
    				if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
    					initExpandIndex++;
    					
    					showSubMenu(false,objectsToExpand[initExpandIndex]);
    				}
    			}
    		}
    	}
    		
    	function initSubItems(inputObj,currentDepth)
    	{		
    		divCounter++;		
    		var div = document.createElement('DIV');	// Creating new div		
    		div.style.overflow = 'hidden';	
    		div.style.position = 'relative';
    		div.style.display='none';
    		div.style.height = '0px';
    		div.id = 'slideDiv' + divCounter;
    		div.className = 'slideMenuDiv' + currentDepth;		
    		inputObj.parentNode.appendChild(div);	// Appending DIV as child element of <LI> that is parent of input <UL>		
    		div.appendChild(inputObj);	// Appending <UL> to the div
    		var menuItem = inputObj.getElementsByTagName('LI')[0];
    		while(menuItem){
    			if(menuItem.tagName=='LI'){
    				var aTag = menuItem.getElementsByTagName('A')[0];
    				aTag.className='slMenuItem_depth'+currentDepth;	
    				var subUl = menuItem.getElementsByTagName('UL');
    				if(subUl.length>0){
    					initSubItems(subUl[0],currentDepth+1);					
    				}
    				aTag.onclick = showSubMenu;				
    			}			
    			menuItem = menuItem.nextSibling;						
    		}		
    	}
    	
    	function initSlideDownMenu()
    	{
    		dhtmlgoodies_slmenuObj = document.getElementById('slidedown');
    		dhtmlgoodies_slmenuObj.style.visibility='visible';
    		var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];		
    		var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
    		mainItemCounter = 1;
    		while(mainMenuItem){			
    			if(mainMenuItem.tagName=='LI'){
    				var aTag = mainMenuItem.getElementsByTagName('A')[0];
    				aTag.className='slMenuItem_depth1';	
    				var subUl = mainMenuItem.getElementsByTagName('UL');
    				if(subUl.length>0){
    					mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
    					initSubItems(subUl[0],2);
    					aTag.onclick = showSubMenu;
    					mainItemCounter++;
    				}				
    			}			
    			mainMenuItem = mainMenuItem.nextSibling;	
    		}		
    		
    		if(location.search.indexOf('mainMenuItemToSlide')>=0){
    			var items = location.search.split('&');
    			for(var no=0;no<items.length;no++){
    				if(items[no].indexOf('mainMenuItemToSlide')>=0){
    					values = items[no].split('=');
    					showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));	
    					initMenuIdToExpand = false;				
    				}
    			}			
    		}else if(expandFirstItemAutomatically>0){
    			if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
    				showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
    				initMenuIdToExpand = false;
    			}
    		}
    
    		if(expandMenuItemByUrl)
    		{
    			var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
    			for(var no=0;no<aTags.length;no++){
    				var hrefToCheckOn = aTags[no].href;				
    				if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
    					initMenuIdToExpand = false;
    					var obj = aTags[no].parentNode;
    					while(obj && obj.id!='slidedown'){
    						if(obj.tagName=='LI'){							
    							var subUl = obj.getElementsByTagName('UL');
    							if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
    							if(subUl.length>0){								
    								objectsToExpand.unshift(obj);
    							}
    						}
    						obj = obj.parentNode;	
    					}
    					showSubMenu(false,objectsToExpand[0]);
    					break;					
    				}			
    			}
    		}
    				
    		if(initMenuIdToExpand)
    		{
    			objectsToExpand = new Array();
    			var obj = document.getElementById(initMenuIdToExpand)
    			while(obj && obj.id!='slidedown'){
    				if(obj.tagName=='LI'){
    					var subUl = obj.getElementsByTagName('UL');
    					if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
    					if(subUl.length>0){						
    						objectsToExpand.unshift(obj);
    					}
    				}
    				obj = obj.parentNode;	
    			}
    			
    			showSubMenu(false,objectsToExpand[0]);
    
    		}
    		
    
    			
    	}
    	window.onload = initSlideDownMenu;
    	</script>
    
    
    
    </head>
    
    <body>
    
    		<div id="slidedown">
    			<ul>
    				
    				<li><a href="#">Support</a>
    					<ul>
    						<li><a href="http://www.dhtmlgoodies.com/">Phone</a></li>
    						<li><a href="http://www.dhtmlgoodies.com/">Email</a></li>
    						<li><a href="http://www.dhtmlgoodies.com/">QnA</a></li>
    					</ul>		
    				</li>
    				<li><a href="#">History</a>
    					<ul>
    						<li><a href="http://www.dhtmlgoodies.com/">1900 - 1940</a></li>
    						<li><a href="http://www.dhtmlgoodies.com/">1941 - 1980 </a></li>
    						<li><a href="http://www.dhtmlgoodies.com/">1981 - Present time</a></li>
    					</ul>
    				</li>
    			
    			</ul>
    		</div>
    
    </body>
    
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks it is fixed


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
  •