Menu sjabloon

pasmaskas · **Joined:** Tue Nov 29, 2011 10:42 am **Posts:** 172

Beste CMSMS leden,

Ik ben bezig een css menu aan het maken die ik makelijk kan aanpasen naar de style die bij een website ontwerp past. Nu heb ik een verticaal menu gemaakt met multi lever submenu. Deze werkt perfect met het sjabloon die ik heb aangepast. Nu wil ik ook een horisontaal menu maken met een multilevel sub menu aleen deze heeft 2 classes voor de <ul> "nav first" en "nav" de eerste <ul> krijgt id="nav" dit heb ik aangegeven in het menu sjabloon en het eerste sub menu heeft class="nav first" nu moet ik voor het sub menu in het sub menu zal maar zeggen class="nav" zodat hij iets naar rechts opent. Wat moet ik veranderen aan mijn menu sjabloon om dit werkent te krijgen in het horisontale menu?

menu structuur is als volgt:

Code:

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4
           <ul class="nav">
               <li>Menu 1</li>
               <li>Menu 2</li>
               <li>Menu 3</li>
               <li>Menu 4</li>
           </ul>         
       </li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3
            <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4
           <ul class="nav">
               <li>Menu 1</li>
               <li>Menu 2</li>
               <li>Menu 3</li>
               <li>Menu 4</li>
           </ul>         
       </li>
        </ul></li>
    <li>Menu 4</li>
</ul>

en mijn menu sjabloon is als volgt:

--------------------------------------------------------------

Code:

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}

<ul id="nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="nav first">' 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 href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li> <a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li>{$node->menutext}

{elseif $node->type == 'separator'}
<li>

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

----------------------------------------------------------

Het menu werkt gewoon en het sub menu aleen het sub sub menu niet

ik hoop dat iemand mij kan helpen

gr pascal

mcDavid · **Posted:** Fri Apr 13, 2012 12:29 pm

je weet dat class="nav first" op deze manier twéé losse classnames zijn?

dit element zal dus in css te selecteren zijn met zowel .nav als met .first

oh en gebruik [code] tags om je code te posten, is een stuk overzichtelijker

pasmaskas · **Joined:** Tue Nov 29, 2011 10:42 am **Posts:** 172

Bedantk mcDavid ik heb het gelijk verandert. Dit is de code in een html van het menu wat ik werken wil krijgen.

Wat moet ik doen om het werkent te krijge /aanpassen in de css/html of menu sjabloon?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav, .nav, #nav .nav li { 
margin:0px; 
padding:0px; 
}

#nav li {
float:left; 
display:inline; 
cursor:pointer; 
list-style:none; 
padding:9px 20px 0px 20px;
height: 25px;
border:0;
background-color:#000;
position:relative;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#nav li ul.first {
left:0px; 
top:100%;
}

li, li a {
color:#000; 
text-decoration:none;
}

#nav .nav li { 
width:100%; 
text-indent:10px; 
line-height:30px; 
margin-right:10px; 
background: #999;
color:#000;
}

#nav li a {
display:block; 
width:inherit; 
height:inherit;
}

ul.nav { 
display:none;
}

#nav li:hover > a, #nav li:hover { 
color:#fff; 
background:#000; 
}

li:hover > .nav { 
display:block; 
position:absolute; 
width:150px; 
top:-2px; 
left:50%; 
z-index:1000;
} 

<!--AFTER DISPLAY IS THE IE GHOST HOVER FIX -->

li:hover { 
position:relative; 
z-index:2000; 
} 

<!--IE7 Z-INDEX BUG FIX, MUST FALL AFTER DISPLAY RULE -->
</style>
</head>

<body>

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4
           <ul class="nav">
               <li>Menu 1</li>
               <li>Menu 2</li>
               <li>Menu 3</li>
               <li>Menu 4</li>
           </ul>         
       </li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3
            <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4
           <ul class="nav">
               <li>Menu 1</li>
               <li>Menu 2</li>
               <li>Menu 3</li>
               <li>Menu 4</li>
           </ul>         
       </li>
        </ul></li>
    <li>Menu 4</li>
</ul>

</body>
</html>

Menu sjabloon

Who is online