Menu Manager: Creating vertical columns that expand horizontally

[deptforder]

Hello there, newby alert! 

I am running CMS Made Simple v1.3.1 using XAMPP for Windows 1.6.7 on WinXP Home

I'm experienced writing HTML/CSS but this is my first go at a CMS/PHP and I'm having trouble understanding Menu manager. I need to create 3 vertical columns that expand across horizontally. I've attached a screenshot showing how I'd like the menu to work...



I've gone round in circles trying to do this by styling lists using CSS but still can't achieve the above effect.

The template currently references a preinstalled 'minimal_menu.tpl'...

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.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}
url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{elseif $node->parent == true && $node->depth == 1}
url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

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

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


{else}
url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{/if}

{/foreach}

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

{/if}

I have edited the menu CSS to this..

/********************
MENU
*********************/
#menu_vert {
   padding-left: 0;
   margin-left: 56px;
   font-size: 11px;
}


/* 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;
   display: block;
}

#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 **/

/* first level links */
div#menu_vert a {
   text-decoration:none; /* no underline for links */
   display: block; /* IE has problems with this, fixed above */
   padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
   color: #333333; /* this will be link color for all levels */
   min-height:1em; /* Fixes IE7 whitespace bug */
}

/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
   font-size: 100%;
   padding: 0.5em 0.5em 0.5em 2.8em;
}

/* third level links, more padding */
div#menu_vert ul ul ul a {
   padding: 0.3em 0.5em 0.3em 4.3em;
}

/* hover state for all links */
div#menu_vert a:hover {
   background-color: #ec008c;
}
div#menu_vert a.activeparent:hover {
   background-color: #ec008c;
   color: #18507C;
}

/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
   background-color: #385C72;
   color: #fff;
}

div#menu_vert ul ul li a.activeparent {
   background-color: transparent;
   color: #18507C;
}


/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
   background-color: #385C72;
   display: block;
   padding: 0.8em 0.5em 0.8em 1.5em;  /* some air for it */
   color: #fff;                                 /* this will be link color for all levels */
   font-size: 1em;                           /* instead of the normal font size for */
   margin: 0;                                  /* as normally has some margin by default */
}

/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
   font-size: 90%;
   padding: 0.3em 0.5em 0.3em 2.8em;
   background-position: 1.4em center;
   background-color: transparent;
   border-bottom: none;
   color: #000;     
}

/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
   padding: 0.3em 0.5em 0.3em 4.3em;
}

/* section header */
div#menu_vert li.sectionheader {
   border-right: none;
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0;
   background-color: #fff;
   line-height: 1em;
   margin: 0;
   text-align:center;
}



/* separator */
div#menu_vert li.separator {
   height: 1px !important;
   margin-top: -1px;
   margin-bottom: 0;
   padding:2px 0 2px 0;
   background-color: #000;
   overflow:hidden !important;
   line-height:1px !important;
   font-size:1px; /* for ie */
}

div#menu_vert li.separator hr {
   display: none; /* this is for accessibility */
}

Can this be achieved purely through CSS? Or does the functional (minimal_menu.tpl) code need adjusting? And if so, how?

Any help gratefully received!

Katie

[RonnyK]

Check the default template, "CSSMenu left + 1 column", that has such a logic....

Ronny

[deptforder]

Hi Ronny,

I'm looking at the template "CSSMenu left + 1 column" which references "Layout: Left sidebar + 1 column" and "Navigation: Simple - Vertical" for styling (I think that's correct?)

But I must be being daft because I can't work out how to tweek the logic so a new level opens on the right-hand side of the previous, not underneath...

Also, if changes are saved over defaults is there somewhere I can find the default code?

Katie.

[RonnyK]

When you select that template for a given page, view that page and see how the menu acts....

I think that that is what you asked, otherwise might I misunderstand the question...

Ronny

[deptforder]

Sorry, to clarify - I don't understand which code needs to be changed in order to achieve the menu effect.

