Dynamisches Menü mit SSI (Server Side Includes)
Dieses Menü ist eine gute Alternative für alle, die kein PHP können oder zur Verfügung haben. Der Aufbau des Klappmenüs ist recht einfach und leicht zu erweitern bzw. zu ändern. Die Funktionsweise seht ihr hier auf dieser Homepage, denn ich mache nur Werbung von Dingen von welchen ich überzeugt bin.
Der grundsätzliche Aufbau besteht aus drei "CSS class" Punkten und einer SSI Funktion und eine Verknüpfung.
Das Beste am Menü ist: Ihr ändert eure Links Link nur in einer Datei ( menu.html ) und er wird in allen Seiten geändert ganz gleich ob ihr 5 oder 50000 Unterseiten habt.
Wichtig
Normalerweise funktioniert SSI nur in einer ".shtml" Datei, dies kann man jedoch durch einen Trick in der .htaccess umgehen und kann weiterhin seine ".html" Dateien nutzen
Der Befehl für die .htaccess lautet
AddType text/html .shtml
AddType text/x-server-parsed-html .html
In meiner Testdatei habe ich folgendes CSS für die Menüs verwendet.
a.menu_geschlossen
{ display : block;
text-align : left;
width : 130px;
background-color: #CCCCCC;
color:#000000}
a.menu_offen
{ display : block;
text-align : left;
width : 130px;
background-color:#336633;
color:#FFFFCC;}
a.untermenu
{ display : block;
text-align : left;
width : 130px;
background-color:#FFFFFF;}
<a class="XXX" title="1" href="http://www.deinedomain/SEO/0.html">Link1</a>
erstellen. Diese Links werden in einer separaten Datei ohne Header oder Body unter menu.html abgespeichert. Den Links müssen nun die class zugeordnet werden.
Menüpunkt 1 ( CSS class = "menu_offen" )
Untermenü ( CSS class = "untermenu" )
Untermenü ( CSS class = "untermenu" )
Menüpunkt 1 ( CSS class = "menu_geschlossen" )
Danach kommt das ganze in eine "wenn" Verknüpfung mit SSI.
<!--#if expr="($DOCUMENT_URI=//test/)" -->
die Abfrage sucht nach dem Wort "test" im URL d.h. die Bedingung ist erfüllt wenn "www.deinedomain.com/test.html" aber auch wenn www.deinedomain.com/test/1.html aufgerufen wird.
Unter die Zeile kommt euer Mainlink( Menüpunkt 1 ( CSS class = "menu_offen" ) und eure Untermenüpunkt(e) Menüpunkt 1 ( CSS class = "untermenu" ).
<!--#else -->
"else" beendet die eigentlich "wenn" Funktion und leidet sie an ein "wennnicht" weiter.
Wennnicht "test" dann .d.h. hier muss nochmal eurer Mainlink stehen aber diesesmal mit ( CSS class = "menu_geschlossen" ) . Jetzt müsst ihr die Funktion nur noch beenden und dies geschieht mit.
<!--#endif -->
So nun ist euer erstes Untermenü ist fertig und schaut im Ganzen so aus. Dieses "Teilmenü" braucht Ihr jetzt nur noch kopieren und darunter einfügen, die Links anpassen und fertig. Somit ist das Menü bis ins bodenlose erweiterbar.
Hier ein Beispiel:
<a class="menu_offen" title="1" href="http://www.deinedomain/SEO/0.html">Link1</a>
<a class="untermenu" title="1.1" href="http://www.deinedomain.de/SEO/1.html">Link 1.1</a>
<a class="untermenu" title="1.2" href="http://www.deinedomain.de/SEO/2.html">Link 1.2</a>
<!--#else -->
<a class="menu_geschlossen" title="1" href="http://www.deinedomain.de/SEO/0.html">Link1</a> <!--#endif -->
Zum Schluss wird dann noch die menu.html in jede Seite eingebunden. Dies geschieht mit folgendem Befehl.
<!--#include virtual="/menu.html" -->
Der Pfad zur Datei muss dem entsprechend angepasst werden.
Ich habe das ganze nochmal in einer Testdatei dargestellt und hier gibt es alle verwendeten Seiten zum Download. Die Menü und CSS Datei liegt in Ordner SEO.