Ok - der Titel ist nicht so eindeutig ... sorry, aber besser ging es nicht.
Ich habe ein horizontales Drop-Down-Hover-Menü. Nicht das mitgelieferte, aber eines, was ähnlich funktioert mit eingerückter Liste. Das Submenu hovert dann wie man es kennt unter jedem Menüpunt auf.
Das Problem ist folgendes: Wenn ein Hauptpunkt aktiv ist, soll das Submenü an der jeweilgen Stelle unter dem Hauptmenüpunkt "stehenbleiben". An der gleichen Position, wo es voher "gehovert" hat.
Ich könnte nun meherere Templatevariationen benutzen und jeweils eine zweiten Menutag für das Submenu an die jeweilige Stelle einfügen, was ich vom Handling her ungünstig finde.
Könnte man die Klasse "activeparent" oder "currentpage" dafür mißbrauchen? In dem man sie auf die Liste anwendet, statt nur auf die Links? Oder eigene Klassen für aktive Listen-Elemente ins Menü-Template einbauen? Ich habe da eine leichte Ahnung. im Detail tappe ich aber noch Dunklen...
Die css fürs Menu (die aber eigentlich nicht das Problem sind - denn sie tun ja, was sie sollen).
Code: Select all
#menu {
width: 100%;
height:140px;
background: url(images/schatten.jpg) no-repeat;
font-family: 'crimson text';
font-size: 150%;
}
#menu ul /* alle listen */
{
padding: 0;
margin: 0 0 0 30px;
list-style:none;
line-height:1;
}
#menu a
{
display: block;
color: #fff;
padding:0 0 7px 20px ;
margin: 5px 0 0 20px;
text-decoration:none;
}
#menu a:hover {
background: url(images/menulist.gif) no-repeat ;
}
#menu a.currentpage {
background: url(images/menulist.gif) no-repeat ;
}
#menu a:activeparent {}
#menu li /* all list items */
{
float:left;
width: 150px;
}
#menu li ul /* second-level lists */
{
position: absolute;
padding: 0;
background:#C5CFC8;
display:block;
line-height: 80%;
margin: 0 0 0 20px;
width: 180px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#menu li ul li /* second-level lists */
{
width: 180px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#menu li ul a {
display:block;
margin: 0;
border-bottom: 2px solid #fff;
padding:2px 0 2px 20px;
font-size: 90%;
color: #525253;
}
#menu li ul a:hover {
color: #fff;
background: #525253;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul
{
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul /* lists nested under hovered list items */
{
left: auto;
}Code: Select all
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{if $count > 0}
<ul>
{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->current == true}
<li><a class="currentpage" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->menutext}</a>
{elseif $node->parent == true}
<li class="activeparent"><a class="activeparent" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> |
{else}
<li><a 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 != ''} target="{$node->target}"{/if}>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
- kann ich mir bildlich nicht so richtig vorstellen.
.
