creating menu with 4 levels

[ceci]

Hi,
this is my first time here...please be gentle.

I am trying to create a menu with 4 levels something like the one posted here: http://themes.cmsmadesimple.org/menu_ma ... tions.html. I looked at this  '/cmsMadeSimple/modules/MenuManager/MenuManager.module.php' file...made some changes on some this files but after saving and reloading the page it doesn't do anything.

My guess is that I am editing the wrong file. which file do I need to edit?

thanks

ceci

[RonnyK]

IIRC, isnt there any modification, besides the 'menu stylesheet' required. This is because the default menu-stylesheets attached to the default template, only are styled until the 3d level. Check the template for the {menu}-call, to see if it is set to a certain level and check the attached stylesheet for the menu, to see if 4d level is styled.

Ronny

[ceci]

I am sure someone must have done this already. I just need to add another level to the existing defalt menu. Can someone help?!

Thanks again.

Ceci

[Connie]

well, I did a 4level-menue at my testwebsite

www.webdeerns.de/demos/cmsmadesimple

have a look there.

I just created the pages in 4 levels and added some CSS-definitions in the navigation-vertical-stylesheet:

Code: Select all

/********************
MENU
*********************/
#menu_vert {padding-left: 0;margin-left: 0.9em;}


/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {padding-bottom: 0.5em;}

/* menu li block */
#menu_vert li {list-style: none;margin:0;border:0;display: block;text-indent:0.5em;}

#menu_vert ul ul li {border: none;}

/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; } 
* html #menu_vert li hr { height: 1%; }
/** end fix **/


/* Standard-Ebenen, nicht aktiv, nicht current */

/* Ebene 1   pfeil nach rechts */
div#menu_vert a {
   text-decoration:none;  
   display: block;  
   padding: 0.8em 0.5em 0.8em 1.5em;  
   color: black;  
  background: url(images/cms/pfeil_rechts_rot.gif) no-repeat 0em center;  
   min-height:1em;  
}

/* Ebene 2  */
div#menu_vert ul ul a {
   font-size: 95%;
   padding: 0.5em 0.5em 0.5em 2.8em;
   background-position: 2em center;
 background: url(images/cms/pfeil_rechts_blau.gif) no-repeat 1.5em center;  

}

/* Ebene 3  */
div#menu_vert ul ul ul a {
   font-size: 90%;
   padding: 0.3em 0.5em 0.3em 4.3em;
   background: url(images/cms/pfeil_rechts_gruen.gif) no-repeat 3em center; 
}

/* Ebene 4 */
div#menu_vert ul ul ul ul a {
   font-size: 85%;
   padding: 0.3em 0.5em 0.3em 5.8em;
   background: url(images/cms/pfeil_rechts_tuerkis.gif) no-repeat 4em center; 
}

/* Aktiv */

div#menu_vert a:hover {background-color:#F5F5F5;color:red;}
div#menu_vert a.activeparent:hover {background-color:#F5F5F5;color:red;}

/* active parent, that is the first-level parent of a child page that is the current page */
div#menu_vert li a.activeparent {
   background: url(images/cms/punkt_rot.gif) no-repeat 0.4em center; 
   background-color:white;
   color: #000;
}

div#menu_vert ul ul li a.activeparent {
   background-position: 1.5em center; 
   background-color:white;
   color: #000;
background: url(images/cms/punkt_blau.gif) no-repeat 1.6em center; 
}


div#menu_vert ul ul ul li a.activeparent {
   background-position: 1.5em center; 
   background-color:white;
   color: #000;
background: url(images/cms/punkt_gruen.gif) no-repeat 3em center; 
}

div#menu_vert ul ul ul ul li a.activeparent {
   background-position: 1.5em center; 
   background-color:white;
   color: #000;
background: url(images/cms/punkt_tuerkis.gif) no-repeat 4em center; 
}

/* 
current pages in the default Menu Manager  template are unclickable. This is for current page on first level 
*/


div#menu_vert ul h3 {
   background: url(images/cms/pfeil_rechts_rot.gif) no-repeat 0em center;
   background-color: white;
   display: block; 
   padding: 0.8em 0.5em 0.8em 1.5em;   
   color:#000;                                 
   font-size: 1em;font-weight:120%;                       
   margin: 0;                                  
}


div#menu_vert ul ul h3 {
   font-size: 90%;
   padding: 0.3em 0.5em 0.3em 2.8em;
   background-position: 1.0em center;
   background-color: white;
   border-bottom: none;
   color: #000;    
background: url(images/cms/punkt_blau.gif) no-repeat 1.7em center;  
}

div#menu_vert ul ul ul h3 {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/punkt_gruen.gif) no-repeat 3em center; 
}


div#menu_vert ul ul ul ul h3 {
   padding: 0.3em 0.5em 0.3em 5.8em;
background: url(images/cms/punkt_tuerkis.gif) no-repeat 4.1em center; 
}

maybe that helps

[RonnyK]

When I look at http://www.webdeerns.de/demos/cmsmadesi ... asien.html it shows 4 levels menu...

What is exactly what is missing then?

Ronny

[Connie]

I don't miss anything, I gave an example, the question is here:

Hi,
this is my first time here...please be gentle.

I am trying to create a menu with 4 levels something like the one posted here: http://themes.cmsmadesimple.org/menu_ma ... tions.html. I looked at this  '/cmsMadeSimple/modules/MenuManager/MenuManager.module.php' file...made some changes on some this files but after saving and reloading the page it doesn't do anything.

My guess is that I am editing the wrong file. which file do I need to edit?

thanks

ceci

[RonnyK]

