 15 expand 02 horizontal
CSS-definierte Bereiche werden auf Klick sichtbar / unsichtbar geschaltet (ein- und ausgeblendet). Der letzte Zustand wird beim Verlassen der Seite in einem Cookie abgelegt und beim erneuten Aufruf der Seite entsprechend angezeigt. Das trifft ebenfalls zu, wenn das Menü in der aufgerufenen Folgeseite eingebunden ist.
Variante zum Beispiel 01 vertikal
Bescheiden, und auf den ersten Blick völlig unspektakulär. Dabei in der Modifikatin völlig simpel: JavaScript + CSS-formatiertes Klappmenü. Die Grundstruktur für dieses Beispiel fand ich bei: The JavaScript Source
Beispiel 02 - horizontales Menü  Beispiel 01 vertikales Menü
Symbole (   ) vor dem Thementitel anklicken
Wenn sie wie im Beispiel die Images beibehalten wollen, können sie das Menü ohne großen Aufwand in Ihre Seite einbinden!
Demo der grundsätzlichen Notierung:
Grundstruktur für das Menü ist eine Liste auf der Basis von üblichen <UL> und <LI> Tags.
Aus einer normalen Aufzählung wird durch die Vergabe einer ID und dem Aufruf einer JavaScript-Funktion ein Menü wenn die Listenpunkte noch als Link deklariert werden.
Die Einrückung und Unterdrückung der normalen Listensymbole erledigt CSS, den Rest das Script. Sie notieren Listen, deren Elelemete die Textlinks darstellen.
übliche Liste
<ul>
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
<li>Menüpunkt 4</li>
</ul>
|
zusätzliche Eintragungen
<ul id="containerul">
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
<li>Menüpunkt 4</li>
</ul>
<script type="text/javascript">
initiate();
</script>
|
Dann nur noch die Links eintragen:
<li><a href="dateiname.htm">Menüpunkt 1</a></li>
Die Liste kann natürlich verschachteltelt werden. Das bedeutet eine Liste kann weitere Listen enthalten.
Zusätzlich für das horizontale Menü:
Die Oberbegriffe des Menüs stehen hier innerhalb von Tabellenzellen einer Tabelle, damit das Layout auch im Mozilla Firefox gleich bleibt.
Die Vergabe der "ID" ordnet die CSS-Anweisungen (Formatierung für die Liste) dem gesamten Tabelleninhalt zu. Aufzählungsstruktur des Menü-Beispiels oben:
<table id="containerul" ...
|
|
|
<ul>
<li>Mini Images
<ul>
<li>Buttons</li>
<li>Smilies</li>
<li>Piktogramme</li>
</ul>
</li>
</ul>
|
<ul>
<li>Web-Toolbox
<ul>
<li>CSS-Beispiele</li>
<li>JavaScripts
<ul>
<li>Mathematik</li>
<li>Formulare</li>
<li>Datum</li>
</ul>
<li>
</ul>
</li>
</ul>
|
<ul>
<li>Geilenkirchen
<ul>
<li>unsere Stadt</li>
<li>Infrastruktur</li>
<li>Adressen
<ul>
<li>Gastronomie</li>
<li>Behörden</li>
<li>Vereine</li>
</ul>
<li>
<li>Sehenswertes</li>
</ul>
</li>
</ul>
|
Das Layout der Navigation wird u.U. durch die Größe der Ordnersymbole und Größe der Schrift verändert.
Die Breite der Tabellenzellen wird durch ein transparente Images in der ersten Tabellenzeile erzwungen.
Aufwand
- CSS Anweisung in den Head kopieren
- Verweis zur externen JS-Datei eintragen
- Aufzählung entwerfen
- ID eintragen
- Funktionsaufruf eintragen
- Links eintragen
Anpassngen
Zur Anpassung der Linkformatierung ändern sie die Angaben in den CSS-Anweisungen
Die Images der Symbole sind in der externen JS-Datei festgelegt. Dort kann man natürlich andere Images einbinden.
Auswahl:
                  
(weitere finden sie in meiner MINI-IMAGE-BOX)
In der externen JS-Datei legen Sie die URL der Images (die als Hintergrundimages deklariert sind) in Zeile 28 und 49 fest
Beispiel:
temp2.style.backgroundImage = "url(page.gif)";
Funktion
Zur Funktion müssen Cookies erlaubt sein. Das Menü hat ein 'Gedächtnis', es werden Cookies auf die Festplatte geschrieben worin der letzte (Aufklapp-)Status und die Struktur gespeichert ist.
Auch die Organisation der Cookies wird vom externen JavaScript verwaltet!
Das JavaScript wird im HEAD der HTML-Datei eingebunden mit dem Verweis:
<script type="text/javascript" src="menuscript06.js"></script>
|
WWW.WEB-TOOLBOX.NET
Demo01 
DOWNLOAD 
ZURÜCK