MultiInTech

Imap1

Imap image menu:

first an image i'll use the one above as an example, this image came as 6 images for before and 6 for :hover state, i stiched the first set together to make 1 image, it is 655px by 39px.

these are the :hover images

in the Template the menu is set here,,

<!-- end header -->

<!-- menu --><div id="sidebar">
         {cms_module module='menumanager' template='imaphoriz'   collape="1"}
<!-- end menu --></div>

<!-- breadcrumb -->

in the layout CSS it is,,

div#sidebar{width:655px;height:39px;margin:0;padding:0;} you can add margin to move it around but not padding

the imaphoriz,,

color denotes my changes

{* CSS classes used in this template:
#imap - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}

<ul id="imap">
{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="menuactive menuparent" id="pic{$node->id}"><a class="menuactive menuparent" id="a{$node->id}" title="{$node->menutext}"{elseif $node->current == true}
<li class="menuactive" id="pic{$node->id}"><a class="menuactive" id="a{$node->id}" title="{$node->menutext}"{elseif $node->haschildren == true}
<li class="menuactive menuparent" id="pic{$node->id}"><a class="menuactive menuparent" id="a{$node->id}" title="{$node->menutext}" {else}
<li id="pic{$node->id}"><a id="a{$node->id}" title="{$node->menutext}"{/if} href="{$node->url}">{$node->menutext}</a>{/foreach}

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

{/if}

Next: Imap2

where we use all the id="pic{$node->id}"><a id="a{$node->id}" title="{$node->menutext}" , and move into positioning the list blocks.