[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>

[Autor]

Copyright (c) 2000 Peter Gehrig and Urs Dudli.
info@24fun.ch.
modified by N8i (www.nightfire.ch)

[Download]

Copyright © 1998- Nightfire Webworker Archiv Script No: 0299