Menu vraagje: hoe toevoegen .activeparent ?

[rj]

Hallo,

ik maak bij een eenvoudige website gebruik van onderstaand menu-sjabloon. Met de classes .currentpage en .menuitem heb ik het menu gestyled maar wil ook graag de mogelijkheid hebben om de activeparent-page apart te stylen (als een sub-pagina actief is). Weet iemand welke code dan moet worden toegevoegd aan dit sjabloon? Alvast bedankt voor jullie reacties.

Code: Select all

<ul>
{if $count > 0}
{foreach from=$nodelist item=node name=foo}

{if $node->current == true and $smarty.foreach.foo.last == true}
<li class="activepage"><span class="currentpage">{$node->menutext}</span></li>

{* more things  go after here *}

{elseif $node->current == true}
<li class="activepage"><span class="currentpage">{$node->menutext}</span></li>

{elseif $smarty.foreach.foo.last != true}
<li><a href="{$node->url}"><span class="menuitem">{$node->menutext}</span></a></li>

{else}
<li><a href="{$node->url}"><span class="menuitem">{$node->menutext}</span></a></li>

{* more things stop here *}
{/if}

{* end of script around here *}
{/foreach}
{/if}
</ul>

[Evert B.]

Hallo rj,

Het stylen doe je in je stylesheet van je menu, niet in je template (sjabloon).

Ga naar Opmaak - > Stylesheets

Groeten Evert

[rj]

Hallo Evert,

klopt maar ik zou graag een class="activeparent" aan de code van het menu willen toevoegen zodat ik dat element apart kan stylen via css. Net zoals dat mogelijk is met "currentpage" en "menuitem".

groet,
Richard

[Rolf]

Goedemorgen,

Weet niet of we over hetzelfde praten, maar heb je deze toevoeging al in de stylesheet:

Code: Select all

div#menu_horiz .menuactive .menuparent,
div#menu_horiz h3 {
...
}

Grt. Rolf

[rj]

Hallo Rolf,

nee die staan er niet in want die classes komen niet voor in de code van het menu-sjabloon. Jij refereert waarschijnlijk aan de opbouw van de menu code die in de standaard CMSms menu-sjablonen wordt gebruikt (?).

Richard

[rj]

Ik heb geprobeerd of het lukte door het toevoegen van deze code maar helaas zonder succes:

{if $node->parent == true}
{$node->menutext}"

Iemand enig idee wat ik aan de menu-code zou moeten toevoegen om dit voor elkaar te krijgen?

[Gamonon]

Gebruik geen Als je een css class aanmaakt als :

.activeparent a.active
{
color: #F6C69C;
}

en natuurlijk in je stylesheet plaatst.

Gebruikt dan en je tekst is bijvoorbeeld oranje als de node actief is.

Dit zou volgens mij prima moeten werken.

[rj]

Gamonon,

het gaat niet om het stylesheet maar om de php-code van het menu-sjabloon.

[stijlXpres]

@RJ,

Je zou eens moeten kijken naar de standaard menu-templates van CMSMS. Ik weet dat cssmenu.tpl standaard onderscheid maakt tussen de Classes 'menuactive' en 'menuparent'. Bijkomend voordeel is dat de Classes, indien van toepassing, zowel op de betreffende als wordt toegepast. Je hebt dus qua styling veel vrijheden en mogelijkheden.

Standaard kun je de menutemplates niet bewerken, omdat ze ingebakken zitten in CMSMS, maar wanneer je ze importeert naar de database en van een andere naam voorziet (ik verwijder vaak alleen '.tpl'), kun je wijzigingen naar eigen inzicht aanbrengen.

Denk er vervolgens wel aan om in de pagetemplate ook te verwijzen naar de nieuwe menutemplate:

Code: Select all

{menu template='JOUWNIEUWEMENU'}

Tevens het nieuwe menu als standaard instellen in menumanager.

[Gamonon]

Gamonon,

het gaat niet om het stylesheet maar om de php-code van het menu-sjabloon.

Je vraagt dus eigenlijk hoe je een stylecode in je menu kan aanpassen?
Dat zal je echt in je stylesheet moeten doen want de basis tags staan al in je php menucode.

In je voorbeeld geef je aan dat je gebrobeert hebt:

{$node->menutext}"

Je gebruikt activeparent in <li en in <span. Dat gaat inderdaad niet werken zo.

Haal de <span weg en pas de <ul eigenschappen in je stylesheet aan met zoiets als

.activeparent ul a:active

Ik ga er van uit dat activeparent dus al gebruikt wordt in stylesheet en menu template.
Die class kun je verder vormgeven zoals je wilt.

[sumpson]

Hmm.. jammer dat hier geen antwoord op gevonden is, ben naar hetzelfde opzoek..

het menu sjabloon genereert:

<ul>
<li class="parent"><a>hoi</a>
<li class="menuactive"><a>sub-hoi</a></li>
</li>

het is dus niet mogelijk om <a>hoi</a> een aparte vormgeving te geven wanneer een onderliggend item is geselecteerd, <li class="parent"><a>hoi</a> zou eigenlijk <li class="parent activeparent"><a>hoi</a> moeten worden.. ik ga eens even het sjabloon ontleden en kijken of het me toch zelf lukt



EDIT: dat was niet zo moeilijk.. template="cssmenu.tpl" hierbij heeft de bovenliggende a de klasse "menuparent" ipv "parent" als een onderliggende link actief is.