[opgelost] css menu
Posted: Mon Nov 19, 2012 5:22 pm
Ik probeer al een paar weken een menu toe te passen binnen cmsms.
Gewoon simpel beginnen met basis css maar ik heb een probleem en ik zie de oplossing niet direct.
Ik weet niet hoe ik die <li>dots moet wegwerken (zie screenshot)
1) menu-sjabloon
2) menu-stylesheet
Gewoon simpel beginnen met basis css maar ik heb een probleem en ik zie de oplossing niet direct.
Ik weet niet hoe ik die <li>dots moet wegwerken (zie screenshot)
1) menu-sjabloon
Code: Select all
{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->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent"><a class="menuactive menuparent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="inmenu_active"><span>{$node->menutext}</span>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}2) menu-stylesheet
Code: Select all
#menu {
margin-top: -20px;
width: 35%;
float: right;
}
.inmenu {
list-style: none;
margin: 0;
padding: 0;
}
.inmenu li {
font-family: Verdana, Arial, Comic Sans Ms, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
.inmenu a {
border-bottom: 1px solid #393939;
color: #000;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight:normal;
}
.inmenu a:hover {
background: #2580a2 url('/uploads/images/hover.gif') left center no-repeat;
color: #fff;
padding-bottom: 8px;
}