Horizontal menu and vertical menu but with different items both.
Horizontal menu and vertical menu but with different items both.
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
I cannot find such templates or what I have to change in the default template.
Can anyone help me please?
Thanks
Last edited by midiweb on Sat Mar 01, 2008 10:50 pm, edited 1 time in total.
Re: Horizontal menu and vertical menu but with different items both.
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.
{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.
Re: Horizontal menu and vertical menu but with different items both.
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:
here's the CSS:
Here's the side menu in Menu Manager
here's the top menu
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
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>
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;
}
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}
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
Last edited by midiweb on Sat Feb 23, 2008 12:34 am, edited 1 time in total.
Re: Horizontal menu and vertical menu but with different items both.
This is what you want to modify:
Just add in the menu items you want in the horizontal or vertical menus
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.
Code: Select all
{cms_module module='menumanager' template='Sinorca_2.0 : Sinorca topmenu' number_of_levels='1' start_level='2'}
Code: Select all
{cms_module module='menumanager' template='Sinorca_2.0 : Sinorca topmenu' number_of_levels='1' start_level='2' items="home,contactus,aboutus"}
Re: Horizontal menu and vertical menu but with different items both.
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
what I have to insert in the ccurly brackets?
Sth escapes me in this explanation.
bye
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.
Sth escapes me in this explanation.
bye
Re: Horizontal menu and vertical menu but with different items both.
Scroll all the way to the right, the code boxes below to see all code
Your code:
The menu tag code:
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.
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"}
Code: Select all
{menu template='Sinorca_2.0 : Sinorca topmenu' number_of_levels='1' start_level='2' tems="home,contactus,aboutus"}
Re: Horizontal menu and vertical menu but with different items both.
Follow the BOLDED words below for Module/Tag help files... \/...
Re: Horizontal menu and vertical menu but with different items both.
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:
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
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""}
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
Last edited by midiweb on Mon Feb 25, 2008 8:41 pm, edited 1 time in total.
Re: Horizontal menu and vertical menu but with different items both.
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""}
Re: Horizontal menu and vertical menu but with different items both.
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...
It will only show the items you call, using the page alias...
Re: Horizontal menu and vertical menu but with different items both.
I have always wondered how to do this, this is pretty sweet
/me bookmarks
