Question about menu on a website

**briandap** · 12-04-2008, 06:52 PM

Hi everyone I am new so forgive my newbness, also I am new to more intermediate CSS and DHTML.

I am trying to figure out how to make, or even get a pre-made side menu with image. Hard to explain, but basically like the one on the Firedog website (www.firedog.com) where you click on the service and the menu expands down with options and an image on the right.

Any ideas? I'm not great at scripting my own, so anyone know of any pre-made ones I can possibly work with? Thanks!

**bluewalrus** · 12-04-2008, 07:23 PM

Like with the drop down? or just the blocks?
if the drop down part its going to be part java

**bluewalrus** · 12-04-2008, 07:44 PM

Try this if you want the drop down feature.
You can also view the source of any page and see how they made.
This isn't the exact way they made it but similar I think.

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=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var blue_slideSpeed = 10;	// Higher value = faster
var blue_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var blue_activeId = false;
var blue_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(blue_slideInProgress)return;
	blue_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var showDiv = document.getElementById('blue_a' + numericId);

	objectIdToSlideDown = false;
	
	if(!showDiv.style.display || showDiv.style.display=='none'){		
		if(blue_activeId &&  blue_activeId!=numericId){			
			objectIdToSlideDown = numericId;
			slideContent(blue_activeId,(blue_slideSpeed*-1));
		}else{
			
			showDiv.style.display='block';
			showDiv.style.visibility = 'visible';
			
			slideContent(numericId,blue_slideSpeed);
		}
	}else{
		slideContent(numericId,(blue_slideSpeed*-1));
		blue_activeId = false;
	}	
}

function slideContent(inputId,direction)
{
	
	var obj =document.getElementById('blue_a' + inputId);
	var contentObj = document.getElementById('blue_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',blue_timer);
	}else{
		if(height<=1){
			obj.style.display='none'; 
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('blue_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('blue_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,blue_slideSpeed);				
			}else{
				blue_slideInProgress = false;
			}
		}else{
			blue_activeId = inputId;
			blue_slideInProgress = false;
		}
	}
}



function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='blue_video'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'blue_q'+divCounter;
			var show = divs[no].nextSibling;
			while(show && show.tagName!='DIV'){
				show = show.nextSibling;
			}
			show.id = 'blue_a'+divCounter;	
			contentDiv = show.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
			contentDiv.className='blue_show_content';
			contentDiv.id = 'blue_ac' + divCounter;
			show.style.display='none';
			show.style.height='1px';
			divCounter++;
		}		
	}	
}
window.onload = initShowHideDivs;
</script>
<style type="text/css">
ul {
padding:0; margin:0; list-style-type:none; border:3px #000099 solid; background:#FFFF00; width:225px;
padding-left:5px;
}
#contain {
background-color:#00FF00;
color:#000000;
font-size:18px;
border:4px #FF0000 solid;
width:245px;
}
</style>
</head>

<body>
<div id="contain">
<div class="blue_video">Link 1</div>
	<div class="blue_show">
		<div> 
        <ul>
        <li><a href="">Links you want to open but are hidden at first</a></li>
         <li><a href="">Links you want to open</a></li>
         <li><a href="">Links you want to open</a></li> 
        <li><a href="">Links you want to open</a></li> 
        <li><a href="">Links you want to open</a></li>
        </ul>
</div>
</div><div class="blue_video">Link 2</div>
	<div class="blue_show">
		<div> 
        <ul>
        <li><a href="">Links you want to open but are hidden at first</a></li>
         <li><a href="">Links you want to open</a></li>
         <li><a href="">Links you want to open</a></li> 
        <li><a href="">Links you want to open</a></li> 
        <li><a href="">Links you want to open</a></li>
        </ul>
</div>
</div>
<div class="blue_video">Link 3</div>
	<div class="blue_show">
		<div> 
        <ul>
        <li><a href="">Links you want to open but are hidden at first</a></li>
         <li><a href="">Links you want to open</a></li>
         <li><a href="">Links you want to open</a></li> 
        <li><a href="">Links you want to open</a></li> 
        <li><a href="">Links you want to open</a></li>
        </ul>
</div>
</div>
<div class="blue_video">Link 4</div>
	<div class="blue_show">
		<div> 
        <ul>
        <li><a href="">Links you want to open but are hidden at first</a></li>
         <li><a href="">Links you want to open</a></li>
         <li><a href="">Links you want to open</a></li> 
        <li><a href="">Links you want to open</a></li> 
        <li><a href="">Links you want to open</a></li>
        </ul>
</div>
</div>
</div>
</body>
</html>

**briandap** · 12-05-2008, 12:40 AM

Yeah actually that's pretty good. What about having a picture display on the right when you click one of the main links?

**bluewalrus** · 12-05-2008, 05:56 AM

in the drop down or on the hover try? background:url(imagename.extension) right norepeat; on whatever tag you decide you want it on or if can tell me where you want it i can get more specific. You might want to put that in dreamweaver or something that checks it i'm free handing right now and am not 100% sure that's all right.

hahah opps corrected the left to right up there don't know if you've seen it or not yet

Thread: Question about menu on a website

Thread Tools

Search Thread

Question about menu on a website

Bookmarks

Bookmarks

Posting Permissions