Page 1 of 1
[solved] Menu Conversion
Posted: Fri Jun 12, 2009 11:42 pm
by Joe McPlumber
Has anyone ever converted Doug Bowman's "Sliding Doors" menu to CMSMS?
http://www.alistapart.com/articles/slidingdoors2/
The main difficuty i'm having is that it uses an id attribute on the tag, to determine the active tab, and i don't think that can be changed dynamically in the stylesheet. I tried inserting the appropriate inline style directly in the ".menuactive" list item in the menu template, which worked except the images were misaligned and i can't figure out why.
Re: Menu Conversion
Posted: Sat Jun 13, 2009 4:29 am
by Joe McPlumber
This is a slightly modified "minimal" template; it's got a wrapper around it because that's how i originally did the menu..
Code: Select all
{if $count > 0}
<div id="menuwrapper">
<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->current == true}
<li class="currentpage"><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{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}> {$node->menutext} </a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
</div>
{/if}
...this is the stylesheet; i basically just discarded the ID selectors in favor of the .currentpage class. It's a bit messy but i was only trying to get it to work...
Code: Select all
#menuwrapper {
float:left;
width:100%;
background:#CCCCCC url("../img/navbg.gif") repeat-x bottom;
line-height:normal;
margin-bottom: 30px;
}
#menuwrapper ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#menuwrapper li {
float:left;
background:url("../img/navL.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #000;
}
#menuwrapper a {
float:left;
display:block;
width:.1em;
background:url("../img/navR.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#menuwrapper > ul a {
width:auto;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menuwrapper a {float:none;}
/* End IE5-Mac hack */
#menuwrapper a:hover {
color:#FF0000;
}
#menuwrapper ul .currentpage {
background-position: 0% -150px;
border-width:0;
}
#menuwrapper .currentpage a {
background-position: 100% -150px;
padding-bottom: 5px;
}
#menuwrapper li:hover, #menuwrapper li:hover a {
background-position: 0% -150px;
color:#8B0000;
}
#menuwrapper li:hover a {
background-position: 100% -150px;
}
The template is named "minimal_menu" and i only want one level of tabs and so...
Code: Select all
{menu number_of_levels="1" template='minimal_menu'}
My images are attached. They've got no bevels because i reuse them, it's easy to change the colors.
Tested in FF3, IE7, IE8, Opera 9.25, and Chrome.