Customized Panoramica menu

[CMSmonkey]

On  the Panoramica template, the submenu is located to the right of the main body.  If there is no submenu, there still shows the top of the 'tab'.  Is there any way to remove this?

Here you can see it on the home page of this sample: http://www.elbersonline.nl/.  You will see the "tab top" above the globe.

Here is the menumanager template:

Code: Select all

{* CSS classes used in this template:
.active - The active page in the horizontal menu (first level).
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{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->current == true or $node->parent == true}
<li id="special"><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{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}><span>{$node->menutext}</span></a>{/if}
{/foreach}

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

[Dee]

In the page template there's something like this:

Code: Select all

<div id="content-right">
  <div id="sub-menu">
    {menu ...}
  </div>
</div>

Because the background image is set for div#content-right it will always show...

Code: Select all

#content-right {
	width:269px;
	float:left;
	margin-top:0;
	margin-bottom: 0;
	padding-top: 20px;
        padding-left: 0;
	padding-bottom: 0;
	background-image: url(uploads/Panoramica/menu-bg.gif);
	background-repeat: no-repeat;
	margin-left: 10px;
	background-position: 0px 20px;
}

A solution would be to put the div with the "tab top"/menu-bg.gif background  inside your menu template, so you can put it between the {if $count > 0} {/if} there.

Try removing/commenting out the background-image for div#content-right, adding a new div inside your menu template and setting the background-image for that. For example as menu template (gave the new div  id="submenu-bg"):

Code: Select all

{* CSS classes used in this template:
.active - The active page in the horizontal menu (first level).
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
<div id="submenu-bg">
<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 or $node->parent == true}
<li id="special"><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{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}><span>{$node->menutext}</span></a>{/if}
{/foreach}

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

and in your CSS:

Code: Select all

div#submenu-bg {
  margin: 0;
  background-image: url(uploads/Panoramica/menu-bg.gif);
}

Regards,
D

[CMSmonkey]

Hi Dee,
Thanks for your response.  I replaced the menu template with the one you had and added the div#submenu-bg to the CSS, but it did not change.... did I do something wrong?

[CMSmonkey]

I was looking over the theme's template and noticed this code:

Code: Select all

<div id="content-right">
    
     <div id="sub-menu">
{cms_module module='menumanager' template='Panoramica : ellnav-vert'   start_level='2' collapse='1'}
	 </div>
	 
      <span><img src="uploads/Panoramica/globe.jpg" alt="The world wide web" width="269" height="355" border="0" /></span>     
</div>
<div id="footer"><div id="footer-left">
  <p><a href="http://www.expressprintdesign.com" target="_blank"></a> Designed by ©<a href="http://www.expressprintdesign.com" target="_blank"> www.expressprintdesign.com</a> 2008 </p>
  </div>

Here is the code to the template "Panoramica : ellnav-vert":

Code: Select all

{* CSS classes used in this template:
.current - The current page in the vertical (local) menu. 
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="menu_horiz">
{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="current"><a class="current" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
<li><span class="bullet_sectionheader">{$node->menutext}</span>
{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-2}</li>
</ul>
{/if}

Does this one need to be changed?

Thank you in advance for your help.

[CMSmonkey]

OK, so I got the "tab top" to disappear - but my problem is that is disppeared on all pages.  How do I make it appear only on the pages where a submenu is?

[CMSmonkey]

forgive me for the typo -  I meant to say "that it disappeared on all pages"....