Javascript  »  Navigationen  »  Sliding Menu

zur Übersicht

Kategorie	Navigationen
Bezeichnung	Sliding Menu
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	39720 Aufrufe davon 0x gestern
Keine Beschreibung vorhanden.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <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> <br> <br> <a href="#">Menu Item A</a><br> <a href="#">Menu Item B</a><br> <a href="#">Menu Item C</a><br> <br> <a href="#">Menu Item D</a><br> <a href="#">Menu Item E</a><br> <br> <a href="#">Menu Item F</a><br> <a href="#">Menu Item G</a><br> <a href="#">Menu Item H</a><br> </div> <script> // (C) 2001 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>

Kommentare zu Sliding Menu

2 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 26.03.2003 um 03:49 Uhr von rob
zu billig...... 

am 08.03.2003 um 15:13 Uhr von Michael Kaske
Sieht gut aus, funktioniert gut. Prima Idee... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen