Horizontal, Linear CSS menu

[Evert B.]

Hi all,

I have some trouble fixing my CSS menu. I have read an old topic where this was solved, but I want to know what code to put into my layout template, and which menu template was used. Hopefully anyone can help me out.

I'd like this menu: http://www.lwis.net/free-css-drop-down- ... inear.html

Here is the topic where it was solved but does not contain all information on how it was solved: http://forum.cmsmadesimple.org/index.ph ... 007.0.html

Thanks all!

Nucleus

[Owens]

If I add this code to a stylesheet which I connect to the template it doesn't show anything at all. No menu what so ever.

The {menu template='cssmenu.tpl'} should produce a hierarchy list of your pages (with class assignments to the and tags). So if you get nothing then most likely the template has been changed so it  outputs nothing.

If the template file was missing it would generate an error like this:

Code: Select all

string(84) "Smarty error: unable to read resource: "module_file_tpl:MenuManager;cssmenu.tpl""

So Test just a plain {menu} smarty tag. Just adding {menu} to the content area of a page and it will generate a hierarchy list of your pages. This list would contain plain and tags with no class assignments. If it dosen't return a list of pages then you have a problem that needs to be asked and solved in the Official Boards under Product Support.

The CSS in the previous post (which is the solution to the question in that post) will "style" the list of links generated by the cssmenu.tpl template file. So once you have the {menu template='cssmenu.tpl'} returning your list of pages, attach a style sheet with the CSS (from the original post) to the template (which has {menu template='cssmenu.tpl'} in it).

[Dr.CSS]

From the other post...

The #primary-nav refers to the UL in the menu, all cssmenu templates use and all IDs have to be unique so if it has 2 you will get problems...

[Owens]

...all cssmenu templates use and all IDs have to be unique so if it has 2 you will get problems...

Dr. CSS brings up a good point that helps elaborate on why I want you (nucleus) to just try the {menu} without a template call. Even if the id is used more than once within several elements this will not result in a complete and total disappearance of the menu data (well it could if the parent container element was set with a hidden visibility - which is one of the things we will be side stepping with the plain {menu} test). Nucleus is implying in his first post that the menu simply didn't appear by saying, "...doesn't show anything at all. No menu what so ever."

Therefore, we need to fist get your menu to appear.

A plain {menu} will return a list of links without any IDs being assigned. This will allow us to see if the menu is working. If the list of links doesn't show up with a plain menu call then there will be bigger problems than CSS formatting. Only two types of will get a class assignment in a plan {menu} without a template call. One is the currently active page, which gets assigned the class "currentpage". The second is a parent page which gets assigned the class "parent". The parent pages will be assigned the class "menuactive menuparent" when they or their children are active. So this will eliminate any concerns over double using ids.

Nucleus once a menu is output to the screen we can move forward on solving the styling issue at hand. Some of the problems could be:
* the CSS isn't attached to the template using {menu template='cssmenu.tpl'}
* the menu template file has been corrupted or changed in some way, so it isn't outputting the menu correctly
* you are using the same template more than once in the page template (a very good point from Dr. CSS)

[Evert B.]

Nucleus once a menu is output to the screen we can move forward on solving the styling issue at hand. Some of the problems could be:
* the CSS isn't attached to the template using {menu template='cssmenu.tpl'}
* the menu template file has been corrupted or changed in some way, so it isn't outputting the menu correctly
* you are using the same template more than once in the page template (a very good point from Dr. CSS)

Hi again  , many thanks for all replies.

Putting a {menu} tag gave me a very simple menu, like you told me, without styling. I think Dr. CSS had a good point, I was trying so many things to make it work that there were two stylesheets with menystyling attached to the template.
But since this was solved I've had the following progress:

This is my CSS:

Code: Select all

#primary-nav,
#primary-nav li,
#primary-nav ul {
 list-style: none; 
 margin: 0;
 padding: 0;
}

#primary-nav {
 position: relative;
 float: right;                        /*was right*/
 background-color: #;  
}

#primary-nav a, a:active, a:visited {
 color: #FFFFFF;             
 line-height: 20px;        
 font-family: Tahoma;       
 font-size: 12px;           
 text-decoration: none;   
 font-weight: bold;
}
#primary-nav a:hover {
 color: #937004;
}

#primary-nav li {
 float: right;            
 vertical-align: middle;
 padding-right: 7px;
 padding-left: 7px;
}

