Horizontal menu and vertical menu but with different items both.

midiweb · Post by **midiweb** » Thu Feb 21, 2008 1:55 am

Hello, I'm not an english native but I try to express my problem. I've been looking for a template that allows to display a horizontal menu(at the top) and at the same time a vertical menu (on the left side)but the items have to be different.
I cannot find such templates or what I have to change in the default template.
Can anyone help me please?

Thanks

nivekiam · Post by **nivekiam** » Thu Feb 21, 2008 4:42 am

Take a look at the Menu Manager help for more info, but you can specify which items go in which menus:

{menu template="horizontal_menu" items="home,contactus,aboutus"}

{menu template="vertical_menu" items="products,support,quick_links"}

The items you specify should be the page alias.

midiweb · Post by **midiweb** » Sat Feb 23, 2008 12:21 am

I took a look at it but I don't know what to change.
I use the template "Sinorca 2"
Here's the template code:

Code: Select all


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
  <head>
{metadata}
{stylesheet}
    <title>{sitename} - {title}</title>
  </head>

  </__body>
    <!-- For non-visual user agents: -->
      <div id="top"><a href="#main-copy" class="doNotDisplay doNotPrint">Skip to main content.</a></div>

    <!-- ##### Header ##### -->

    <div id="header">
      <div class="superHeader">
        <div class="left">
          <span class="doNotDisplay">Related sites:</span>
          {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
        </div>
        <div class="right">
          <span class="doNotDisplay">More related sites:</span>
        {cms_module module='menumanager' template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1' start_level='2'}
        </div>
      </div>

      <div class="midHeader">
        <h1 class="headerTitle">{title}</h1>
      </div>

      <div class="subHeader">
        <span class="doNotDisplay">Navigation:</span>
        {cms_module module='menumanager' template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1'}
      </div>
    </div>

    <!-- ##### Side Bar ##### -->

    <div id="side-bar">
      <div>
        <p class="sideBarTitle">Navigation</p>
       {cms_module module='menumanager' template='Sinorca_2.0 : Sinorca sidemenu'   collapse='1'}
      </div>

      <div class="lighterBackground">
      <!-- Start News -->
        <p class="sideBarTitle">News</p>
        <div class="sideBarText">
          {news number='3' detailpage='news'}
        </div>
      <!-- End News -->
      </div>
    
      <div>
        <p class="sideBarTitle">Validation</p>
        <span class="sideBarText">
          <span class="titleTip" title="check the well-formedness">Validate</span> the <a href="http://validator.w3.org/check/referer">XHTML</a> and
          <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> of this page.
        </span>
      </div>
    </div>

    <!-- ##### Main Copy ##### -->

    <div id="main-copy">
      {content}
    </div>
    
    <!-- ##### Footer ##### -->

    <div id="footer">
      <div class="left">
           <p>{cms_selflink dir="previous" label="Previous page: "} <br />
            {cms_selflink dir="next"}</p>
       </div>

      <br class="doNotDisplay doNotPrint" />

      <div class="right">
        This design is (almost) public domain.<br />
        {anchor anchor='top' text='^ Top'}
      </div>
    </div>
  <__body>
</__html>

here's the CSS:

Code: Select all

/*************************************
 * TITLE: Sinorca Screen Stylesheet  *
 * URI  : sinorca/sinorca-screen.css *
 * MODIF: 2003-Apr-30 19:31 +0800    *
 *************************************/


/* ##### Common Styles ##### */

body {
  color: black;
  background-color: rgb(240,240,240);
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 71%;  /* Enables font size scaling in MSIE */
  margin: 0;
  padding: 0;
}

html > body {
  font-size: 8.5pt;
}

acronym, .titleTip {
  border-bottom: 1px dotted rgb(153,153,153);
  cursor: help;
  margin: 0;
  padding: 0 0 0.4px 0;
}

.doNotDisplay {
  display: none;
}

.smallCaps {
  font-size: 110%;
  font-variant: small-caps;
}


/* ##### Header ##### */

.superHeader {
  color: white;
  background-color: rgb(100,135,220);
  height: 2em;
}

.superHeader a {
  color: white;
  background-color: transparent;
  text-decoration: none;
  font-size: 91%;
  margin: 0;
  padding: 0 0.5ex 0 0.25ex;
}

.superHeader a:hover {
  text-decoration: underline;
}

.superHeader .left {
  position: absolute;
  left: 1.5mm;
  top: 0.75ex;
}

.superHeader .right {
  position: absolute;
  right: 1.5mm;
  top: 0.75ex;
}

.midHeader {
  color: rgb(39,78,144);
  background-color: rgb(140,170,230);
}

.headerTitle {
  font-size: 337%;
  font-weight: normal;
  margin: 0 0 0 4mm;
  padding: 0.25ex 0;
}

.subHeader {
  color: white;
  background-color: rgb(0,51,153);
  margin: 0;
  padding: 1ex 1ex 1ex 1.5mm;
}

.subHeader a {
  color: white;
  background-color: transparent;
  text-decoration: none;
  font-weight: bold;
  margin: 0;
  padding: 0 0.75ex 0 0.5ex;
}  

.subHeader a:hover {
  text-decoration: underline;
}

.superHeader .highlight, .subHeader .highlight {
  color: rgb(253,160,91);
  background-color: transparent;
}


/* ##### Side Bar ##### */

#side-bar {
  width: 15em;
  float: left;
  clear: left;
  border-right: 1px solid rgb(153,153,153);
}

#side-bar div {
  border-bottom: 1px solid rgb(153,153,153);
}

.sideBarTitle {
  font-weight: bold;
  margin: 0 0 0.5em 2.5mm;
  padding: 1em 0 0 0;
}

#side-bar ul {
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0 0 .5em 0;
}

