Contao NRW Day
Ergebnis 1 bis 3 von 3

Thema: li.active problem / vertikale navigation

  1. #1
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard li.active problem / vertikale navigation

    Hallo,

    ich habe das folgende Problem und komme alleine nicht weiter:

    In TL 2.7.2 habe ich links eine vertikale Navigation, bei der die 2. Ebene nur dann eingeblendet wird wenn man den 1. Ebene Punkt angeklickt hat.

    Es gibt ein individuelles List Style Element (Grafik) die über li eingebunden ist, wenn ein Menüpunkt aktiv ist.

    Ich habe nun ein .mod_navigation .level_1 li.active definiert mit
    { list-style-image:url ("tl_files/layout/linered.gif");}

    allerdings wenn ich dann per Maus diesen Menüpunkt anklicke im Frontend und dann die 2. Ebene Navigation aufgeht, haben alle 2. Ebenepunkte das gleiche List Element ebenfalls in der Anzeige

    Das folgende brachte auch noch keine Abhilfe:

    .mod_navigation .level_1 li.active .level_2
    { list-style-type:none; }

    oder auch nicht mit:

    .mod_navigation .level_1 li.active .level_2
    { list-style-type:none; }

    oder auch nicht mit .mod_navigation ul li ul .active ...

    Wie kriege ich es so geschaltet, dass mein List Style Element ausschließlich nur auf Level 1 angezeigt wird und nicht in den frisch ausgeklappten Level 2?

    Wenn ich dann einen Menüpunkt nur von Level_2 anwähle, dafür klappt das Konfigurieren ja wieder ganz prima ...

    LG


    Die Menüstruktur kann man sich wie folgt vorstellen:

    <ul>
    <li>Item 1.1</li>
    <li>Item 1.2
    <ul>
    <li>Item 1.2.1</li>
    <li>Item 1.2.2</li>
    <li><a href="test.htm">Item 1.2.3</a></li>
    </ul>
    </li>
    <li>Item 1.3</li>
    <li>Item 1.4</li>
    </ul>

  2. #2
    Contao-Nutzer
    Registriert seit
    22.06.2009.
    Ort
    St.Pauli
    Beiträge
    217

    Standard

    Hi marczw,
    diese Angabe
    Code:
    .mod_navigation .level_1 li.active {
    list-style-image:url ("tl_files/layout/linered.gif");
    }
    ist Unsinn. list-style steht für Listen zur Verfügung, nicht für Listenpunkte. Wenn das etwas bewirkt, ist das Zufall/ ein Bug, kann aber dann mit dieser Anweisung
    Code:
    .mod_navigation .level_1 li.active .level_2 {
    list-style-type:none;
    }
    nicht aufgehoben werden. Denn die ist jetzt richtigerweise auf eine Liste (UL) angewendet, die erste Angabe gilt aber weiterhin auch für deren li.active-Elemente.

    Ansonsten würde ich vorwiegend mit Nachfahren-Selektoren (ul, ul li, ul li ul, ul li ul li etc) arbeiten und mir die Klassen für die Spezialfälle (active, trail) aufheben. Damit umgehst du Gewichtungsprobleme (Basiswissen dazu hier). Und guck dir den Quellcode deiner Seite bei unterschiedlichen Menü-Zuständen an, dann siehst du, welche Klassen wann vergeben werden.


    cheers
    Antipitch

  3. #3
    Contao-Nutzer
    Registriert seit
    27.06.2009.
    Beiträge
    17

    Standard gelöst und Gewichtung

    Hallo antipitch,

    vielen Dank für den Link mit der Gewichtung....

    In solche Tiefen musste ich mich selbst noch nicht reindenken, aber hier ist die Systematik schon mal gut beschrieben.

    Zwischenzeitlich habe ich schon eine andere Lösung gefunden die auch sauber funktioniert: und zwar über background-image - hier klappt dann auch die Selektion über span bzw. a einwandfrei für mein Problem und es ist ein ganz kurzes schönes übersichtliches CSS für die Navigation geworden :-)

    Puuuuuh - da das jetzt endlich mal geschafft wäre, werde ich mir nun noch etwas genauer diese Gewichtunglogik "reinziehen" ;-)

    Schönen Abend noch allerseits

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Vertikale Navigation
    Von ChrisT im Forum Layout / Templates / Holy Grail
    Antworten: 6
    Letzter Beitrag: 20.01.2011, 10:51
  2. Vertikale Navigation
    Von mattes im Forum Layout / Templates / Holy Grail
    Antworten: 33
    Letzter Beitrag: 29.07.2010, 18:05
  3. Vertikale Drop Down Navigation
    Von FliFla im Forum Layout / Templates / Holy Grail
    Antworten: 6
    Letzter Beitrag: 17.01.2010, 16:53
  4. Vertikale Navi mit Bildern -> Problem mit span.active
    Von drumsinvitro im Forum Layout / Templates / Holy Grail
    Antworten: 1
    Letzter Beitrag: 12.01.2010, 14:50
  5. Vertikale Navigation
    Von mr.jones im Forum Layout / Templates / Holy Grail
    Antworten: 7
    Letzter Beitrag: 03.07.2009, 13:33

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •