[solved] Menu Conversion

[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.

[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.