CSS frage, aufbau für verschachteltes Menü

[Domi83]

Moin Leute, ich habe da mal eine etwas speziellere CSS Frage in Verbindung mit dem Joomla CMS. Ich habe Hauptkategorien und Unterkategorien die sich im Quellcode wie folgt zusammen setzen,

<ul class="menu">
 <li class="item-101"><a href="/joomla/" >Willkommen</a></li>
 <li class="item-102"><a href="/joomla/..." >Seite 1</a></li>
 <li class="item-103 active deeper parent"><a href="/joomla/..." >Seite 2</a>
  <ul>
   <li class="item-107 current active"><a href="/joomla/..." >Seite 2 - 1</a></li>
   <li class="item-108"><a href="/joomla/..." >Seite 2 - 2</a></li>
   <li class="item-109"><a href="/joomla/..." >Seite 2 - 3</a></li>
  </ul>
 </li>
 <li class="item-104"><a href="/joomla/..." >Seite 3</a></li>
 <li class="item-105"><a href="/joomla/..." >Seite 4</a></li>
 <li class="item-106"><a href="/joomla/..." >Seite 5</a></li>
</ul>

Nun war mein Plan das ich den Hauptkategorien einen "border" verpasse und den Unterkategorien auch, aber da die Unterkategorien in einem LI komplett verankert sind, überlege ich gerade wie man das dann macht das alle einen Rahmen haben und sobald die Seite 2 offen ist einfach nur die anderen Punkte darunter erscheinen ohne das der border alle Unterkategorien umschließt... ich hoffe man versteht was ich meine

Wenn ich selbst ohne ein CMS baue, sieht mein Aufbau ungefähr so aus...

<ul class="menu">
 <li class="ebene-1"><a href="/" >Hauptkategorie</a></li>
 <li class="ebene-1"><a href="/" >Hauptkategorie</a></li>
 <li class="ebene-2"><a href="/" >Unterkategorie</a></li>
 <li class="ebene-2 active"><a href="/" >Unterkategorie</a></li>
 <li class="ebene-1"><a href="/" >Hauptkategorie</a></li>
</ul>

so brauche ich in der CSS nur ebene-1 und ebene-2 ansprechen und nichts ist irgendwie verschachtelt. Aber bei dem voreingestellten Aufbau vom CMS bin ich etwas sprachlos

Gruß, Domi

 

[Lawnmower]

kann man das irgendwo betrachten was Du bisher schon gemacht hast? Würde es ein wenig einfacher machen.
Der Aufbau des verschachtelten Menüs vom CMS her sieht schon mal korrekt aus.

 

[Domi83]

Öhm, ich habe mal ein Screenshot gemacht, hilft Dir das schon weiter..?
Links ist der Aufbaue wie ich ihn gerne haben möchte und rechts ist der Aufbau wie er aktuell aussieht. Links habe ich ohne CMS aufgebaut und rechts ist es der Aufbau wie es vom Joomla CMS generiert ist... in meiner CSS Datei ist es so aufgebaut,

.naviBox {
 float: left;
 padding: 10px 2px 5px 2px;
 width: 98px;
}

.naviBox ul {
 list-style-position: inside;
 list-style-type: none;
 margin: 0 0 0 0;
 padding: 0 0 0 2px;
}
.naviBox ul li {
 border: 1px solid #99c18d;
 margin: 0 0 1px 0;
 padding: 1px 1px 1px 2px;
 width: 160px;
}
.naviBox ul li:hover {
 border: 1px solid #383866;
}

.naviBox ul li {
 border: 1px solid #99c18d;
 margin: 0 0 1px 0;
 padding: 1px 1px 1px 2px;
 width: 160px;
}

Ich hoffe mal damit kann man etwas anfangen

 

[Daaron]

Kannst du evtl. mal in nem Bildbearbeitungsprogramm ne kleine Vorschau zusammenmalen, wie du dir das vorstellst? So richtig steige ich gerade nicht dahinter.

Übrigens ist der Aufbau, wie ihn Joomla da liefert, stinknormal. Ich würde verschachtelte Navigationen auch immer so strukturieren. Liest sich gut und ist einwandfrei für verschiedenste Darstellungen geeignet.

Edit:
OK, das Bild hat sich also erledigt *G*

Hängt die Klasse .current immer an dem <li>, dessen Link gerade aktiv ist, oder auch an dessen Eltern-<li>'s? Wenns nur am aktiven Link ist:
li.current{border:blabla};

