[Opgelost] Verschillende menu achtergronden in hetzelfde menu-level

[boschie]

Hallo,

Ik ben op zoek naar een manier om in hetzelfde menu-level verschillende achtergronden te creëren.

Het zou eventueel met een alias-node kunnen maar wanneer ik dan pagina's toevoeg of verwijder dan wordt ook de alias anders en gaat dit dus niet meer op (of heb ik dit mis?).

Ik zat zelf te denken dat elk menu een volgorde nummer zou hebben maar ik kan dit nergens weer vinden.

In de bijlagen zitten afbeeldingen hoe het nu is en hoe het zou moeten zijn.

De afbeelding met gelijke menu-achtergronden is dus hoe het nu is en de afbeelding met de menu-achtergronden die door lopen tot aan de rand is hoe het zou moeten zijn.

Zou iemand mij in de juiste richting kunnen sturen?

Het gaat om de website: http://www.fysiotherapieslagharen.nl

Alvast bedankt.

Hendrie

[Jos]

Ik zat zelf te denken dat elk menu een volgorde nummer zou hebben maar ik kan dit nergens weer vinden.

Voor een volgordenummer kun je de {counter} tag gebruiken binnen de foreach statement in je menutemplate. http://www.smarty.net/manual/en/languag ... ounter.php

Beter/netter is om de index of iteration van de foreach te gebruiken. zie voorbeeld 7-10 in http://www.smarty.net/manual/en/languag ... oreach.php
Merk hiervoor op dat de foreach een name moet krijgen.

[Rolf]

Hoi Boschie,

Als ik de afbeeldingen zou ik het eerst anders proberen.

Zou je niet alle toetsen dezelfde achtergrond kunnen geven en vervolgens de 'content' div iets geforceerd naar links kunnen laten schuiven.
De transparante achtergrond van de content zal dan over de toetsen schuiven (z-index) en je krijgt hetzelfde resultaat. Tenminste dat denk ik

grt. Rolf 

[boschie]

Hoi Rolf,

Hier ben ik al tot in den treure mee aan het proberen geweest. Mijn eerste idee was:

Onderste laag: de achtergrond (het gebouw)
Tweede laag: 1e level van het menu
Derde laag: de content met afgeronde linker bovenhoek zodat het deel weg valt zo ik het hebben wil
Vierde laag: 2e en volgende levels van het menu zodat deze zichtbaar worden boven de content

De eerste drie lagen waren geen probleem, het menu was perfect afgerond en de content en het eerste level van het menu werd prima weergegeven.
Helaas viel de 2e en volgende levels ook weg onder de content. En ik kreeg ze niet naar boven met z-index.
Of alle levels van het menu komen boven de content of alle levels van het menu komen onder de content terecht. Het lukte mij niet om deze van elkaar af te breken.

GRTZ,
boschie

[boschie]

P.S.
Ik ben nog aan het kijken wat er met Jos' idee mogelijk is.

[boschie]

Opgelost!

Misschien niet de eleganste oplossing maar het werkt.

In Menubeheer het sjabloon aangepast:
Classes toegevoegd aan elk menu-item en deze dan in CSS de achtergrond aangepast voor elk bewust item.

De sjabloon:

Code: Select all

{* CSS classes used in this template:
  #menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
  #primary-nav - The id for the <ul>
  .menuparent - The class for each <li> that has children.
  .menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
    <div id="menuwrapper">
        <ul id="primary-nav">
        {foreach from=$nodelist item=node}
            {if $node->depth > $node->prevdepth}
                {repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
            {elseif $node->depth < $node->prevdepth}
                {repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
        </li>
        {elseif $node->index > 0}</li>
        {/if}

    {if $node->parent == true or ($node->current == true and $node->haschildren == true)}
        <li class="menuactive menuparent menu{$node->hierarchy number_of_levels="1"}">
                                                  ^      ^    toegevoegd     ^    ^
            <a class="menuactive menuparent" {elseif $node->current == true}
        <li class="menuactive menu{$node->hierarchy number_of_levels="1"}">
                                 ^      ^    toegevoegd     ^       ^
            <a class="menuactive" {elseif $node->haschildren == true}
        <li class="menuparent menu{$node->hierarchy number_of_levels="1"}">
                                 ^      ^    toegevoegd     ^       ^
            <a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
        <li class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="menu_separator" />{else}
        <li class="menu{$node->hierarchy number_of_levels="1"}">
                        ^      ^    toegevoegd     ^       ^
            <a {/if}
    {if $node->type != 'sectionheader' and $node->type != 'separator'}
    {if $node->target}target="{$node->target}" {/if}
        href="{$node->url}"><span>{$node->menutext}</span></a>
        {elseif $node->type == 'sectionheader'}
        ><span class="sectionheader">{$node->menutext}</span></a>
    {/if}
    {/foreach}
        {repeat string='</li></ul>' times=$node->depth-1}
            </li>
        </ul>
        <div class="clearb"></div>
    </div>
{/if}

en de CSS:

Code: Select all

#menu_vert ul li.menu1 {
background: url(uploads/images/menu/achtergrond/menu1_achtergrond.png) no-repeat;
}

#menu_vert ul li.menu2 {
background: url(uploads/images/menu/achtergrond/menu2_achtergrond.png) no-repeat;
}

#menu_vert ul li.menu3 {
background: url(uploads/images/menu/achtergrond/menu3_achtergrond.png) no-repeat;
}
etc, etc...