[SOLVED]Need help with menu

[johanna]

Hello!

I am trying to make cms work with a template that has a tabbed horizontal menu in the header div. Have followed instructions as described in this post: http://forum.cmsmadesimple.org/index.ph ... 695.0.html
However, my menu structure is different and I don't know how to adapt the menu stylesheet and the template to fit this menu.

My menu looks like this:



Artist & Illustrator



Home
Galleries
Shop
Biography
Workshops
Contact
 
 

The accompanying css is as follows:

/* menu tabs */
#header ul {
z-index: 999999;
position: absolute;
   margin:0; padding: 0;
   list-style:none;
right: 0px;
bottom: 5px!important; bottom: 5px;
font: bold 11px Georgia, "Times New Roman", Times, serif;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(images/web/tableft1.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(images/web/tabright1.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
color: #FFF;
}
#header #current a span {
   background-position:100% -42px;
color: #FFF;
}
/* end menu tabs */

As you can see I don't have a separate ul id in this css, it just falls under 'header'.

If anyone can help please, that would be wonderful as I have been trying to get this to work for three days.

Many thanks!
Johanna

[Michael AC]

Hi johanna,

is this your template source code? Or is it what CMSms made out of it generating the page (source code the browser gets)?

You don't have to separate every menu page... just use something like this in your template:

Code: Select all

<div id="header">               
      <h1 id="logo"><img src="images/web/logo1.jpg" alt="" width="313" height="64" border="0" /></h1>   
      <h2 id="slogan">Artist & Illustrator</h2>

      {menu template="bulletmenu.tpl" number_of_levels="1"}
         
  </div>

You can find more options (and inforation about when and how to use them) in the MenuManager help (Admin -> Extensions -> Modules -> MenuManager

Kind regards,
Michael

[johanna]

Hi Michael,

Thank you very much for your reply! I have followed the instructions in this post: http://forum.cmsmadesimple.org/index.ph ... 695.0.html
and created a menu template, attached its own stylesheet and added the following line in the site template:

menu template='MyNav' start_level='2' number_of_levels='1'}

The MyNav menu template is this:

{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}{/foreach}
{repeat string="" times=$node->depth-1}

{/if}

But the CSS used for my menu tabs is this:

/* menu tabs */
#header ul {
z-index: 999999;
position: absolute;
   margin:0; padding: 0;
   list-style:none;
right: 0px;
bottom: 5px!important; bottom: 5px;
font: bold 11px Georgia, "Times New Roman", Times, serif;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(images/web/tableft1.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(images/web/tabright1.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
color: #FFF;
}
#header #current a span {
   background-position:100% -42px;
color: #FFF;
}
/* end menu tabs */

As you can see the and names used in the tpl file are not the same as used in my CSS stylesheet, and does not have the same structure. I don't know how to change the correct reference to the CSS in the tpl. file above and would need help with that I think.

This is my menu in the non cmsms version of my site:

               
         
      Artist & Illustrator
         
     
     
         Home
         Galleries
         Shop
         Biography
         Workshops
         Contact         
        
 

When I change this into the {menu template... etc.} line and look at the source code in the cmsms version of my site, I see a blank space and the menu does not appear at all.


Thank you very much for your much needed help!!

Johanna

[RonnyK]

Johanna,

with start_level=2, you'll start on the second level of the menu choosen. This could be handy if you have a horizontal menu and want the hor-menu's childs to be shown in a vertical menu. What if you try without the parameters behind the template-parameter.

Ronny

[johanna]

Hi Ronny,

Thank you for your reply. I have taken out the parameters after the menu template parameter and the menu does now show up in the right place, so that is great! However, it is not styled correctly, probably because of the discrepancy between the reference to the CSS style in the MyNav.tpl and how the menu stylesheet is set up. Can you tell me how to change that correctly?

Thank you so much for your help!!
Johanna

[RonnyK]

What is the container that holds the menu, is that still "header", or do you have "navwrap" now it the code. If you use FireFox, you can download "webdeveloper" extension. If you do so, you can use the option "Style Sheet information". If you then hover over your page, you'll see the active elements and see what needs to be styled.

Do you have a link to see it in action?

Ronny

[johanna]

Hi Ronny,

I have taken the CSS reference out of the menu MyNav.tpl, except left in the and so on. Didn't make any difference.

Have just compared my cmsms version: http://www.watercolourflowers.co.uk/index.php
to my non-cmsms version: http://www.watercolourflowers.co.uk/index3a.php

In Firefox I noticed that when I hover over the tabs in web developer view I get a that I don't see when I hover over the cms version. Don't know where that css has gone to be honest as it's in the associated stylesheet both for the whole site and the menu in cmsms.

Help! Getting ready to tear my hair out.... 

Thank you!
Johanna

[RonnyK]

I'll check it out later tonight, with the links provided it should be possible.

Ronny

[johanna]

Thanks, Ronny. I really appreciate it!

Johanna

[RonnyK]

Johanna,

if you wrap the around the menu text it will work. The span element is the element getting the tab around the menu,

If you change the code in your menu-template to:

Code: Select all

<span>{$node->menutext}</span>

In the third line from the bottom, where it now shows:

Code: Select all

{$node->menutext}

The span element will be inserted and be active.

Ronny

[johanna]

It works!!!! Thank you, thank you, thank you!!!!! You are a star!!!!! Big hug to you for helping me out, Ronny!!!
Have a fantastic weekend!!

Johanna