How to achieve a horizontal and vertical menu on same page

[Wishbone]

I'm not sure if there is an easier way, but can be done if you know a bit of smarty.

Say you have the first 4 menu items across the top, and the rest on the side. You can have two {menu} calls placed in your template at both menu locations. Each one will be a different template. The horizontal menu template can be coded to only process the first 4 first-level menu items and ignore the rest. The vertical menu template can be coded to ignore the first 4 first-level menu items and process the rest.

If you need to add a new horizontal menu items, then you need to update your template and change the 4 to a 5. There might be an easier or more proper way, but this is the first thing that came to mind.

[kurashiki_ben]

Hi,

I have a horizontal and vertical menu running, though h-menu displays first level and v-menu displays sub-menus.
(NCleanBlue template)

h-menu code:

Code: Select all

{* Start Navigation, style sheet  "Layout: NCleanBlue", starting at Menu  ROOT *}
          <h2 class="accessibility util-clearb">Navigation</h2>
{* anything class="accessibility" is hidden for visual browsers by CSS *}
          <div class="page-menu util-clearfix">
          {menu template='cssmenu_ulshadow.tpl' start_level='1' number_of_levels='1''}
          </div>
          <hr class="accessibility util-clearb" />
{* End Navigation *}

v-menu code

Code: Select all

{* Start left side *}
          <div id="left" class="core-float-left">

{* Start Sub Navigation, stylesheet  "Navigation: Simple - Vertical" *}
<div id="subnav">
<h2 class="sbar-title">Menu</h2>
<div id="menu_vert">
<h2 class="accessibility">Sub Navigation</h2>
{menu template='simple_navigation.tpl' start_level='2' collapse='1'}                  
<hr class="accessibility" />
</div>
</div>
{* End Sub Navigation *}
            <span class="sbar-bottom"> </span> 
          </div>
{* End left side *}

If you want both to show only level one, then change the second menu call to:

Code: Select all

{menu template='simple_navigation.tpl' start_level='1' number_of_levels='1' collapse='1'} 

Also, make sure that you have the css for the simple_navigation.tpl in your stylesheet otherwise the menu won't come our correctly. (I copied the menu_vert style from the ngrey template).

[kurashiki_ben]

what do you mean by independent page?
If it is an internal cms page, then the solution should work as is.
If it is an external page then you can use the "external link" content type for your level one menu items and link them to the page you want. Then apply the two menu calls to your template.

More on menus at
http://wiki.cmsmadesimple.org/index.php ... nu_Manager

[Wishbone]

what do you mean by independent page?

He means that the horizontal and vertical menus are separate.. Different menu items pointing to different pages.

[Dr.CSS]

Please to look at menu manager Help to see the different parameters it takes...

[Wishbone]

Please to look at menu manager Help to see the different parameters it takes...

It looks like you could use the "items" parameter to tell which items go to which menu.

Code: Select all

(optional) items="contact,home" - Use this item to select a list of pages that this menu should display. The value should be a list of page aliases separated with commas.

I don't know, but am assuming that it will process submenu items as well. If you use this, then you have to update the template whenever you post a new page.

Or you could use the "extra1" page parameter to flag which menu the item goes to.. However, it seems that this would complicate the menu template a bit, plus add to the SQL server load.

Code: Select all

(optional) items="contact,home" - Use this item to select a list of pages that this menu should display. The value should be a list of page aliases separated with commas.

(optional) loadprops="0" - Use this parameter when using advanced properties in your menu manager template. This parameeter will force the loading of all content properties for each node (such as extra1, image, thumbnail, etc). and will dramatically increase the number of queries required to build a menu, and increase memory requirements, but will allow for much more advanced menus