Menü aufklapen Verzeichnis 01
 HomeCSSMenüs • Menü expand (V) Beispiel 01  Beispiel 02  Download

15-A  expand aufklappen - 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.
Menü JavaScript Ordnerstruktur aufklappen einklappen

Aufklappmenü (verwendet JavaScript + Coookies)

Dieses Menübeispiel funktioniert nur, wenn in den Bowsereinstellungen vereinbart wurde, das JavaScript ausgeführt werden darf und Cookies zugelassen sind!

Da Sie keinen Einfluss auf die Browsereinstellungen des Seitenbesuchers nehmen können, ist der Einsatz dieses Menüs nicht ohne weiteres zu empfehlen.


Bescheiden und auf den ersten Blick völlig unspektakulär. Dabei in der Modifikation 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 Beispiel-01 die grauen Grafiken 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 wird über CSS organisiert, alles andere wird über das Script gesteuert. Sie notieren Listen, deren Elelemete die Textlinks darstellen.

Mit der Vergabe der "ID" werden die CSS-Anweisungen zugeordnet. Unterhalb der Notierung wird die JavaScript-Funktion 'initiate()' aufgerufen.

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

Innerhalb der <li>-Elemente werden nun nur noch die Links eintragen, fertig.
<li><a href="dateiname.htm">Menüpunkt 1</a></li>
Die Liste kann natürlich verschachtelt werden. Das bedeutet eine Liste kann weitere Listen enthalten.




  Aufwand




  Anpassngen

Textformatierung

Zur Anpassung der Linkformatierung ändern sie die Angaben in den CSS-Anweisungen 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;
}
Grafiken

Die Grafiken für die Symbole sind in der externen JS-Datei festgelegt. In der JS-Datei wurden die URLs der 3 verwendeten Grafiken als Hintergrundgrafik deklariert:

 minus06.gif
 plus06.gif
 page06.gif


Dort kann man natürlich andere Grafiken einbinden.

Auswahl:

                                                   

(weitere finden sie in meiner MINI-IMAGE-BOX)





  Funktion

Das Menü hat ein 'Gedächtnis'. Es werden Cookies auf die Festplatte geschrieben die Informationen über den letzten Aufklapp-Status und die Menüstruktur enthalten. Schreiben und Lesen der Cookieinformationen werden über JavaScript organisiert! Die externe JavaScript-Datei 'menuscript01.js' wird im Head-bbereich der HTML-Datei eingebunden mit dem Verweis:

<script type="text/javascript" src="menuscript01.js"></script>