CMS Made Simple Forums

Hi, I am really new to CMCMS and thanks to all who developed it - but now I am really stuck. I had a sample site for a customer developed with Adobe Golive and the plug-in menumachine. Now I am glad I found CMSMS. But now I need to transfer the style of the Golive-menu to CMSMS (or somehow rebuild it here). I need a horizontal menu on top of the pages that drops down when the cursor moves over it. But the top items of every column are more or less meant like headlines and should therefore not be links.
Now I have been working three days on it in CMSMS, read all help, the documentation and the forum, but I didn't succeed (or I got lost between code, css, templates, styles …).
The closest thing I could make were new pages of the type "link" that would link back to themselves (with # for the link). They showed up in the menu but were still active links - what would confuse the users. Whenever I tried a "section header" it either wasn't styled the way I wanted it or was hidden and covered by the next menu item.
I would be glad if someone could have a look at my testsite http://www.reinhardmohr.de/cmsmadesimple/ where I on top have set up the old Golive-menu and right beneath it the beginning of the CMSMS-menu. So you can easily compare.
Thanks for helping

Reinhard

Hi,

I don't know what version of the CMSMS you are using. v. 0.13 had a problem with sectionheader in
a horizontal dropdownmenu, and I don´t think it has been solved in v.1.0-beta4.

I think the problem is also described on the following link: http://forum.cmsmadesimple.org/index.ph ... 654.0.html

I don´t think the solution on the link is the correct one, since it rules out the possibility to have a menuparent with a link, so I also still have this problem in v.1.0-beta4: Menuparent which is sectionheader with children should not have link.

In v.1.0 it is not possible to use the sectionheader in a horizontal menu where menuparent has children and that has to be solved.
I guess it is a problem in the cssmenu.tpl.

Kind regards / Lars Kongsgaard

Sorta like the horiz. menus here http://www.multiintech.com/index.php?pa ... d_w_images

Which, menu template, menu, styling, are you using,?

I'm using 13 beta 4 and 13 stable and 1.0 beta 4 with out any problems.

Hi Mark,

In your site the menuparent also has a link. Even if it is "#" which leeds to the root.
Is it possible to have menuparent which is sectionheader and has children without the link in the menuparent.
(I don´t know how to explain it any better...)

Kind regards / Lars

Hi,

I made a small snapshot. Maybe that will explain the problem.
Please see below.

Kind regards / Lars

[attachment deleted by admin]

Hi, Lars and Mark,

thanks for your help. Lars understood perfectly what I wanted to describe. Your link to your recent post at first seemed to help me, until I noticed that the code in my cssmenu.tpl was a little bit different from yours. Now I am hesitating to insert anything in case I could spoil it or confuse the people who are trying to help me while we are discussing the problem. I am using 1.0 beta 4 what might also explain the different code.

For Mark: 1.0 beta 4 and cssmenu.tpl. I am styling it with an adopted version of the Default CSSMenu Horizontal. The link to the menu on your site showed just the solution I figured out, too - but there still is the link in the menuparent.

As a beginner in Content Management Systems I was so glad I found CMSMS after trying out other systems. But now I start to get lost in code, css and menutemplates …
Maybe I just ask to much from the menu styling - but menus are just so important for the impression a page makes and for guiding the visitors around without confusing them.

Thanks for helping

Reinhard

Some of the menu templates have this...

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
current == true}
url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}
{elseif $node->type == 'sectionheader'}
{$node->menutext}
{elseif $node->type == 'separator'}

if you look at the Help in Menu Manager you can make your own menu template and designate the sectionheader to not be a link/href to anything and it shouldn't be styled like a link, no change or text decoration.

You can also use CSS to make the section header look and act just like a normal word but still get a drop down under it.

Hi Mark and Reinhard,

In the v. 1.0-beta4 standard installation you need to change the following: (marked in red)

in cssmenu.tpl:

{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{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}
type == 'sectionheader'}
        {$node->menutext}
{elseif $node->type == 'separator'}
       
