[Joomla 1.7] Genest menu active opmaken

[Matis]

Beste WEBbers,

momenteel ben ik bezig om een template in Joomla 1.7 naar eigen smaak aan te passen.
Ik heb een genest hoofdmenu met de volgende niveaus:

Teams
*Senioren
**Team 1
***Samenstelling
***Mededelingen
***Standen & Uitslagen
***Wedstrijdverslagen

Zoals jullie misschien wel weten, hangt Joomla aan diverse menu-items css-classes die betrekking hebben op het menu item:
Wanneer ik op het linkje Teams klikt, levert dat de volgende html op:

HTML:

<ul class="menu">
<li class="item-110 current active deeper parent">
<a href="/index.php/teams">Teams</a>
<ul>
<li class="item-123 parent">
<a href="/index.php/teams/senioren">Senioren</a>
</li>
</ul>
</li>
<ul>

Wanneer ik op Senioren klik:

HTML:

<ul class="menu">
<li class="item-110 active deeper parent">
<a href="/index.php/teams">Teams</a>
<ul>
<li class="item-123 current active deeper parent">
<a href="/index.php/teams/senioren">Senioren</a>
<ul>
<li class="item-121 parent">
<a href="/index.php/teams/senioren/team-1">Team 1</a>
</li>

Wanneer ik op Team 1 druk krijg ik de volgende HTML

HTML:

<ul class="menu">
<li class="item-110 active deeper parent">
<a href="/index.php/teams">Teams</a>
<ul>
<li class="item-123 active deeper parent">
<a href="/index.php/teams/senioren">Senioren</a>
<ul>
<li class="item-121 current active deeper parent">
<a href="/index.php/teams/senioren/team-1">Team 1</a>
<ul>
<li class="item-133">
<a href="/index.php/teams/senioren/team-1/samenstelling">Samenstelling</a>
</li>
<li class="item-125">
<a href="/index.php/teams/senioren/team-1/mededelingen">Mededelingen</a>
</li>
<li class="item-134">
<a href="/index.php/teams/senioren/team-1/standen-a-uitslagen">Standen &amp; Uitslagen</a>
</li>
<li class="item-124">
<a href="/index.php/teams/senioren/team-1/wedstrijdverslagen">Wedstrijdverslagen</a>
</li>

En als laatste Samenstelling:

HTML:

<ul class="menu">
<li class="item-110 active deeper parent">
<a href="/index.php/teams">Teams</a>
<ul>
<li class="item-123 active deeper parent">
<a href="/index.php/teams/senioren">Senioren</a>
<ul>
<li class="item-121 active deeper parent">
<a href="/index.php/teams/senioren/team-1">Team 1</a>
<ul>
<li class="item-133 current active">
<a href="/index.php/teams/senioren/team-1/samenstelling">Samenstelling</a>
</li>
<li class="item-125">
<a href="/index.php/teams/senioren/team-1/mededelingen">Mededelingen</a>
</li>
<li class="item-134">
<a href="/index.php/teams/senioren/team-1/standen-a-uitslagen">Standen &amp; Uitslagen</a>
</li>
<li class="item-124">
<a href="/index.php/teams/senioren/team-1/wedstrijdverslagen">Wedstrijdverslagen</a>
</li>

Natuurlijk zijn er ook meerdere hoofdmenu-items, ieder met hun eigen subitems.

Wat ik graag wil is het volgende:
Alle menu-items zijn normaliter

• color: #FF0000;

Cascading Stylesheet:

#sidebar .module ul.menu li a {
    color: #FF0000;
    text-decoration: none;
}

Probleem is dat nu alleen het toplevel rood wordt.
Ook wil ik graag dat als er over ieder menu-item gehoverd wordt, het volgende:

• color: #111111;
• text-decoration: underline;

Cascading Stylesheet:

#sidebar .module ul.menu li a:hover {
    color: #111111;
    text-decoration: underline;
}

Ook dit werkt alleen maar op toplevel

Nu begint echter het lastige, ik wil dus voor ieder menu-item dat een actief kind heeft, dat hij #111111 wordt. Zonder dat ik daarvoor ul li ul li ul li wil doen in mijn css. Omdat ik niet weet hoe diep het menu ooit nog gaat worden.

Graag hierbij jullie expertise

Alvast bedankt

[zacht]

Kun je niet gewon een class aanmaken voor die menu-items?

[Matis]

zacht schreef op zondag 25 september 2011 @ 20:14:
Kun je niet gewon een class aanmaken voor die menu-items?

Hoe bedoel je? Elk menu-item heeft toch al diverse classes, welke de toestand van het item toelichten.

[Nedra]

Ik denk dat ie bedoelt een klasse die voor alle sub-menu items van een bepaald niveau gelijk zijn. Dus de parents met de klasse menu-link-level-0, de submenu items met menu-link-level-1, die daaronder met menu-link-level-2, etc.

[zacht]

Dat bedoelde ik inderdaad, maar volgens mij kan het nog wel eenvoudiger met color: inherit;
Ik ben er echter te lang uit om er echt iets zinnigs over te zeggen merk ik.

[Matis]

Nedra schreef op zondag 25 september 2011 @ 20:29:
Ik denk dat ie bedoelt een klasse die voor alle sub-menu items van een bepaald niveau gelijk zijn. Dus de parents met de klasse menu-link-level-0, de submenu items met menu-link-level-1, die daaronder met menu-link-level-2, etc.

Ja, dat vergt natuurlijk een hoop handwerk, en daarbij houd ik nog steeds de statische css. Welke ik eigenlijk probeer kwijt te raken

[Nedra]

Tja, dan maak je het jezelf lastig. Misschien met child selectors? Anders zou het kunnen met javascript, maar als je liever lui dan moe bent, zou je natuurlijk ook altijd een plugin kunnen gebruiken.

[Matis]

Nedra schreef op zondag 25 september 2011 @ 20:56:
Tja, dan maak je het jezelf lastig. Misschien met child selectors? Anders zou het kunnen met javascript, maar als je liever lui dan moe bent, zou je natuurlijk ook altijd een plugin kunnen gebruiken.

Die heb ik al geprobeerd, maar ik wil toch een echt klikbaar menu, om ook onze mobiele (touchscreen) bezoekers te kunnen bedienen.
Wat is dus juist probeer te voorkomen is de inheritance. Omdat wanneer (bijvoorbeeld) Team 1 het .current class heeft, dan zijn al zijn kinderen dus ook #111111.
Ik wil dus juist dat de kinderen van .current dus niets overerven.

[Matis]

Fixed,

Cascading Stylesheet:

#sidebar .module ul.menu li.current li a {
    color: #FF0000;
    text-decoration: none;
}

#sidebar .module ul.menu li a:hover,
#sidebar .module ul.menu li.current a:hover {
    color: #111111;
    text-decoration: underline;
}

#sidebar .module ul.menu li.current a {
    color: #111111;
    text-decoration: none;
}

Nu is alleen het current menu-item #111111 en zijn children niet. Eigenlijk zou ik nog de parents mee willen nemen, maar dat komt later wel

[ Voor 16% gewijzigd door Matis op 25-09-2011 22:16 ]