[ TopSliderNavigation]
Mit diesem Script können Sie
eine platzsparende Navigationsleiste in Ihre Webseite integrieren. Die
einzelnen Laschen basieren auf Gif-Dateien, die Menüoptionen können
Sie über ImageMaps ansteuern. Ihrer Fantasie sind somit keine Grenzen
gesetzt.
[ zwischen <HEAD> und </HEAD>]
<script LANGUAGE="JavaScript">
<!-- Beginning of JavaScript
// Konfiguration der horizontalen Position für jede Menükategorie (Werte in Pixels)
// Bei mehr als drei Kategorien (wie hier im Beispiel) fügen Sie einfach menu4left, menu5left
// usw. hinzu
var menu1left=10
var menu2left=103
var menu3left=196
// Konfiguration der vertikalen Position Ihrer Menükategorien (Werte in Pixels)
// Dieser Wert muss für alle Kategorien gleich sein
var menutop=-110
// Diese Variable bestimmt die Geschwindigkeit der Menüs beim raus- und reinfahren
var pace=14
// Bei mehr als drei Kategorien erweitern Sie bitte die folgenden Einträge durch
// vorzeimenu4, vorzeimenu5 usw.
var vorzeimenu1=-1
var vorzeimenu2=-1
var vorzeimenu3=-1
// Diese Variablen nicht ändern!
//Browser Sniffer
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var mozup = (!document.all && document.getElementById) ? 1 : 0;
var step
var direction
var pause=25
var thismenu
var vorzeichen=1
var menuismoving="no"
// Bei mehr als drei Menükategorien müssen Sie die folgenden Funktionen ebenfalls erweitern
function inite() {
if (ns4up) {
document.menu1.left=menu1left
document.menu2.left=menu2left
document.menu3.left=menu3left
document.menu1.top=menutop
document.menu2.top=menutop
document.menu3.top=menutop
}
if (ie4up) {
document.all.menu1.style.posLeft=menu1left
document.all.menu2.style.posLeft=menu2left
document.all.menu3.style.posLeft=menu3left
document.all.menu1.style.posTop=menutop
document.all.menu2.style.posTop=menutop
document.all.menu3.style.posTop=menutop
}
if (mozup) {
document.getElementById("menu1").style.left=menu1left
document.getElementById("menu2").style.left=menu2left
document.getElementById("menu3").style.left=menu3left
document.getElementById("menu1").style.top=menutop
document.getElementById("menu2").style.top=menutop
document.getElementById("menu3").style.top=menutop
}
}
// Hier bitte nichts ändern
function getmenuname(clickedmenu) {
if (menuismoving=="no") {
if (ns4up) {
thismenu=eval("document."+clickedmenu)
}
if (ie4up) {
thismenu=eval("document.all."+clickedmenu+".style")
}
if (mozup) {
thismenu=eval(document.getElementById(clickedmenu).style)
}
step=pace
checkdirection()
movemenu()
}
}
// Bei mehr als drei Menükategorien bitte dementsprechend erweitern
function checkdirection() {
if (ns4up) {
if (thismenu==document.menu1){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
if (thismenu==document.menu2){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2}
if (thismenu==document.menu3){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3}
}
if (ie4up) {
if (thismenu==document.all.menu1.style){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
if (thismenu==document.all.menu2.style){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2}
if (thismenu==document.all.menu3.style){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3}
}
if (mozup) {
if (thismenu==document.getElementById("menu1").style){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
if (thismenu==document.getElementById("menu2").style){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2}
if (thismenu==document.getElementById("menu3").style){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3}
}
menuismoving="yes"
}
// Hier wieder unverändert lassen
function movemenu() {
if (ns4up) {
if (step>=0) {
thismenu.top+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
} else {
menuismoving="no"
clearTimeout(movetimer)
}
}
if (ie4up) {
if (step>=0) {
thismenu.posTop+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
} else {
menuismoving="no"
clearTimeout(movetimer)
}
}
if (mozup) {
if (step>=0) {
thismenu.top=parseInt(thismenu.top, 10)+step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
} else {
menuismoving="no"
clearTimeout(movetimer)
}
}
}
// -- End of JavaScript - -->
</SCRIPT>
<style type="text/css">
.menu {position:absolute;left:-1000px;}
</STYLE>
[ in den <BODY>-Tag]
onLoad="inite()"
[ an das Ende des Bereichs zwischen <BODY> und </BODY>]
<DIV ID="menu1" class="menu">
<IMG SRC="navtopslider1.gif"
USEMAP="#men1" BORDER=0>
<MAP NAME="men1">
<AREA SHAPE=RECT COORDS="0,115,93,150"
HREF="javascript:getmenuname('menu1')">
<AREA SHAPE=RECT COORDS="0,30,93,100"
HREF="http://www.url1" target="_blank">
</MAP></DIV>
<DIV ID="menu2" class="menu">
<IMG SRC="navtopslider2.gif"
USEMAP="#men2" BORDER=0>
<MAP NAME="men2">
<AREA SHAPE=RECT COORDS="0,115,93,150"
HREF="javascript:getmenuname('menu2')">
<AREA SHAPE=RECT COORDS="0,30,93,100"
HREF="http://www.url2.com" target="_blank">
</MAP></DIV>
<DIV ID="menu3" class="menu">
<IMG SRC="navtopslider3.gif"
USEMAP="#men3" BORDER=0>
<MAP NAME="men3">
<AREA SHAPE=RECT COORDS="0,115,93,150"
HREF="javascript:getmenuname('menu3')">
<AREA SHAPE=RECT COORDS="0,30,93,50"
HREF="http://www.url3.com" target="_blank">
</MAP></DIV>
[ ]
Copyright (c) 2000 Peter Gehrig and Urs Dudli.
info@24fun.ch.
modified by N8i (www.nightfire.ch)
[ ]