Vertikale Navigation. Hilfe für CSS-Muffel

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
Post Reply
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Vertikale Navigation. Hilfe für CSS-Muffel

Post by 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:
Image

Und so sieht der Code der CSS aus:
Image

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
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
flopi
Posts: 125
Joined: Thu 22. Nov 2007, 15:26

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

Post by 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
(\_/)
(0.o)
(> <)
Das ist Bunny. Kopiere Bunny in deine Signatur, um ihm auf seinem Weg zur Weltherrschaft zu helfen!
User avatar
Toflar
Posts: 175
Joined: Wed 7. May 2008, 12:01
Location: Lyss / Schweiz
Contact:

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

Post by Toflar »

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

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

santscho, t'es un chef toi! ;)
--------------------------------
Es grüsst

Toflar
User avatar
bogus
Posts: 75
Joined: Tue 18. Jan 2005, 17:36

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

Post by 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 ;)
Greetings

Bogus
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

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

Post by 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
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

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

Post by 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
Post Reply