dhteumeuleu » M6 menu

M6 menu

On December 8, 2005, in demo, by ge1doot

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/M6-menu.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>M6 menu - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		background: #111; 
		width:100%; 
		height:100%; 
	} 
	#menu { 
		position:relative; 
		left:50%; 
		margin-left:-200px; 
		padding: 10px; 
		background: #000; 
		height: 300px; 
		width: 400px; 
	} 
	#menu a { 
		display:block; 
		text-decoration:none; 
		font-family: arial, helvetica, verdana, sans-serif; 
		white-space: nowrap; 
	} 
 
</style> 
 
<script type="text/javascript"> 
// =============================================================== 
//                -------- M6 menu ------ 
// script written by Gerard Ferrandez - Ge-1-doot - December 2005 
// http://www.dhteumeuleu.com 
// updated Feb 2010 - namespaced 
// =============================================================== 
// 
 
var M6 = function () { 
	var P,T; 
	var over = -1; 
	/////////////////////////////////// 
	var fontSize = 38; 
	var lensFX = 1; 
	var num = true; 
	var color = "#FFF"; 
	var selected = "#F80"; 
	/////////////////////////////////// 
	var zoom = function (s){ 
		if(s!=over){ 
			over = s; 
			var i = 0,o; 
			while (o = P[i]) { 
				o.style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px"; 
				o.style.color=(i==s)?selected:color; 
				i++; 
			} 
		} 
	} 
	//////////////////////////////////////////////////////////// 
	var init = function () { 
		P = document.getElementById("menu").getElementsByTagName("a"); 
		var i = 0,o; 
		while (o = P[i]) { 
			if(num){ 
				x=(i+1)+"."; 
				if(x.length<3)x="0"+x; 
				o.innerHTML = x+o.innerHTML; 
			} 
			o.style.width = "100%"; 
			o.i = i; 
			o.onmouseover= function() { 
				zoom(this.i); 
			} 
			i++; 
		} 
		zoom(0); 
	} 
	//////////////////////////////////////////////////////////// 
	return { 
		init : init 
	} 
}(); 
 
 
onload = function(){ 
	M6.init(); 
} 
</script> 
</head> 
 
<body> 
 
	<div id="menu"> 
		<a href="http://del.icio.us/tag/scripting">scripting</a> 
		<a href="http://del.icio.us/tag/javascript">javascript</a> 
		<a href="http://del.icio.us/tag/web">web</a> 
		<a href="http://del.icio.us/tag/dhtml">dhtml</a> 
		<a href="http://del.icio.us/tag/css">css</a> 
		<a href="http://del.icio.us/tag/ajax">ajax</a> 
		<a href="http://del.icio.us/tag/programming">programming</a> 
		<a href="http://del.icio.us/tag/design">design</a> 
		<a href="http://del.icio.us/tag/webdesign">webdesign</a> 
		<a href="http://del.icio.us/tag/html">html</a> 
		<a href="http://del.icio.us/tag/dom">dom</a> 
		<a href="http://del.icio.us/tag/webdev">webdev</a> 
		<a href="http://del.icio.us/tag/reference">reference</a> 
		<a href="http://del.icio.us/tag/tools">tools</a> 
		<a href="http://del.icio.us/tag/tutorial">tutorial</a> 
		<a href="http://del.icio.us/tag/xmlhttprequest">xmlhttprequest</a> 
		<a href="http://del.icio.us/tag/menu">menu</a> 
		<a href="http://del.icio.us/tag/xml">xml</a> 
		<a href="http://del.icio.us/tag/library">library</a> 
		<a href="http://del.icio.us/tag/development">development</a> 
 
	</div> 
 
</body> 
</html>

Tagged with: menu • text