Leider fehlt CSS ein eigentlich ganz wichtiger Selektor:
"Element enthält XY", sowas wie li.active < li.active (also: jedes li.active, dass ein li.active enthält)

 

[Domi83]

Ich stelle es mir so vor wie auf meinem Screenshot im linken Bereich...
Ganz simple untereinander, und wenn die Unterkategorien kommen, einfach den Text einrücken. Habe halt noch nie mit Verschachtelungen gearbeitet, bin denen immer aus dem Weg gegangen

 

[Lawnmower]

mal mit einrücken probieren und Schrift ein wenig kleiner.
Irgendwie so

.navibox ul li ul li a
{ 
  text-indent: 10px;
  font-size: 11px;
}

Du solltest noch den Border bei den li weglassen, sieht besser aus ohne.

Die beiden gleichen Style-Blöche für .navibox ul li in deinem Code solltest Du kombinieren bzw ist 2x das Gleiche.

 

[Domi83]

Also ich habe das nun so gemacht, dass ich ".navibox a" ein "display: block" verpasst habe wie Daaron es mir empfohlen hatte, damit habe ich schon mal mein Resultat erreicht

Mir ist eingefallen warum ich diese Verschachtelungen weg gelassen habe.. ich musste immer für jede neue ebene einen weiteren Eintrag in der CSS machen, und das hatte mich gestört. Beispiel, wenn ich mich nun an Lawnmower orientiere würde es ja irgendwann so aussehen,

.navibox ul li a {

}
.navibox ul li ul li a {

}
.navibox ul li ul li ul li a {

}

Das fand ich dann irgendwie "uncool"

 

[Daaron]

muss man nicht. Man muss seinen Ebenen nur clevere Klassen geben.... viele coole Sachen sind (außer in älteren IE's, wie üblich) auch über die "Selektoren" > und + möglich.

Da man seiner Navigation eh keine 4-5 Level geben sollte spielt es kaum eine Rolle.

 

[Domi83]

Joa, da gebe ich Dir recht.. Wer macht schon 4 oder 5 ebenen Tief
Aber was sind denn "clevere Klassen", hast Du da gerade ein kleines Beispiel für mich?

 

[Daaron]

was heißt clevere Klassen... is im Krinzip übertrieben. Du machst dir das Leben schlichtweg hübsch leicht, wenn jedes <ul> als Klasse ein "level_X" hat. Da du in realen Anwendungen eh nie mehr als 3 Ebenen in der Navigation haben wirst (Usability-Regel: kommt der Kunde nicht mit 3 Klicks/Aktionen zum Ziel, gibt er auf), wirst du also bestenfalls 3 Sets an CSS-Deklarationen haben.
Alternativ kann man natürlich auch n Konstrukt aus "ul li ul li ul li" für ".level_3 li" machen, aber wer will das? Wenn man dann noch nur für moderne Browser entwickelt kann man mit > sogar noch Doppeldeklarationen einsparen. Die erste Ebene <li> soll floaten, die anderen nicht? .level_1 > li{float:left}


Eigentlich schade, dass HTML5 zwar ein <nav> - Element erhalten hat, dieses Element aber nur ein hirnloser Block ist. Viel cooler wäre etwas wie <nav-level> und <nav-item>. Listen sind zwar immer noch besser/lesbarer/kompakter als die Div-Hölle, aber semantisch einwandfrei sind sie nicht.

 

[Domi83]

Joa, was die Menüs angeht, hatte ich sie ganz zu Anfang immer mit einem DIV im DIV gebaut, aber da sind dann wirklich so Punkte die einen stressen oder nerven, darum hatte ich dann auch angefangen mit UL und LI zu bauen, aber verschachtelt hatte ich noch nie.

Und wenn man eben nur drei ebenen rein geht (obwohl ich das manchmal schon zu viel finde), braucht man wirklich nur diese drei ebenen im CSS aufbauen und fertig ist. Da gebe ich Dir recht und dem passe ich mich dann mal an

Was ich auch immer versuche (sowohl HTML, PHP als auch CSS), den Quellcode recht kompakt zu halten um jedes Byte einzusparen in der Hoffnung das die Ladezeiten dann nicht zu sehr beeinflusst werden beim User selbst.

 

[Domern]

Sry für ot...aber was wird denn da für eine rasse gezüchtet?

 

[Domi83]

Es sei Dir von mir verziehen.. Gezüchtet werden "Labrador Retriever"