scriptwelt.org das JavaScript Archiv

Ein Slidermenü.
Autor: CodeLifter.com
zur Demo

<style>

#menuShow{
border: 1px solid #666666;
background-color: #c0c0c0;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}

#menuSelect{
border: 1px solid #666666;
background-color: #c0c0c0;
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>