Layout der Hauptnavi mit CSS umstricken...
Verfasst: Mi 3. Mär 2004, 17:02
Guten Tag zusammen,
ich habe das Layout für eine Seite nun (endlich) fertig und möchte das Hauptnavigationsmodul umstricken, so dass es mit dem CSS-basierten Layout konform geht. Statt der üblichen Geschichte mit den Tables und den <td>s mit unterschiedlichem padding baue ich ein Menü folgendermaßen auf:
Das hat drei Vorteile:
1. Mit den Listen bildet sich die Menühierarchie korrekt ab.
2. Die Menütiefe kann beliebig groß sein, da der Abstand vom linken Rand über das <ul>-Tag geregelt wird.
3. Es geht besser durch Accessability-Richtlinien durch.
Nun spielt aber das Originalmodul der Hauptnavigation dieses Spiel nicht mehr mit, und zwar ab dieser Stelle (ab Zeile 265):
Nun kenne ich mich leider nicht genügend mit PHP aus um folgenden Workflow in dieses Modul zu implementieren:
1. Mit <ul> das Menü anfangen
2. Für jeden Menüpunkt ein und dieselbe Template-Datei laden und manipulieren
3. Beim stossen auf ein Submenü zu Schritt 1
4. Alle geöffneten <ul>s schließen
Zusätzlich (ja, es wird noch schöner) würde ich gerne das Menü überschrieben haben, aber nur einmal ganz oben mit dem Namen des Baums (siehe <h1>Baum-Name</h1>.
Ein paar praktische Hinweise, wie ich es selber lösen könnte würde ich genauso dankbar aufnehmen wie jede Lösung meines Problems.
Gruß und vielen Dank,
Thomas
ich habe das Layout für eine Seite nun (endlich) fertig und möchte das Hauptnavigationsmodul umstricken, so dass es mit dem CSS-basierten Layout konform geht. Statt der üblichen Geschichte mit den Tables und den <td>s mit unterschiedlichem padding baue ich ein Menü folgendermaßen auf:
Code: Alles auswählen
<h1>Menu-Name</h1>
<ul>
<li><a href="link1.html">Link-Descr. 1</a></li>
<li><a href="link2.html">Link-Descr. 1</a></li>
<li><a href="link3.html">Link-Descr. 1</a>
<ul>
<li><a href="link3_1.html">Link-Descr. 3_1</a></li>
<li><a href="link3_2.html">Link-Descr. 3_2</a></li>
<li><a href="link3_2.html">Link-Descr. 3_2</a></li>
</ul></li>
<li><a href="link4.html">Link-Descr. 1</a></li>
<li><a href="link5.html">Link-Descr. 1</a></li>
</ul>
1. Mit den Listen bildet sich die Menühierarchie korrekt ab.
2. Die Menütiefe kann beliebig groß sein, da der Abstand vom linken Rand über das <ul>-Tag geregelt wird.
3. Es geht besser durch Accessability-Richtlinien durch.
Nun spielt aber das Originalmodul der Hauptnavigation dieses Spiel nicht mehr mit, und zwar ab dieser Stelle (ab Zeile 265):
Code: Alles auswählen
echo '<table cellspacing="0" cellpadding="0" border="0">';
foreach ($navitems as $key => $data) {
/* 1. Navigations Ebene */
$tpl->reset();
$tpl->set('d', 'NAME', $data['name']);
$tpl->set('d', 'TARGET', $data['target']);
$tpl->set('d', 'HREF', $sess->url('front_content.php?idcat='.$data['idcat']));
$tpl->next();
if ($idcat == $data['idcat'] || is_array($data['sub'])) {
$tpl->generate('templates/navfirst_on.html');
} else {
$tpl->generate('templates/navfirst_off.html');
}
if (is_array($data['sub'])) {
foreach ($data['sub'] as $key => $data) {
/* 2. Navigations Ebene */
...
1. Mit <ul> das Menü anfangen
2. Für jeden Menüpunkt ein und dieselbe Template-Datei laden und manipulieren
3. Beim stossen auf ein Submenü zu Schritt 1
4. Alle geöffneten <ul>s schließen
Zusätzlich (ja, es wird noch schöner) würde ich gerne das Menü überschrieben haben, aber nur einmal ganz oben mit dem Namen des Baums (siehe <h1>Baum-Name</h1>.
Ein paar praktische Hinweise, wie ich es selber lösen könnte würde ich genauso dankbar aufnehmen wie jede Lösung meines Problems.
Gruß und vielen Dank,
Thomas