The link you point at, is for having multiple instances of {menu} in the template, it has nothing to do with multiple levels of menus.

I still dont see, what you are trying to achieve....

Sorry,

Ronny

[ceci]

Ok maybe i was not explaining well.

Here is my problem. see attached image. How can I achieve this?

Is the 'simple_navigation.tpl'  the file that controls the menu?

--------- cmsMadeSimple/modules/MenuManager/templates/simple_navigation.tpl -------------
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for
each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just
like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}

{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->current == true}
Current page is {$node->hierarchy}: {$nod
e->menutext}

{elseif $node->parent == true}
url}"{if $node->a
ccesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} ta
bindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->t
itleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accessk
ey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->
titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != '
'} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

{/if}

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

{/if}

-------

thank you for trying to help.

[RonnyK]

And that page is hanging below the mentioned parent, could you show the listing of the content-pages with the mentioned page in...

And the template attached to the pages.

Ronny

[ceci]

Ronny. I am not sure if I understand your question but this this is what the entire menu looks like. See attached image. Here,HPLC  is supposed to be the parent of ' » »Tipranavir' and therefore indented.

I am using the

"Left simple navigation + 1 column
This template has the menu in left sidebar. The menu is using the Simple Navigation menu template."

The template i am using is

simple_navigation.tpl

code on previous post.

Does it help? If not, how do I get what you are looking for?

thanks

[Dr.CSS]

The menu template just reads the page structure from Content > Pages it has nothing to do with anything else...

To get a page to be a child you open or create it and in the drop that says Parent: you select the page you want it to be under (parent), if you are having trouble with the way it looks or how and when it shows up, as in drop down/flyout menus, you need to change the CSS/style sheet attached to the page template...

The only time you need to change the menu template is if you need some special call in them such as adding a special ID call or class call for styling...

[ceci]

oops...my bet I think I am talking about being able to indent  the 5th level. Sorry if I have confused you you.



Essentially  with the 5th(4th?) level it should look something like this:

Code: Select all

*Research Groups (1)
      * Core Analaytical Laboratory (2)
                 *Methodologies (3)
                           *HPLC (4)
                                  *Tipranavir (4a)
                                  * option (4b)
                                  * option (4c)

Does it makes sense? The previous post had something similar but his css is very different than mine and I can't use it.
http://www.webdeerns.de/demos/cmsmadesi ... asien.html

I believe this file below is the CSS that is attached to the template. I grab it from
Layout » Stylesheets » Edit Stylesheet: Layout: Left sidebar + 1 column

Code: Select all

/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link 
a:active {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #18507C; 
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   background-color: #C3D4DF;
   color: #385C72;
}

/*****************
basic layout 
*****************/
body {
   background-color: #ccc;
   color: #333;
   margin:1em;    /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;       /* this centers wrapper */
   max-width: 80em;   /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background-color: #fff;;
   color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 80px;    /* adjust according your image size */
   background: #385C72;           
}

div#header h1 a {
/* you can set your own image here  background: #336799 url(images/cms/logo1.gif) no-repeat 0 12px;  */
   background: #385C72 url(images/cms/logo1.gif) no-repeat 0 2px; /*was 12px not 2px*/
   display: block;
   height: 80px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

/* position for the search box */
div#search {
   float: right;
   width: 27em;    /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
}

div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;        /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em;        /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
}

 div.breadcrumbs span.lastitem { 
   font-weight:bold; 
 } 

 div#content {
   margin: 1.5em auto 2em 0;   /* some air above and under menu and content */
}


div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

div#footer {
   clear: both;       /* keep footer below content and menu */
   color: #fff;
   background-color: #385C72; /* same bg color as in header */
}

div#footer p {
   font-size: 0.8em;
   padding: 1.5em;       /* some air for footer */
   text-align: center;  /* centered text */
   margin: 0;
}

div#footer p a {
   color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   padding: 1em;
   border-bottom: 1px dotted black;
   margin: 1em;
}

/* relational links under content */
div.left49 {
  width: 49%; /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}




/********************
CONTENT STYLING
*********************/
div#content {

}


/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
}

blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 font-family: "Courier New", Courier, monospace;
 font-size: 1em;
}

pre {
   border: 1px solid #000;  /* black border for pre blocks */
   background-color: #ddd;
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;


}

/* Separating the divs on the template explanation page, with some bottom-border */
div.templatecode {
  margin: 0 0 2.5em;
}

/* END TEXT */

/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
   font-size: 1.0em;
   line-height: 1.4em;
   margin: 0 0 1.5em 0;
}

div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 3em;
}

/* definition lists topics on bold */
div#main dl dt {
   font-weight: bold;
   margin: 0 0 0 1em;
}
div#main dl dd {
   margin: 0 0 1em 1em;
}

div#main dl {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #c0c0c0;
}


/* END LISTS */

[Nullig]

What you need to do is to edit the pages to change their parents.

Open the Core Analaytical Laboratory page and change it's parent to Research Groups.
Open the Methodologies page and change it's parent to Core Analaytical Laboratory.
Open the HPLC page and change it's parent to Methodologies.
Open the Tipranavir page and change it's parent to HPLC

Your page hierarchyin the admin panel should then look like:

*Research Groups (1)
      * Core Analaytical Laboratory (1.1)
                *Methodologies (1.1.1)
                          *HPLC (1.1.1.1)
                                  *Tipranavir (1.1.1.1.1)

Nullig

[ceci]

I did exactly what you suggested. so here is the final outcome and hopefully it explains my problem.

[Nullig]

Have you attached the "Navigation: Simple - Vertical" stylesheet?
Can you post a link to the site?

Nullig