#side-bar li {
  margin: 0;
  padding: 0.1ex 0;  /* Circumvents a rendering bug (?) in MSIE 6.0 */
}

#side-bar a, .thisPage {
  color: rgb(0,102,204);
  background-color: transparent;
  text-decoration: none;
  margin: 0;
  padding: 0.75em 1ex 0.75em 5mm;
  display: block;
}

.thisPage {
  color: black;
  background-color: white;
  padding-left: 4mm;
  border-top: 1px solid rgb(153,153,153);
  border-bottom: 1px solid rgb(153,153,153);
}

#side-bar a:hover {
  color: white;
  background-color: rgb(100,135,220);
  text-decoration: none;
}

.sideBarText {
  line-height: 1.5em;
  margin: 0 0 1em 0;
  padding: 0 1.5ex 0 2.5mm;
  display: block;
}

#side-bar .sideBarText a {
  text-decoration: underline;
  margin: 0;
  padding: 0;
  display: inline;
}

#side-bar .sideBarText a:hover {
  color: rgb(0,102,204);
  background-color: transparent;
  text-decoration: none;
}

.lighterBackground {
  color: inherit;
  background-color: white;
}


/* ##### Main Copy ##### */

#main-copy {
  color: black;
  background-color: white;
  text-align: justify;
  line-height: 1.5em;
  margin: 0 0 0 15em;
  padding: 0.5mm 5mm 5mm 5mm;
  border-left: 1px solid rgb(153,153,153);
}

#main-copy p {
  margin: 1em 1ex 2em 1ex;
  padding: 0;
}

#main-copy a {
  color: rgb(0,102,204);
  background-color: transparent;
  text-decoration: underline;
}

#main-copy a:hover {
  text-decoration: none;
}

#main-copy h1 {
  color: white;
  background-color: rgb(100,135,220);
  font-size: 100%;
  font-weight: bold;
  margin: 3em 0 0 0;
  padding: 0.5ex 0 0.5ex 1ex;
}

#main-copy .topOfPage {
  color: white;
  background-color: transparent;
  font-size: 91%;
  font-weight: bold;
  text-decoration: none;
  margin: 2.5ex 1ex 0 0;  /* For MSIE */
  padding: 0;
  float: right;
}

#main-copy > .topOfPage {
  margin: 2.75ex 1ex 0 0;  /* For fully standards-compliant user agents */
}

dl {
  margin: 1em 1ex 2em 1ex;
  padding: 0;
}

dt {
  font-weight: bold;
  margin: 0 0 0 0;
  padding: 0;
}

dd {
  margin: 0 0 2em 2em;
  padding: 0;
}


/* ##### Footer ##### */

#footer {
  color: white;
  background-color: rgb(100,135,220);
  font-size: 91%;
  margin: 0;
  padding: 1em 2.5mm 2.5ex 2.5mm;
  clear: both;
}

#footer .left {
  line-height: 1.45em;
  float: left;
  clear: left;
}

#footer .right {
  text-align: right;
  line-height: 1.45em;
}

#footer a {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

#footer a:hover {
  text-decoration: none;
}

Here's the side menu in Menu Manager

Code: Select all


{* 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}
<ul class="clearfix">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><span class="thisPage">» {$node->menutext}</span>

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

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> › {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

here's the top menu

Code: Select all

{if $count > 0}| 
{foreach from=$nodelist item=node}
<a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}{if $node->current == true} class="highlight"{/if}>{$node->menutext}</a> |
{/foreach}
{/if}


