« Back
Top menu item slides down
Posted by: mark | May 7, 2013 | Category: Menus Smarty
I needed a menu where the top menu item moved to the bottom when hovered, like most drop down menus most of it was easy but.
When it came time to get the menu item text to move down I tried a lot of things to only 'fail'.
So I asked Ted to help me and we came up with this menu template used here
Between Teds awesome programming skills and some CSS trickery it is a success!
{assign var='top_item' value=''}
{if $count > 0}
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{assign var='depth_to_go' value=$node->prevdepth-$node->depth}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{if $node->depth == 1}
{repeat string="</li></ul>" times=$depth_to_go-1}
{assign var='depth_to_go' value=1}
</li>{$top_item|replace:'</li>':''|regex_replace:'/ ?class="(.*?)"/':''|replace:'<li><a h':'<li class="bottom"><a class="bottom" h'}
{/if}
{repeat string="</li></ul>" times=$depth_to_go}
</li>
{elseif $node->index > 0}</li>
{/if}
{capture name='this_item' assign='this_item'}
{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="parent2" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>
{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}
{/capture}
{$this_item}
{if $node->depth == 1}
{assign var='top_item' value=$this_item}
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
/* -------- HTML output by the above -------- */
/* -------- CSS --------- */
This moved the top menu items on top of each other to get the images to work correctly.
#primarynav li {
margin-left: -36px;
float: left;
}
This hides the top menu item text and remove the hover link cursor.
#primarynav li:hover a.menuparent,
#primarynav li:hover a.parent2,
#primarynav li:hover span.menuparent,
#primarynav li.sectionheader:hover span {
color: transparent;
cursor: default;
}
The bottom menu text styled like the top menu item.
#primarynav li a.bottom,
#primarynav li.sectionheader li.bottom span,
#primarynav li.sectionheader:hover li.bottom span {
padding: 22px 0px 16px;
font-size: 125%;
text-align: center;
background: none;
color: #666;
width: auto;
}
Remove the second level transparent/no text color and use the hover link cursor.
#primarynav li:hover li a.parent2 {
color: #666;
cursor: pointer;
}