[SOLVED] Add dropdown feature at home-made menu

[brentnl]

Hi,

I've the following problem:
I made a menu template myself (and with the help of this forum  ;D), but now I want to add a dropdown feature, just like this example.

I've looked to a lot of dropdown templates, but I can't get it working properly..

My template (without 'dropdown-attempts')

Code: Select all

<ul>
{foreach from=$nodelist item=node}
   {if $node->alias == $page_alias}
<li><a href="{$node->url}"><img src="images/menu/pressed/{$node->menutext}.png" alt="{$node->menutext}" border="0"/></a></li>
{else}
<li><a href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a></li>
{/if}
{/foreach}
</ul>

CSS

Code: Select all

div#menu {
height:43px;
width:535px;
margin:0 auto;
padding:0;
}

div#menu ul {
list-style:none;
}

div#menu a:hover {
background-color:none;
}

div#menu li {
display:inline;
margin-left:-3px;
}

I hope someone could help me  :D

[Dr.CSS]

That link gives an error of page not found, drop down menus are standard fare in the default install, see http://multiintech.com/defaultcontent/...

[brentnl]

Yeah I know, the link contained one 'L' to much at the end....

I'm a bit further now (dutch part of this forum) and I've this...

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="menuactivemenuparent"><a class="menuactivemenuparent" href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a>

{elseif $node->haschildren == true}
<li class="parent"><a class="parent" href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a>

{elseif $node->current == true}
<li class="currentpage"><img src="images/menu/pressed/{$node->menutext}.png" alt="{$node->menutext}" border="0"/>

{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}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a>

{/if}

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

Code: Select all

ul {visibility:visible;}
ul:hover {visibility:visible;}

.parent li {visibility:hidden;}
.parent li:hover,
.parent li a:hover {visibility:visible; background:#b3ab79; color:#fff;}

I know the stylesheet is wrong, but I don't know how to do it the right way.. also the template need a little adjustment in my opion, because the tag (from the child-items which should "dropdown") has no class defined...

[brentnl]

SOLVED

this is the working template:

Code: Select all

<div class="menu">
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<!--[if lte IE 6]><table><tr><td><![endif]--><ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}><img src="images/menu/pressed/{$node->menutext}.png" alt="{$node->menutext}" border="0"/>
   {if $node->depth == 1}<!--[if IE 7]><!--></a><!--<![endif]-->{else}</a>{/if}

{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}><img src="images/menu/pressed/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/pressed/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/> <!--[if IE 7]><!--></a><!--<![endif]-->

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/>

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> <img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/>
   {if $node->depth == 1}<!--[if IE 7]><!--></a><!--<![endif]-->{else}</a>{/if}

{/if}

{/foreach}

{repeat string="</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
" times=$node->depth-1}</li>
</ul>
{/if}
</div>

And this the working css:

Code: Select all

.menu {font-family: arial, sans-serif; width:535px; height:43px; position:relative; margin:0 auto 0 auto; font-size:11px; position:relative; z-index:100;}

.menu ul {padding:0; margin:0; list-style-type: none;}

.menu ul li {float:left; margin-left: auto; margin-right: auto; }

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; padding:0 0 0 15px; height:30px; margin: 0px; padding: 0px; line-height:30px; color:#000;}

.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}

.menu ul li ul {visibility:hidden; position:absolute; top:35px; left:0; }

.menu ul li:hover a,
.menu ul li a:hover {color:#fff; }

.menu ul li:hover ul,
.menu ul li a:hover ul {visibility:visible; color:#fff; margin-left: 200px;}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; left:300; top:40px; }

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {display:block; color:#fff; }

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {color:#000;}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {visibility:visible; color:#000; }