{else}
type != 'sectionheader' and $node->type != 'separator'} *}
{* change to: *}

{if $node->type != 'separator'}[/color] href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{/if}
{/foreach}

{repeat string="" times=$node->depth-1}



{/if}

In the template e.g. "CSSMenu top + 2 columns", you need to use the following:

     


               
      Navigation
         {menu template='cssmenu.tpl'}
     
     
     

You need to add the stylesheet "Navigation: Simple - Horizontal" to the template and in this template
you need to change the following:

/* the links, that is each list item */
div#menu_horiz a {
   padding: .6em 1em .6em 1.4em; /* padding inside the list item box */
   margin: 0; /* margin outside each list item box */
   text-decoration: none; /* no underline for links */
   color: #18507C;
/*   background: url(images/cms/arrow-right.gif) no-repeat 0.5em center; ;*/   
display: block; /* IE has problems with this, fixed above */
}

And then it seems to be working like the included snapshot below is showing:

Kind regards / Lars

[gelöscht durch Administrator]

Hi Mark and reinhard,

There seems to be still a small problem...I am trying to solve it...

Best regards / Lars

Hi, Lars,

after I had a terrible day yesterday with trial and error I can report what I found out. I am glad that at one point I came to the same solution as you did (though I couldn't check yet all your suggestions). So maybe together we can finally find a solution.
As I didn't know (and still don't know by now) whether our problem lies in the menu-template or in the "Default CSSMenu Horizontal" stylesheet (or in my working copy of it) I had a look at the stylesheet. There I noticed that there was no way to style a section header. So I just copied a block of text, inserted it again and edited it a little bit:
Sorry, I can't change the color of the inserted text (don't know why), so I had to put it between two lines of ++++. When I now added content in the pages list with the content-type "sectionheader" it indeed appeared in my menu without a link - perfect. I was still confused because it doesn't seem to make a difference if I write "#primary-nav li.sectionheader" or just "li.sectionheader" in this one line - nonetheless it worked. (see first screenshot below)

But just a few minutes later I found out that this solution only worked when my sectionheader had no child parents. As soon as I added a page that was a child of my sectionheader, the section header in the menu was kind of covered by a white area (a layer?) and could not be seen. (see second screenshot below)
Nonetheless the section header was there: As soon as I moved my cursor to the top left side of where my section header should be, the white covering area changed and became the drop-down-menu of the child page. (see third screenshot below)

So I tried a lot until I came to the same solution as you did: Edit one line in the menu-template to and then it looked just perfectly. (see fourth screenshot below)

With the grave setback: The section header now suddenly had a link underneath again.

That was when I became tired. Now I hope this is not too confusing and helps a little bit. When I have my normal daily work done I think I will try again to find something helpful.

Thanks

Reinhard

[gelöscht durch Administrator]

Hi Reinhard,

The solution I proposed, works ok for me in Firefox v.1.5.0.6. and Opera v.9.01,
but not in Internet Explorer v.6.0 and I am trying to figure out what the problem is.

Obviously you problem might be a little different since you have changed the stylesheets
a lot , I imagine...compared to CMSMS v.1.0-beta4.

Kind regards / Lars

So, if you‘re on the right way - that‘s great. If everything works and only IE makes problems: Did you forget to insert this "special line of code" into the head of your template that makes horizontal drop-down-menus work in IE? I think it‘s mentioned in the help-section for menu manager module.

Good luck (I am still working on my problems, but I still do not understand everything)

Reinhard

Hi Reinhard,

Thanks for the tip with help-section for menu manager module, I will look into it right away.
I appreciate Marks help very much and I have learned much by reading your answers, Mark Thank you.
I want to learn and understand more about CSS. My Main sources are

http://www.positioniseverything.net/index.php
http://css.maxdesign.com.au/listutorial/index.htm
http://www.w3schools.com/default.asp

Thank you for now / BR / Lars