Menuproblemen bij meer dan 3 lagen
Posted: Thu Mar 06, 2008 12:24 am
Hallo Ronny (of iemand anders?),
Zou je eens naar dit probleem kunnen kijken en me kunnen vertellen hoe ik dit kan oplossen:
Zoals je weet heb ik twee site - die ongeveer met dezelfde opbouw in elkaar zijn gezet - lopen via CMS-MadeSimple.
Nu heb ik bij die van school het volgende probleem.
Wanneer ik in het menu meer dan drie dieptes aanmaak, werkt het mouse-over principe vanaf het tweede niveau niet meer naar behoren.
Dan laat het menu - vanaf mouse-over op de tweede laag - zich uitgeklapt zien, met het gevolg dat meerdere lagen over elkaar heen worden gezet en dan is het menu niet meer goed leesbaar/aanspreekbaar.
Hier kun je het zien: http://www.obsdetimp.nl - Bovenmenu: De Groepen - Groep 7. (En ook bij: Archief).
Kijk je nu bij htp://muurkrant.org in het linkermenu onder: Agenda - Doelgroepen - Provincies NL/BE dan gebeurd dit niet.
Maar in het bovenmenu bij Jongeren - Links wel weer door: Muziek. Hier is het alleen niet zo'n probleem, omdat er maar één menu-item met zoveel dieptes is.
Ik heb zelf het vermoeden, dat de fout ergens moet zitten onder Menubeheer/CSSMenu Horizontal, maar wat?????
Ik zal hieronder de codes plaatsen van obsdetimp en van de Muurkrant.
obsdetimp: Menubeheer - "Timp menu":
(nb. deze staat er ook bij, maar ik heb er eerlijk gezegd niet zo gauw een verwijzing naar gevonden, maar dat zegt alleen maar iets over mijn ondeskundigheid op dit gebied
)
obsdetimp: Menubeheer - "CSSmenu Horizontal":
obsdetimp: Menubeheer - "CSSmenu Vertical":
En dan voor de Muurkrant:
Menubeheer - "CSSMenu Horizontal":
En tenslotte
Menubeheer - "CSSmenu Vertical":
Ik hoop dat je er nog wijs uit kunt worden. 
En ik hoop van harte dat je me hier snel mee kunt helpen. De leerkracht van groep 7 vindt dit maar niks.
Mocht ik nou helemaal de plank mis hebben geslagen van waar het aan zou kunnen liggen en heb ik de verkeerde codes gekopieerd, dan hoor ik het wel van je.
Alvast maar weer bedankt voor je bemoeienis.
Zou je eens naar dit probleem kunnen kijken en me kunnen vertellen hoe ik dit kan oplossen:
Zoals je weet heb ik twee site - die ongeveer met dezelfde opbouw in elkaar zijn gezet - lopen via CMS-MadeSimple.
Nu heb ik bij die van school het volgende probleem.
Wanneer ik in het menu meer dan drie dieptes aanmaak, werkt het mouse-over principe vanaf het tweede niveau niet meer naar behoren.
Dan laat het menu - vanaf mouse-over op de tweede laag - zich uitgeklapt zien, met het gevolg dat meerdere lagen over elkaar heen worden gezet en dan is het menu niet meer goed leesbaar/aanspreekbaar.
Hier kun je het zien: http://www.obsdetimp.nl - Bovenmenu: De Groepen - Groep 7. (En ook bij: Archief).
Kijk je nu bij htp://muurkrant.org in het linkermenu onder: Agenda - Doelgroepen - Provincies NL/BE dan gebeurd dit niet.
Maar in het bovenmenu bij Jongeren - Links wel weer door: Muziek. Hier is het alleen niet zo'n probleem, omdat er maar één menu-item met zoveel dieptes is.
Ik heb zelf het vermoeden, dat de fout ergens moet zitten onder Menubeheer/CSSMenu Horizontal, maar wat?????
Ik zal hieronder de codes plaatsen van obsdetimp en van de Muurkrant.
obsdetimp: Menubeheer - "Timp menu":
(nb. deze staat er ook bij, maar ik heb er eerlijk gezegd niet zo gauw een verwijzing naar gevonden, maar dat zegt alleen maar iets over mijn ondeskundigheid op dit gebied
)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>" 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"><a class="menuactive menuparent"
{elseif $node->current == true}
<li class="menuactive"><a class="menuactive"
{elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
<div class="clearb"></div>
</div>
{/if}
Code: Select all
{* CSS classes used in this template:
#horiz-menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#horiz-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="horiz-menuwrapper">
<ul id="horiz-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" 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"><a class="menuactive menuparent"
{elseif $node->current == true}
<li class="menuactive"><a class="menuactive"
{elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
<div class="clearb"></div>
</div>
{/if}
Code: Select all
{* CSS classes used in this template:
#vert-menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#vert-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="vert-menuwrapper">
<ul id="vert-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" 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"><a class="menuactive menuparent"
{elseif $node->current == true}
<li class="menuactive"><a class="menuactive"
{elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
<div class="clearb"></div>
</div>
{/if}
Menubeheer - "CSSMenu Horizontal":
Code: Select all
{* CSS classes used in this template:
#horiz-menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#horiz-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="horiz-menuwrapper">
<ul id="horiz-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" 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"><a class="menuactive menuparent"
{elseif $node->current == true}
<li class="menuactive"><a class="menuactive"
{elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
<div class="clearb"></div>
</div>
{/if}
Menubeheer - "CSSmenu Vertical":
Code: Select all
{* CSS classes used in this template:
#vert-menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#vert-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="vert-menuwrapper">
<ul id="vert-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" 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"><a class="menuactive menuparent"
{elseif $node->current == true}
<li class="menuactive"><a class="menuactive"
{elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
<div class="clearb"></div>
</div>
{/if}
En ik hoop van harte dat je me hier snel mee kunt helpen. De leerkracht van groep 7 vindt dit maar niks.
Mocht ik nou helemaal de plank mis hebben geslagen van waar het aan zou kunnen liggen en heb ik de verkeerde codes gekopieerd, dan hoor ik het wel van je.
Alvast maar weer bedankt voor je bemoeienis.
