Page 1 of 1
[SOLVED] Add dropdown feature at home-made menu
Posted: Sat Aug 29, 2009 8:57 pm
by 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>
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
Re: Add dropdown feature at home-made menu
Posted: Sun Aug 30, 2009 8:23 pm
by 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/...
Re: Add dropdown feature at home-made menu
Posted: Sun Aug 30, 2009 9:48 pm
by 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...
Re: [SOLVED] Add dropdown feature at home-made menu
Posted: Mon Aug 31, 2009 11:15 am
by 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; }