Back to the very first page/zurück zur allerersten Seite

Schwebende Navigationsleiste


Startseite
Homepage-Bastler
Grundlagen HTML Grafiken einfügen Tabellen Linksammlung
Javaspielereien I Javaspielereien II schwebende
Navigationsleiste
Frames Formulare
Beispielseite I Beispielseite II Beispielseite III Beispielseite IV Frame Beispielseite
Hintergründe Buttons Cliparts    

Ab der Browserversion 4 bei Netscape und dem Internet Explorer gibt es auch die Möglichkeit, Navigationsleisten mit DHTML zu erstellen. Dies ist eigentlich keine neue Sprache, sondern eine Mischung aus verschiedenen Programmiersprachen. Auch wer, wie ich, keine Ahnung vom Programmieren hat, kann interessante Funktionen in seine eigenen Seiten einbauen.

Hier soll es um den Einbau und die Anpassung von fertigen Scripts gehen. DHTML-Scripts gibt es von einigen Anbietern kostenlos aus dem Netz herunter zu laden (siehe auch meine Linksammlung)

Besonders faszinierend an der neuen Technik, sind die Navigationsleisten, die immer an der selben Stelle bleiben, egal wie lang eine Seite ist. Die Navigationsleiste, die hier zu sehen ist, stammt von der Dynamicdrive-Seite und funktioniert nur, wenn auf jeder Internetseite, wo die schwebende navigationsleiste stehen soll, vor dem html folgende Zeile eingefügt wird:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Sollte es in Ihrer Version trotzdem nicht klappen, versuchen Sie es doch einmal mit der Leiste von http://www.schickecity.de.

Schritt 1.
Man beginnt mit der Eingabe des folgenden Textes in den Head der Seite:

<STYLE>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:#00009d;text-decoration:none;}
//-->
</STYLE>
<SCRIPT SRC="ssm.js" language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)
//Site: http://www.absolutegb.com/maximus
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
</SCRIPT>
<SCRIPT SRC="ssmItems.js" language="JavaScript1.2"></SCRIPT>

Schritt 2.
Nun wird folgende Datei heruntergeladen, entzippt und im gleichen Verzeichnis gespeichert, wie die Dateien:
menu.zip

Schritt 3.
In einem Word-Editor (z. B. WordPad) öffnet man nun die Datei ssmltems.js:

Diese Datei ist die Grundlage für alle Seiten, auf denen die Navigationsleiste erscheinen soll. Hier wird festgelegt, welche Farbe und Größe die Links und die ganze Leiste hat. Sollten Änderungen auftreten, braucht man das Navigationsmenü nicht auf jeder Seite ändern, sondern lediglich einmal in dieser ssmltems.js Datei.

Erklärung der einzelnen befehle in dieser Datei:
  • menuBGColor="#f0f0f0"; verändert die Farbe des immer zu sehenden schmalen Balkens (Hier ist er dunkelgrau)

  • menuWidth=150; // Must be a multiple of 10! no quotes!! gibt die Breite des erscheinenden Menüs an

  • hdrFontFamily="arial";
    hdrFontSize="2";
    hdrFontColor="#ffffff";
    hdrBGColor="#808080";
    hdrAlign="left";
    hdrVAlign="center";
    hdrHeight="15";
    macht Angaben über Farbe, Größe, Scriftart usw. von den Titelzeilen, die als Überschrift dienen und die nicht verlinkt werden

  • linkFontFamily="arial";...usw. macht das Gleiche für die Links

  • barBGColor="#808080"; ... usw. gibt an, wie die Navigationsleiste, die immer zu sehen ist, formatiert werden soll

  • ssmItems[0]=["Bitte auswählen"] //create header erzeugt eine Überschrift ohne Verlinkung und zwar in den oben angegebene Formatierungen

    ssmItems[1]=["Linkname", "http://www.linkadresse.com", "_new"] erzeugt einen anklickbaren Link (hier wird auch angegeben, wo diese neue Seite erscheinen soll - nämlich in einem neuen Fenster. Wenn es im gleichen Fenster erscheinen soll, wird das _new weggelassen, z. B.:
    ssmItems[1]=["Dynamic Drive", "http://www.dynamicdrive.com", ""]


  • zurück zum Seitenanfang




    Zurück zur ersten Seite Zurück zum Inhaltsverzeichnis Zum Übersichtsplan/to Sitemap