Thema: main menu - liste - bis zu 4 Ebenen

Hi, ich hab folgendes Problem. Ich möchte ein Listen-Menu in joomla erstellen. Der aktuelle Menüpunkt soll dabei blass werden. Nun ist das Problem, dass joomla dem li-Tag class und id zuweist. Siehe Beispiel:

Quellcode:

Code:

<ul class="menu">
    <li class="parent active item58"><a href="/index.php"><span>ebene 1</span></a>
      <ul>
        <li class="item59"><a href="/index.php"><span>ebene 2</span></a></li>
            <li class="parent item95"><a href="/index.php"><span>ebene 2</span></a></li>
            <li class="parent item60"><a href="/index.php"><span>ebene 2</span></a></li>
            <li class="parent active item61"><a href="/index.php"><span>ebene 2</span></a>
                <ul>
                    <li class="item74"><a href="/index.php"><span>ebene 3</span></a></li>
                    <li id="current" class="active item126"><a href="/index.php"><span>ebene 3</span></a>
                      <ul>
                        <li class="item75"><a href="/index.php"><span>ebene 4</span></a></li>
                      </ul>
                    </li>
                </ul>
            </li>
            <li class="item62"><a href="/index.php"><span>ebene 2</span></a></li>
  </ul></li>
    <li class="parent item50"><a href="/index.php"><span>ebene 1</span></a></li>
    <li class="parent item51"><a href="/index.php"><span>ebene 1</span></a></li>
    <li class="item68"><a href="/index.php"><span>ebene 1</span></a></li>
    <li class="parent item100"><a href="/index.php"><span>ebene 1</span></a></li>
    <li class="parent item67"><a href="/index.php"><span>ebene 1</span></a>
    </li>
</ul>

CSS-Code:

Code:

/************ Main Menu ****************/
ul.menu {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

ul.menu li {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 15px 0px;
	list-style: none;
}

ul.menu li a {
        color: #2c4966;
        text-decoration: none;
}

ul.menu li a:hover {
        color: #2c4966;
        text-decoration: underline;
}

ul.menu li.active a {
        color: #ccc;
}

/* menu ebene 2 */

ul.menu li ul {
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 5px 0px;
}

ul.menu li ul li {
	padding: 0px 0px 0px 15px;
	margin: 2px 0px 2px 0px;
	background: url(../images/ebene_2.gif) 0 0 no-repeat;
}

ul.menu li ul li a span {
	font-weight: normal;
        /*color: #2c4966;*/
        color: #2c4966;
}

ul.menu li ul li a:hover span {
	font-weight: normal;
        color: #2c4966;
        text-decoration: underline;
}

ul.menu li ul li.active a span {
	font-weight: normal;
        color: #ccc;
}

ul.menu li ul li a:hover span {
	font-weight: normal;
        color: #2c4966;
}

/* menu ebene 3 */

ul.menu li ul li ul li a.submenu span {
color: #2c4966;
}

ul.menu li ul li ul li.active a span {
	font-weight: normal;
        color: #ccc;
}

/* menu ebene 4 */

ul.menu li ul li ul li ul li a.submenu span {
color: #2c4966;
}

/********** Main Menu ENDE ***********/

Bis zur dritten Ebene funktioniert es so aber dann wird alles blass. Was klar ist, weil im CSS-Code dem li diese Anweisung mitgegeben wurde. Hat jemand eine Idee wie ich das hinbekommen kann?

Ggf. müste man das Modul so abändern, dass nur dem AKTUELLEM Menüpunkt eine ID oder Class "aktuell" zugeordnet wird (aber dem "a" nicht li).

Vielen Dank für eure Mühen.

ich versteh gerade dein problem nicht (auch weil kein link zu deiner seite da ist)
aber in der .css datei hast du ja bis zur 4. ebene schon vordefiniert einfach das ändern was du möchtest in der jeweiligen ebene...

blaulichttreff war schneller ja, du hast in der 4. ebene das .active vergessen
lg

Zitat von blaulichttreff

du musst die systematik nur weiterführen, indem du die ebenen direkt ansprichst
1. ebene ul.menu li
2. ebene ul.menu li ul li
3. ebene ul.menu li ul li ul li
...

dann noch die jeweiligen selektoren, z.b. active einbauen und jede ebene hat ihren eigenen style

EDIT: ok, man sollte im code auch mal scrollen, hast es ja so gemacht. das alles blass wird liegt an einer fehlenden definition für "normale" menüpunkte, die weder hover noch parent oder active sind

"Eigentlich" ist doch alles deviniert. Ich hab mich am ul und li langgearbeitet und entsprechende Zuweiseungen gemacht. Aber zum Schluss klappt das nicht mehr, weil wenn ich li auf aktiv setzte nimmter auch auch die untergeordneten. Nun sage ich dem nächt untergeordnetetn "ul li", dass es nicht mehr blass sein soll - aber DAS wird ignoriert.

Das Problem liegt meiner Meinung nach in der Zuordnung? Oder?!

Also ich weiß langsam nicht mehr so recht. Sitze da schon zwei Tage dran und es läut einfach nicht, weil ab der dritten zur vierten Ebene die Anweisungen ignoriert werden. Bzw. eigentlich wird nur die Schriftfarbe ignoriert... Änderungen z.B. an der Breite etc. werden dargestellt.

Zitat von hofemich

ich versteh gerade dein problem nicht (auch weil kein link zu deiner seite da ist)
aber in der .css datei hast du ja bis zur 4. ebene schon vordefiniert einfach das ändern was du möchtest in der jeweiligen ebene...

blaulichttreff war schneller ja, du hast in der 4. ebene das .active vergessen
lg

Das ".active" soll ja eigentlich den Link blass darstellen. Aber wozu, wenn die komplette 4. Ebene blass ist. Deshalb hatte ich diese CSS-Angaben bei dieser Version nicht mehr drin. DAS ist das Problem. Gruß und Danke

P.S.: Hab die Seite im Moment noch lokal.

Ich hab noch mal folgende Änderung gemacht:

Code:

... (siehe oben)

/* menu ebene 3 */
ul.menu li ul li ul li a.submenu span {
color: #2c4966;
}

/*ul.menu li ul li ul li.active a span {
	font-weight: normal;
        color: #ccc;
}*/

/* menu ebene 4 */

ul.menu li ul li ul li ul li a span {
        color: #2c4966;
}

ul.menu li ul li ul li ul li.active a span {
        color: #ccc;
}

Wie man sieht habe ich diesen Bereich:

Code:

/*ul.menu li ul li ul li.active a span {
	font-weight: normal;
        color: #ccc;
}*/

ausgeklammert. Nun klappt es auch in der vierten Ebene. Allerdings läuft die dritte Ebene nicht mehr, weil ich dort natürlich kein "active" mehr habe. Aktiviere ich diesen Part wieder ist die komplette dritte und vierte Ebene hellgrau (also blass).

Vielleicht hilft das noch mal mein Problem darzulegen. Gruß und DANKE für jede Hilfe.

Hi, für alle die es relevant ist. Ich hab jetzt einfach das Modul "mod_mainmenu" um zwei <span> erweitert. So kann ich alle einzelnen Elemente bis zur vierten Ebene ansprechen.

Jetzt funktioniert alles!!!