|
|
Menü / Menüstruktur
Aufbau und Verwendung von show_menu()
Einbinden des Menüs in ein Template:
Die Funktion show_menu() wird im Template an der Stelle eingebunden, an der sich das Menü befinden soll.
Die einfachste Methode ist <? show_menu() ?>
Die Struktur:
Zum besseren Verständnis gehe ich von folgender Menüstruktur aus:
Es gibt folgende drei Hauptmenüpunkte: Home, Kontakt und Bilder. Außerdem hat der Hauptmenüpunkt Kontakt noch die Untermenüpunkte Impressum und Disclaimer.
Wenn der Menüpunkt Kontakt angeklickt worden ist, dann erzeugt ein standardmäßig eingebundenes Menü ( <? show_menu() ?> ) folgenden HTML-Quelltext:
<ul>
<li><span class="menu_default"><a href="http://localhost" target="_top" class="menu_default"> Home </a></span>
</li>
<li><span class="menu_current"><a href="http://localhost/pages/kontakt.php" target="_top" class="menu_current"> Kontakt </a></span>
<ul>
<li><span class="menu_default"><a href="http://localhost/pages/kontakt/impressum.php" target="_top" class="menu_default"> Impressum </a></span>
</li>
<li><span class="menu_default"><a href="http://localhost/pages/kontakt/disclaimer.php" target="_top" class="menu_default"> Disclaimer </a></span>
</li>
</ul>
</li>
<li><span class="menu_default"><a href="http://localhost/pages/bilder.php" target="_top" class="menu_default"> Bilder </a></span>
</li>
</ul>
Und das sieht dann so aus:
Wie gut zu erkennen ist, besteht das Menü aus einer Liste, bei der die Untermenüpunkte in einer untergeordneten Liste angebracht sind.
Bei dem Menüplatzhalter show_menu() handelt es sich um einer PHP-Funktion, welche bei diesem einfachen Aufruf auf ihre Standardwerte zurück greift, deshalb wird das Menü in Listenform ausgegeben.
Wenn man der Funktion Werte übergibt, kann man das Verhalten verändern.
Der Aufbau würde dann etwa so sein:
show_menu(Wert1,Wert2,Wert3,Wert4,Wert5,Wert6,Wert7,Wert8,Wert9,Wert10,Wert11)
(Bitte nicht wie obern zu sehen mit Wert1,Wert2,Wert3,…. Ins Template einbinden, das würde nicht funktionieren)
Hier nun eine Tabelle mit der Bedeutung der einzelnen Werte und ihrer Standartvorgabe:
| Position |
Standard |
Bedeutung |
| Wert1 |
1 |
Menü Nummer |
| Wert2 |
0 |
Ebene in der Das Menü beginnen soll (0 = Hauptmenüpunkte) |
| Wert3 |
-1 |
Maximale Anzahl an Untermenüleveln (-1 = alle anzeigen)
|
| Wert4 |
true |
Sichtbarkeit von Untermenüpunkten (false = es werden immer alle Untermenüpunkte angezeigt) |
| Wert5 |
'<li><span[class]>[a] [menu_title] [/a]</span>' |
Inhalt der einzelnen Menüpunkte ([a] [menu_title] [/a] wird gegen den eigentlichen Link ersetzt und [class] gegen die HTML-Klasse) |
| Wert6 |
'</li>' |
HTML-Quelltext, der nach jedem Menüpunkt eingefügt wird |
| Wert7 |
'<ul>' |
HTML-Code, der vor dem Menü eingefügt wird (auch vor jedem Untermenü) |
| Wert8 |
'</ul>' |
HTML-Code, der nach dem Menü eingefügt wird (auch nach jedem Untermenü |
| Wert9 |
' class="menu_default"' |
CSS-Klasse, die zu jedem Menüpunkt, außer dem aktivem hinzugefügt wird |
| Wert10 |
' class="menu_current"' |
CSS-Klasse, die dem aktuell aktivem Menüpunkt hinzugefügt wird. |
| Wert11 |
0 |
Gibt das übergeordnete Menü an |
Ein mit Standardwerten befülltes Menü würde somit wie folgt aussehen.
<?php
show_menu(1,0,-1, true, '<li><span[class]>[a] [menu_title] [/a]</span>', '</li>', '<ul>', '</ul>', ' class="menu_default"', ' class="menu_current"', 0);
?>
Die Ausgabe ist genau die gleiche wie schon bei show_menu(); , aber es veranschaulicht die ganze Menüstruktur ungemein.
Tabellen basierte Menü
Mit den Grundlagen der Menüstruktur sollte es eigentlich ein leichtes sein ein Tabellen basierendes Menü zu gestalten.
Mein Vorschlag würe folgender:
<?php
show_menu(1,0,-1, true, '<tr align="left"><td>[a] [menu_title] [/a]</td></tr>', '', '<td><table border="1">', '</table></td>', ' class="mainlevel"', ' id="active_menu"', 0);
?>
(border="1" kann natürlich entfernt werden, es dient nur der Veranschaulichung)
Der HTML-Quelltext, den das Menü jetzt liefert sieht wie folgt aus:
<td><table border="1">
<tr align="left"><td><a href="http://localhost" target="_top" class="mainlevel"> Home </a></td></tr>
<tr align="left"><td><a href="http://localhost/pages/kontakt.php" target="_top" id="active_menu"> Kontakt </a></td></tr>
<td><table border="1">
<tr align="left"><td><a href="http://localhost/pages/kontakt/impressum.php" target="_top" class="mainlevel"> Impressum </a></td></tr>
<tr align="left"><td><a href="http://localhost/pages/kontakt/disclaimer.php" target="_top" class="mainlevel"> Disclaimer </a></td></tr>
</table></td>
<tr align="left"><td><a href="http://localhost/pages/bilder.php" target="_top" class="mainlevel"> Bilder </a></td></tr>
</table></td>
Das Komplette Menü befindet sich jetzt in einer Tabellenzelle, in der sich wiederum eine Tabelle befindet. Die Untermenüpunkte sind in einer Weiteren Tabellenzelle mit Tabelle untergebracht.
Das Menü selber würde sich auf der Seite so darstellen:
Jetzt brauchen nur noch die CSS-Formatierungen nach eigenen Vorstellungen durchgeführt werden.
Viel Erfolg beim Menü gestalten.
|
Menü Struktur 
Seitenanfang