Navigations - Slide-Menue

  • Ein Navigationsmenü mit Aha-Effekt. Nicht dass man es unbedingt braucht, es erzeugt zumindest Aufmerksamkeit auf den Seiten, die etwas Besonderes bieten wollen.

    <style>#menuShow{border: 1px solid #666666;background-color: #111111;padding: 13px;font-size: 13px;font-family: Verdana, Arial;position: absolute;width: auto;height: auto;}#menuSelect{border: 1px solid #666666;background-color: #111111;padding: 13px;font-size: 13px;font-family: Verdana, Arial;position: absolute;width: auto;height: auto;}</style><div id="menuSelect"><a href="#" onClick="moveOnMenu();moveOffSelector()">>> Menu</a></div><div id="menuShow"><a href="#" onClick="moveOffMenu();moveOnSelector()"><< Menu</a> <a href="#">Menu Item A</a> <a href="#">Menu Item B</a> <a href="#">Menu Item C</a>< <a href="#">Menu Item D</a> <a href="#">Menu Item E</a><br><br><a href="#">Menu Item F</a><br><a href="#">Menu Item G</a> <a href="#">Menu Item H</a> </div><script>// (C) 2001 http://www.CodeLifter.com// #// Free for all users, but leave in this header.// Set Show to "yes" to show the menu on start-up.// Set Show to "no" to show the selector on start-up.Show ="yes";// Set OffX in pixels to a negative number // somewhat larger than the width of the menu.var OffX = -150;// Set the PosX and PosY variables// to the location on the screen where the// menu should position (in pixels) when stopped.var PosX = 250;var PosY = 100;// Usually, use the settings shown; but you can// change the speed and the increment of motion// across the screen, below.var speed = 1;var increment = 2;var incrementNS4 = 5; // for slower NS4 browsers// do not edit below this line// ===========================var is_NS = navigator.appName=="Netscape";var is_Ver = parseInt(navigator.appVersion);var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;var is_NS5up = is_NS&&is_Ver>=5;var MenuX=OffX;var SelX=PosX;var sPosX=PosX;var sOffX=OffX;if (Show=="yes"){sPosX=OffX;sOffX=PosX;MenuX=sOffX;SelX=sPosX;}if (is_NS4){increment=incrementNS4;Lq="document.layers.";Sq="";eval(Lq+'menuSelect'+Sq+'.left=sPosX');eval(Lq+'menuShow'+Sq+'.left=sOffX');eval(Lq+'menuSelect'+Sq+'.top=PosY');eval(Lq+'menuShow'+Sq+'.top=PosY');}else{Lq="document.all.";Sq=".style";document.getElementById('menuSelect').style.left=sPosX+"px";document.getElementById('menuShow').style.left=sOffX+"px";document.getElementById('menuSelect').style.top=PosY+"px";document.getElementById('menuShow').style.top=PosY+"px";} function moveOnMenu(){if (MenuX<PosX){ MenuX=MenuX+increment;if (is_NS5up){document.getElementById('menuShow').style.left=MenuX+"px";}else{eval(Lq+'menuShow'+Sq+'.left=MenuX');}setTimeout('moveOnMenu()',speed);}}function moveOffMenu(){if (MenuX>OffX){ MenuX=MenuX-increment;if (is_NS5up){document.getElementById('menuShow').style.left=MenuX+"px";}else{eval(Lq+'menuShow'+Sq+'.left=MenuX');}setTimeout('moveOffMenu()',speed);}}function moveOffSelector(){if (SelX>OffX){ SelX=SelX-increment;if (is_NS5up){document.getElementById('menuSelect').style.left=SelX+"px";}else{eval(Lq+'menuSelect'+Sq+'.left=SelX');}setTimeout('moveOffSelector()',speed);}}function moveOnSelector(){if (SelX<PosX){ SelX=SelX+increment;if (is_NS5up){document.getElementById('menuSelect').style.left=SelX+"px";}else{eval(Lq+'menuSelect'+Sq+'.left=SelX');}setTimeout('moveOnSelector()',speed);}}</script>