Tulos

Helposti muunneltava liukuva linkkimenu.

Koodi

Tämä tulee HEAD-osastoon

<!--  Voit muunnella menun ulkomuotoa
	(paitsi POSITIONia) makusi mukaan   -->

<style type="text/css">
#menuShow{
border: 1px solid #00ffff;
padding: 13px;
font-size: 12px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}

#menuSelect{
padding: 13px;
position: absolute;
width: auto;
height: auto;
}
</style>

Tämä tulee BODY-osastoon

<!--  Aseta koodi heti BODY-elementin alkuun -
	muuntele tekstit ja linkit tarpeittesi mukaan -
	vaihda omat kuvasi esimerkkikuvien tilalle -->

<div id="menuSelect">
<a href="javascript:void('0');" onClick="moveOnMenu();moveOffSelector()">
<img src="kuvat/links.gif" border="0" alt="Näytä linkit" width="100" height="33"></a>
</div>
<div id="menuShow">
<p><a href="javascript:void('0');" onClick="moveOffMenu();moveOnSelector()">
<img src="kuvat/x.gif" border="0" alt="Piilota linkit" width="100" height="33"></a>
</p>
<p><a href="http://weppipakki.com/">Weppipakki</a><br>
<a href="http://www.cs.tut.fi/~jkorpela/">Jukka Korpela</a><br>
<a href="http://www.codelifter.com/">CodeLifter</a></p>
</div>
<script type="text/javascript">
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com/
// Ilmainen kaikille, mutta jätä tämä paikoilleen.
// Modified: Osmo Saarikumpu 2001-08-27 (satoi koko päivä)

// aseta Show:n arvoksi "yes", jotta menu olisi aluksi näkyvissä
// aseta Show:n arvoksi "no", jotta menu olisi aluksi piilossa

Show ="no";

// aseta OffX:n arvoksi tarpeeksi suuri negatiivinen luku
// kokeile eri vaihtoehtoja

var OffX = -200;

// aseta menun asema PosX ja PosY muuttujilla (kuvapisteinä)

var PosX =  300;
var PosY =  10;

// voit vaikuttaa menun/kuvan siirtonopeuteen
// muuntelemalla ao. arvoja
// kokeile eri vaihtoehtoja

var speed        = 100;
var increment    = 100;
var incrementNS4 = 150; // hitaimmille NS4-selaimille

// älä muuntele tämän viivan jälkeen
// =================================

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>