phpwcms Support Forum

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

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

mfg
flopi

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!

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

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>

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

phpwcms Support Forum

Vertikale Navigation. Hilfe für CSS-Muffel

Vertikale Navigation. Hilfe für CSS-Muffel

Re: Vertikale Navigation. Hilfe für CSS-Muffel

Re: Vertikale Navigation. Hilfe für CSS-Muffel

Re: Vertikale Navigation. Hilfe für CSS-Muffel

Re: Vertikale Navigation. Hilfe für CSS-Muffel

Re: Vertikale Navigation. Hilfe für CSS-Muffel