Direct Link
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> |


Recent Comments
November 16, 2010 (1:49)
August 19, 2010 (1:41)
August 13, 2010 (9:35)