Menü aufklapen Verzeichnis 01
    
WWW.WEB-TOOLBOX.NET
BEISPIEL01  BEISPIEL02 DOWNLOAD ZURÜCK SITEMAP  

 15 expand 01 vertikal

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.

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 01 - Vertikales Menü      Beispiel 02 horizontales menü



Symbole (   ) vor dem Thementitel anklicken

Wenn sie wie im Beispiel01 die grauen Images beibehalten wollen, können sie das Menü ohne großen Aufwand in Ihre Seite einbinden!


 Demo einer 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.

Die Vergabe der "ID" ordnet die CSS-Anweisungen zu:

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


Nur noch die Links eintragen: 
<li><a href="dateiname.htm">Menüpunkt 1</a></li>
fertig!


Die Liste kann natürlich verschachteltelt werden. Das bedeutet eine Liste kann weitere Listen enthalten.




 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, z.B. für "li" : 
#containerul li{
margin:           0 0 0 20px;   (left margin für Einrückung)
color:            #00AD66;
font-family:      Verdana,Arial,Helvetica;
font-size:        10px;
text-decoration:  none;
text-transform:   uppercase;
}
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="menuscript01.js"></script>







NACH OBEN