Here's the CSS for "Navigation: Simple - Vertical" which opens each new level as a list underneath the parent... but I need each new level to open adjacent to the parent, not below.

/********************
MENU
*********************/
#menu_vert {
   padding-left: 0;
   margin-left: 56px;
   font-size: 11px;
   line-height:17px;
}


/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
}

/* menu li block */
#menu_vert li {
   list-style: none;
   margin: 0;
   display: block;
}

#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 **/

/* first level links */
div#menu_vert a {
   text-decoration:none; /* no underline for links */
   display: block; /* IE has problems with this, fixed above */
   color: #333333; /* this will be link color for all levels */
   min-height:1em; /* Fixes IE7 whitespace bug */
}

/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
   font-size: 100%;
   padding: 0 0 0 2.8em;
}

/* third level links, more padding */
div#menu_vert ul ul ul a {
   padding: 0 0 0 4.3em;
}

/* hover state for all links */
div#menu_vert a:hover {
   background-color: #ec008c;
}
div#menu_vert a.activeparent:hover {
   background-color: #ec008c;
   color: #18507C;
}

/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
   background-color: #FFF;
   color: #EC008C;
}

div#menu_vert ul ul li a.activeparent {
   background-color: transparent;
   color: #18507C;
}


/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
   background-color: transparent;
   display: block;
   color: #EC008C;                                 /* this will be link color for all levels */
   font-size: 11px;                           /* instead of the normal font size for */
   margin: 0;                                  /* as normally has some margin by default */
}

/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
   font-size: 11px;
   background-position: 1.4em center;
   background-color: transparent;
   color: #333;     
}

/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
}

/* section header */
div#menu_vert li.sectionheader {
   background-color: #fff;
   line-height: 1em;
   margin: 0;
   text-align:center;
}



/* separator */
div#menu_vert li.separator {
   height: 1px !important;
   margin-top: -1px;
   margin-bottom: 0;
   padding:2px 0 2px 0;
   background-color: #000;
   overflow:hidden !important;
   line-height:1px !important;
   font-size:1px; /* for ie */
}

div#menu_vert li.separator hr {
   display: none; /* this is for accessibility */
}

Any ideas how to edit this for adjacent positioning?

Thanks,

Katie.

[RonnyK]

Katie,

check http://demo.krijt.eu/index.php?page=katie that page uses the mentioned template. Isnt that what you asked?

Ronny

[deptforder]

Thanks Ronny,

Yes, looked at that one... but the menu doesn't need to be a dynamic flyout menu, it's more like "Left simple navigation + 1 column" in that second level would only show after clicking, not on rollover. Each first level item has it's own landing page.

Also, the second level items should be vertically positioned same as level 1 (so it looks exactly as shown on the screenshot).

I've reverted back to "Left simple navigation + 1 column" and the problem I'm having is how to move the second level 'up' the page to be perfectly horizontally aligned with first level.

I appreciate all your help,

Katie.

[christiaans]

This would be very easy to achieve, and most likely, the following will already make it work:

First, make sure you call you menu with the attribute "collapse=1", so something like: {menu collapse='1' template='my-template-name'}

Then, let's make this template (my-template-name):

We always start with:

{if $count > 0}

{foreach from=$nodelist item=node}

As you want all the elements with a depth of 1 on the left we add:

{if $node->depth == 1}
url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

Now we want to display the subpages of the main level page you clicked on:

{elseif $node->depth == 2}
url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

Now, for the third level it depends, on whether you want it to display when being on the MAIN level, or being on the SUB level, so I'll leave that for you to decide .

Finish the template off with:

{/if}
{/foreach}

{/if}

And you should have something like:

Code: Select all

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}

{if $node->depth == 1} 
<li class="main-item"><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a></li>

{elseif $node->depth == 2}
<li class="sub-item"><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a></li>

{/if}
{/foreach}
</ul>
{/if}

As you can see, it requires the least bit of coding, and should work .