Amazing Glide Menu (I Wana Used)

<!
-============================================================ Script: Amazing Glide-In Menu Script Functions: When an icon is clicked, this script glides in a menu from screen-left. Clicking on the same icon in the menu causes it to slide off the screen, with the triggering icon sliding back in. The script can be set to have either the trigger icon or the menu show on start-up; and the menu and trigger icon positions can be set via script variables. An easy install, and a cool effect. Browsers: IE4-6,NS4-6 (some limited functionality in NS4)
Author: etLux ============================================================ INSTRUCTIONS: This is another case where the script is actually fairly easy to install and set up, but the simplest way to present it is in a full-page working demo. Copy and paste this entire selection into a blank page. Follow the intructions commented into the script. ============================================================ //--> <html> <head> <!-Put the <style> script in the <head> of your page. Set up the border, background-color, padding, and font elements as needed. Leave the position as is. Width and height can be set as auto, or you can specify these in pixels. //--> <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> </head> <body bgcolor="#000000"> <!-Place the two <div>'s below in the <body> of your code. (Normally, this will be immediately after the <body> tag.) The menuShow div will contain your links; change the text, links, and targets as needed. //--> <div id="menuSelect"> <a href="#" onClick="moveOnMenu();moveOffSelector()"> <img src="icon.gif" width="28" height="28" border="0"></a> </div> <div id="menuShow"> <a href="#" onClick="moveOffMenu();moveOnSelector()"> <img src="icon.gif" width="28" height="28" border="0"></a> <br> <br> <a href="http://www.codelifter.com">Menu Item A</a><br> <a href="http://www.codelifter.com">Menu Item B</a><br> <a href="http://www.codelifter.com">Menu Item C</a><br> <br> <a href="http://www.codelifter.com">Menu Item D</a><br> <a href="http://www.codelifter.com">Menu Item E</a><br> <br> <a href="http://www.codelifter.com">Menu Item F</a><br> <a href="http://www.codelifter.com">Menu Item G</a><br> <a href="http://www.codelifter.com">Menu Item H</a><br> </div> <!-Put the following script immediately *after* the <div>'s (above) in your page. Set the variables as indicated in the script. //--> <script> // (C) 2001 www.CodeLifter.com // 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 = 1; var incrementNS4 = 5; // for slower NS4 browsers // do not edit below this line // =========================== var var var var var var var var is_NS = navigator.appName=="Netscape"; is_Ver = parseInt(navigator.appVersion); is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5; is_NS5up = is_NS&&is_Ver>=5; MenuX=OffX; SelX=PosX; sPosX=PosX; 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> </body> </html> <!-============================================================ //-->

Amazing Glide Menu (I Wana Used)

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Amazing Glide Menu (I Wana Used)

Încărcat de

Drepturi de autor:

Formate disponibile

<!

S-ar putea să vă placă și