Web Design Forums

Daimz · 15-03-2008, 05:41

does anyone know how I can make and expanding menu like this one.

phatfusion.net/imagemenu/index.htm
(just add the h.t.t.p://.w.w.w. to the link i cant post link yet so this is the best i can do sorry)

But with one difference. From what I have found this menu requires that all images are the same width. If the image is smaller it will repeat the image rather than only expand to the size of the smaller image. Now I have a few images that are of different widths so I was wondering if anyone knew a way that I could achieve that or how I could edit this code to do that?
Thanx

Smiats · 15-03-2008, 08:45

Had a go but couldn't get it perfect

tools.com.net.sc/test.php (on a free subdomain as it's a test site so cba to pay)

Here is the coding:

Code:

<html>
<head>
<title>Sliding Menu</title>
	<meta http-equiv='Page-Enter' content='progid:DXImageTransform.Microsoft.Fade(Duration=1.5)' />
	<meta http-equiv='Page-Exit' content='progid:DXImageTransform.Microsoft.Fade(Duration=1.5)' />
<style type='text/css'>
body {
	background: #FFF;
	color: #444444;
	font-size: 12px;
	font-family: Arial;
	}
#main {
	background: #FFFFFF;
	height: 300px;
	width: 50%;
	margin: 0px;
	}
.layer {
	height: 100%;
	width: 16%;
	margin: 0px;
	}
</style>
<script type='text/javascript'>
<!--
	var i = 16;
function expand(id)
{
	var layer = document.getElementById(id).style;
	if(i != 40)
		{
			i += 1;
			layer.width = i + "%";
		}
		
		if(id=="layer1"){time = setTimeout('expand("layer1")', 1)}
		if(id=="layer2"){time = setTimeout('expand("layer2")', 1)}
		if(id=="layer3"){time = setTimeout('expand("layer3")', 1)}
		if(id=="layer4"){time = setTimeout('expand("layer4")', 1)}
		if(id=="layer5"){time = setTimeout('expand("layer5")', 1)}
}
function stop(id)
{
	document.getElementById(id).style.width = "16%";
	i = 16;
	clearTimeout(time);
}
//-->
</script>
</head>
<body>
	<table id='main'>
		<tr>
			<td align='center' height='50px' width='100%' colspan='5'>
				Javascript Box
			</td>
		</tr>

			<tr>
				<td id='layer1' class='layer' bgcolor='#111111' onMouseOver='expand("layer1")' onMouseOut='stop("layer1")'></td>
				
				<td id='layer2' class='layer' bgcolor='#333333' onMouseOver='expand("layer2")' onMouseOut='stop("layer2")'></td>
		
				<td id='layer3' class='layer' bgcolor='#555555' onMouseOver='expand("layer3")' onMouseOut='stop("layer3")'></td>
	
				<td id='layer4' class='layer' bgcolor='#777777' onMouseOver='expand("layer4")' onMouseOut='stop("layer4")'></td>
	
				<td id='layer5' class='layer' bgcolor='#999999' onMouseOver='expand("layer5")' onMouseOut='stop("layer5")'></td>			
				<!-- This layer was put in place to make layer5 work -->
				<td id='layer6' class='layer' bgcolor='#FFFFFF'></td></tr>
			</tr>
				</table>
</body>
</html>

15-03-2008, 05:41	#1 (permalink)
Daimz Registered User Join Date: Mar 2008 Posts: 4	expandable menu in css does anyone know how I can make and expanding menu like this one. phatfusion.net/imagemenu/index.htm (just add the h.t.t.p://.w.w.w. to the link i cant post link yet so this is the best i can do sorry) But with one difference. From what I have found this menu requires that all images are the same width. If the image is smaller it will repeat the image rather than only expand to the size of the smaller image. Now I have a few images that are of different widths so I was wondering if anyone knew a way that I could achieve that or how I could edit this code to do that? Thanx

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)