{if $node->current == true}
<li><span class="thisPage">» {$node->menutext}</span>

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

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> › {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

I'm newbie and read all the documentation but I've only this snag with the layout.
To resume: I want one horizontal top menu whose content and items are different fron side menu
Thanks for help

bye

nivekiam · Post by **nivekiam** » Sat Feb 23, 2008 12:32 am

This is what you want to modify:

Code: Select all

{cms_module module='menumanager' template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1' start_level='2'}

Just add in the menu items you want in the horizontal or vertical menus

Code: Select all

{cms_module module='menumanager' template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1' start_level='2' items="home,contactus,aboutus"}

The {menu} tag is a wrapper for {cms_module module='menumanager'} and I'd probably switch to using that instead of what you're currently using for future updates.

midiweb · Post by **midiweb** » Sat Feb 23, 2008 5:12 pm

sorry but I don't really understand what to do with these tags, and for instance this:
Common tags used in CMS Made Simple templates

Code: Select all

These are the most common tags to use as placeholders in a template:

    * {sitename} - will add the sitename you can set in the Global Settings
    * {title} - will be replaced by the title of the content (You can set title when creating content pages).
    * {stylesheet} - This must be between the <head> tags. It links all the stylesheets that you have attached to your template. If you forget this your page will appear without styles. If you rather want to use external stylesheets you can add a normal <link/> tag in the header.
    * {metadata} - will add the meta datas you can set in the Global Settings
    * {content} - This will be replaced by the real content of the selected page, the content that you edit for each page in Content -> Pages.
    * {breadcrumbs} - Will be replaced by a path to the selected content.
    * {menu} - This is one of the most common menus. The entire menu will be automatically generated from your pages, where you put this placeholder. This tag can also take parameters, depending on how you want to display the menu. For example {menu collapse='1'} to collapse the sub items in the menu, so that only the sub items of the current menu item are shown.

what I have to insert in the ccurly brackets?
Sth escapes me in this explanation.

bye

nivekiam · Post by **nivekiam** » Sat Feb 23, 2008 6:22 pm

Scroll all the way to the right, the code boxes below to see all code

Your code:

Code: Select all

{cms_module module='menumanager' template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1' start_level='2' items="home,contactus,aboutus"}

The menu tag code:

Code: Select all

{menu template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1' start_level='2' tems="home,contactus,aboutus"}

For those other tags, go to Extensions > Tags and see and click on them see read more about them and their options. There is a large help file for the menu tag in the Menu Manager.

Dr.CSS · Post by **Dr.CSS** » Sat Feb 23, 2008 11:31 pm

Follow the BOLDED words below for Module/Tag help files... \/...

midiweb · Post by **midiweb** » Mon Feb 25, 2008 8:38 pm

On the top horizontal menu I want (from german translated):

Home - Impressum -Contact - Sitemap

On the left side menu:

Profil - Change Management - Project Coaching - Management Training - Customers - Change Tools

the top menu is independant of the side menu namely when I click of one item on the top, the menu left must stay unchanged and so on for each item.

The content is displayed in the middle of the window, with on the top the title of the page.

have I to do this:

Code: Select all


{cms_module module='menumanager' template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1' start_level='2' items="home,impressum,contact,sitemap"}

Code: Select all

{menu template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1' start_level='2' items="home,impressum,contact,sitemap""}

and for the side menu?

where is exactly the module or the part of the template to change?

i'm lost

The template doesn't matter actually a lot now but the principle of the template self. So you can advice me another template with such menus.

thanks for help

nivekiam · Post by **nivekiam** » Mon Feb 25, 2008 9:06 pm

You just put that in your template where you want the menu. For example in the template you posted above:

More related sites:
{menu template='Sinorca_2.0 : Sinorca topmenu' number_of_levels='1' start_level='2'}

{title}

Navigation:
{menu template='Sinorca_2.0 : Sinorca topmenu' number_of_levels='1' start_level='2' items="home,impressum,contact,sitemap""}

Dr.CSS · Post by **Dr.CSS** » Mon Feb 25, 2008 11:55 pm

If you use the "items=" call in your menu you don't need any other calls as in 'number_of_levels='1' start_level='2''...

It will only show the items you call, using the page alias...

sportman · Post by **sportman** » Wed Feb 27, 2008 5:53 am

I have always wondered how to do this, this is pretty sweet

/me bookmarks

CMS Made Simple Forums

Horizontal menu and vertical menu but with different items both.

Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.

Re: Horizontal menu and vertical menu but with different items both.