#primary-nav li.hover,
#primary-nav li:hover {
 position: relative;
 cursor: default;
}

#primary-nav ul {
 visibility: hidden;
 position: absolute;
 top: 100%;              /* needed for ie7 otherwise sub shows under main nav */
 right: 0px;              /* was 0px, heb ik veranderd, checken of dit blijvend is met meer childs */
 border-top: 0px solid #F2DD7D;
 border-left: solid 0px #F2DD7D;
 border-bottom: solid 0px #F2DD7D;
 border-right: solid 0px #F2DD7D;      
 background-color: #;
 min-width: 400px;
}

#primary-nav ul a, a:active, a:visited {
 color: #937004;             
 line-height: 20px;         
 font-family: Tahoma;      
 font-size: 12px;           
 text-decoration: none;     
}
#primary-nav ul a:hover {
 color: #F2DD7D;
 text-decoration: none;
}

#primary-nav ul li {
 float: none;              
}

#primary-nav li:hover > ul {
 visibility: visible;
}

#primary-nav li.hover,       
#primary-nav li:hover {
 position: static;
}


#primary-nav ul.unli {
    display: block;
    float: left;
}

#primary-nav ul.unli li {
    float: left;
    color: #FF0000;
    font-weight: none;
}

This is combined with the {menu template='cssmenu.tpl'} tag in my template.

It resulted in a menu like this

As you can see on my website there are now only a few problems left:

• - I'd really like to see the submenu present after one of the subitems is clicked on. I mean it remains visible after one child has been clicked on.
• - Is there a possibility to make it happen that submenu items appear below the parent? On the menu you see the child miles away from the parent.
  [li]- For some reason, the menu is on the right side in IE and on the left in FF. This is not ugly but I find it weird. I'd like to see it left everywhere.

Life version, click here (website still under construction)

Your advice is very much appreciated!
Thanks Nuc

[Owens]

In Opera the menu is overlapped, Image attached. Safari and Chrome the menu is left aligned. Menu appears on the left in IE 8. I don't have multiple IE installed on this machine to figure out which versions of IE have problems but I am assuming IE 6 & 7. I am sure Dr. CSS can provide you with some code for fixing IE 6 & 7, if not just google CSS IE Hacks, and set it up to force the left alignment.

As far as displaying sub menus go, you might be better to include a separate sub menu in your template. That shows all the sub pages of a section.

To keep the sub menu visible, with your current setup, when a menu item is active it is assigned the class menuactive. The sub menu lists are all assigned the class unli. So you will want to set the visibility to visible of the sub list of the active parent. Something like:

Code: Select all

#primary-nav li.menuactive > ul.unli  {
    /* style the active sub menu list here */
    visibility: visible;
}
#primat

One of the things you will need to figure out is a way to set the active sub list to hidden, when any of the other non-active sub lists are displayed. This could be done with JavaScript but not with pure CSS (http://www.w3.org/TR/CSS2/cover.html).

Look to the CSS Validator to fix some of your other styling problems:
Your Page in the CSS Validator

[Evert B.]

Thanks, I have been trying and trying but I only got so far that I got -almost- whant I want in FF (still subs not remain visible) and IE is a disaster.
Here is FF:

And here is IE:

As far as displaying sub menus go, you might be better to include a separate sub menu in your template. That shows all the sub pages of a section.

Owens, how can I incluse a seperate sub menu in my template, that will only show the subitems (horizontally)? If I position it directly below the main menu it will give sort of the same appearance.
This really i s my last try, otherwise I'll just make it a 'normal' horizonntal menu with vertical subs.

EDIT: I forgot to ask: any idea why my page 1 (Home) is completely on the right, and my last page (Links) is completely on the left?!?

Thanks Nuc

[Owens]

To create the submenu on the page you would use a start_level of 2. You may or may not have to also collapse 1.

{menu template='cssmenu.tpl' start_level='2' collapse='1'}

If you are running v 1.6.5 of CMSMS you will need to do this as well:
http://forum.cmsmadesimple.org/index.php/topic,37147.0.html

As far as you float look to the CSS:

Code: Select all

#primary-nav li {
 float: right;            
 vertical-align: middle;
 padding-right: 7px;
 padding-left: 7px;
}

change that float right to left

[Dr.CSS]

Link goes to a page with a drop down menu...

Put solved in first topic if it is...