Hilfe beim Menü

[xsx89]

Hallo CMSms Community,

ich hab ein Problem mit dem Menü einer Webseite. Und zwar möchte ich die Unterpunkte in einer anderen Farbe(anderes Bild?). Blos ich kriege das irgendwie nicht hin. Zweites Problem ist, wenn ein Menüpunkt ausgewählt ist soll er so bleiben als wenn ich mit der Maus drüber fahre.

Hier mal ein Auszug aus meiner css datei:

Code: Select all

#avmenu {
clear:left;
float:left;
width:150px;
margin:0 0 10px 0;
padding:0;
text-align: center;
}

#avmenu ul {
list-style:none;
width:150px;
margin:0 0 20px 0;
padding:0;
}

#avmenu li {
margin-bottom:5px;
}

#avmenu li a {
font-weight:bold;
height:20px;
text-decoration:none;
color:#505050;
display:block;
padding:6px 0 0 0;
background: url(uploads/lindenschule/button.gif) bottom left repeat-x;
}

#avmenu li a:hover, #avmenu li a.current, #currentpage, .currentpage {
background: url(uploads/lindenschule/button_down.gif) bottom left repeat-x;
color:#505050;
}

#avmenu ul ul {
margin:5px 0 0 13px;
width:150px;
font-size:0.7em;
}

#avmenu ul ul a {
height:21px;
margin:0;
padding:5px 0 0 0;
}

#avmenu h2 {
font-size:1.5em;
font-weight:normal;
}

Und hier mein Menütemplate:

Code: Select all

{* CSS classes used in this template:
#active - The active/current page
li#separator - To style the ruler for the separator
span.sectionheader - To style section header *}
{if $count > 0}
<__script__ type="text/javascript" language="javascript" src="lib/helparea.js"></__script>
<div class="menu">
<ul id="menu">
{assign var="prevdepth" value="1"}
{foreach from=$nodelist item=node}
{assign var="prevdepth" value=$prevnode->depth}
{if ($node->depth <= $prevdepth)}
{if ($prevnode->haschildren == "1")}<li></li></ul></div></li> {* bugfix if subitems were not shown in menu *}
{else}
{if $node->depth < $prevdepth}
{assign var="act_depth" value=$prevdepth-$node->depth}</li>
{while (($act_depth > 0) and ($collapseopened > 0))}
</ul></div></li>
{assign var="act_depth" value=$act_depth-1}
{assign var="collapseopened" value=$collapseopened-1}
{/while}
{else}
</li>
{/if}
{/if}
{/if}

{if $node->type == 'separator'}
<li id="separator"></li>
{else}
{if $node->current == true}<li id="active">
{else}<li>
{/if}
<a id="pic{$node->id}" 
{if $node->type != 'sectionheader'}
href="{$node->url}"
{if $node->target ne ""}
target="{$node->target}"
{/if}
{/if}
{if $node->haschildren == '1'}
{assign var="collapseopened" value=$collapseopened+1} onclick="expandcontent('sub{$node->id}')"
{else}
{/if} style="cursor:hand; cursor:pointer">
{if $node->type == 'sectionheader'}<span class="sectionheader">{/if}
{$node->menutext}
{if $node->type == 'sectionheader'}</span>{/if}
</a>
{if $node->haschildren == '1'}<div id="sub{$node->id}" class="expand"><ul>{/if}
{/if}
{assign var="prevnode" value=$node}
{/foreach}

{if ($prevnode->haschildren == "1")}<li></li></ul></div></li> {* bugfix if subitems were not shown in menu *}
{else}
{if $prevnode->depth > 1}
{assign var="act_depth" value=$prevnode->depth-1}</li>
{while (($act_depth > 0) and ($collapseopened > 0))}
</ul></div></li>
{assign var="act_depth" value=$act_depth-1}
{assign var="collapseopened" value=$collapseopened-1}
{/while}
{else}
</li>
{/if}
{/if}

</ul>
</div>
{/if}

Hoffe ihr könnt mir helfen. Und hier noch der Link zur Seite: afskyritz.kilu.de

Grüße XsX

[antibart]

Für aktive Menupunkte und Elterneltenelemente gibt es die Klassen

.currentpage
.activeparent



Zuden farben des UNtermenues:

Bei musst dem Untermenu natürlich die neuen Farben auch zuweisen. Andernfalls erbt es  die Stile des HAuptmenüs ... das fehlt bei dir:

ZB


#avmenu li ul a{
margin:5px 0 0 13px;
width:150px;
font-size:0.7em;
color: #fff
}

[xsx89]

Danke schonmal antibart!

Bekomm das mit dem dem aktiven Menüpunkt (.currentpage?) nicht hin. Hab da schon soviel rumprobiert, aber es geht einfach nicht. Mit dem Farben ist klar aber wenn ich dann mit der Maus drüber fahre ändert sich die Farbe wieder. Wie mach ich das wenn die Maus über ein Button ist im Untermenü?

Grüße XsX

[NaN]

Schau Dir mal den HTML-Code im Browser an.
Und dann vergleich mal den Aufbau des Menüs mit den mitgelieferten Stylesheets.

Bsp:

Code: Select all

<ul id="meine-navi">                       <- Hauptmenü (1. Ordnung) - css: #meine-navi {...}
   <li>                                            <- erster Hauptmenüpunkt - css: #meine-navi li {...}
      <a href="..."> ... </a>              <- Link im ersten Hauptmenüpunkt - css: #meine-navi li a {...}
      <ul>                                        <- Untermenü (2. Ordnung) - css: #meine-navi li ul {...}
         <li>                                      <- erster Untermenüpunkt - css: #meine-navi li ul li {...}
            <a ...> ... </a>                  <- Link im ersten Untermenüpunkt - css: #meine-navi li ul li a {...}
         </li>
      </ul>
   </li>
</ul>

Fällt Dir da was auf?
Genauso wie die Hierarchie im HTML-Code steht, kannst Du auch im CSS arbeiten.
Was passiert, wenn Du mit der Maus über einem Menüeintrag bist, wird im CSS mit der sogenannten "Pseudoklasse" namens "hover" definiert.

Bsp:

das gilt für aktive hauptmenüpunkte und, wenn nirgends was anderes kommt, auch für alle aktiven untermenüpunkte:

Code: Select all

#meine-navi li.currentpage:hover {...}  

das gilt für untermnüpunkte 2.Ordnung und, wenn nirgends was anderes steht, auch für alle weiteren untermenüpunkte (3.,4.,5.,... Ordnung):

Code: Select all

#meine-navi li ul li.currentpage:hover {...}

usw.