Vertikale Navigation. Hilfe für CSS-Muffel

[santscho]

Für CSS-Muffel und CSS-Anfänger ist es schwierig, die vertikale Navigations-CSS zu überblicken. Immerhin sind für die 5 Ebenen total 45 Klassen definiert.
Auf YAMLit wird beschrieben, wie man die vertikale NAV_LIST_UL im Template einbinden kann. Diese Vorgehensweise gilt aber auch für andere Templates ohne YAML.
Ich habe im Tutorial eine Referenz-Grafik zur Verfügung gestellt, um die CSS einfach anpassen zu können.

Ich habe mich heute gefragt, ob man die Anpassungen noch einfacher machen könne, denn der Trick mit den Referenz-Farben scheint nicht bei allen klappen zu wollen.
Neu kann man auf YAMLit die vlist_pro.zip runterladen.

Hier eine Beschreibung:
images -> vlist -> referenzbilder
Enthält 45 unterschiedliche transparente GIF-Bilder, für alle Klassen, aller Ebenen. Jedes GIF enthält einen Text, der beschreibt, welche Klasse in der nav_vlist.css zu modifizieren ist. Zusätzlich wird mit einem farbigen Balken gezeigt, zu welcher Farbgruppe die Klasse gehört. Da die GIF-Bilder transparent sind, schimmern zusätzlich noch die Farben der Referenzgrafik durch.

nav_vlist.css
Alle 45 Ebenen-Klassen haben das dazugehörige GIF schon integriert. Die einzelnen Klassen sind für ein leichters Auffinden zusätzlich noch kommentiert.

arbeitsdaten -> LK.ai
Die Adobe Illustrator-Datei enthält alle 45 Referenz-GIFs. Natürlich mit 45 Slices für einen schnellen Export.

Mit dieser Navigation kann wirklich nichts mehr schief laufen. Später löscht man einfach die Grafik-Links aus der CSS oder ersetzt diese durch andere Bilder (z.B. Knotengrafiken).

So sieht die Navigation nach dem Einbau aus:


Und so sieht der Code der CSS aus:


Dank den hinterlegten GIFs kann man die dazugehörende Klasse einfach in der CSS-Datei auffinden.
Download unter: http://www.yaml.phpwcms.org/phpwcms-vertikal.phtml

Ich weiss... CSS-Profis (zu denen ich mich selber nicht zähle) werden es belächeln und vielleicht sagen: "Die Navi-CSS ist einfach zu verstehen, warum also dieses TrariTrara". Ich versuche einfach, Anfängern bisschen Schützenhilfe zu geben.

Grüsse
Ralph

[flopi]

Wow echt klasse. Ich hab mich auch immer durch die Klassen hangeln müssen.
Find ich echt toll was du alles machst.

mfg
flopi

[Toflar]

Also ich musste auch immer abzählen, wie viele UL jetzt da vorhanden sind

Obwohl die CSS-Datei eigentlich nicht schwer zu verstehen ist - so wird's auch für mich einfacher!

santscho, t'es un chef toi!

[bogus]

Wenn es hier einen User des Monats geben würde, würdest du dafür von mir normiert werden wollen *gg

Grossartige Arbeit, alle Achtung So macht das Layouten nur noch mehr spass

[Nordlicht]

Kann mir vielleicht jemand weiterhelfen.
Warum sind bei der folgenden Navigation alle Menüpunkte Level 0 Klasse 1?
Die ersten beiden sollten doch eigentlich Level 0 Klasse 2 sein oder?

Code: Select all

<div class="vertnavi1">
<ul class="act_path">
   <li class="sub_no sub_ul_true sub_first"><a href="index.php?ueber-uns">Über uns</a></li>
   <li class="sub_no sub_ul_true"><a href="index.php?punkt_2">Punkt 2</a></li>
   <li class="sub_no"><a href="index.php?punkt_3">Punkt 3</a></li>
   <li class="sub_no"><a href="index.php?punkt_4">Punkt 4</a></li>
   <li class="sub_no"><a href="index.php?service">Service</a></li>
</ul>
</div>


[Nordlicht]

... und sollte das hier:

Code: Select all

<li class="sub_ul act_path active"><a href="index.php?planung">Planung</a>


nicht Level 0 Klasse 3 wiedergeben und nicht die Klasse 1