citroengras

Top simple navigation + left subnavigation + 1 column

With the Menu Manager you can easily split the navigation in two parts. On this page the top level in the page hierarchy is displayed horizontally and depending on what page is displayed a localized sub-menu is displayed vertically to the left. In this case the sub-menu to the left displays the sub-levels (children) to Default Templates Explained.

The {menu} tag

The {menu} tag is inserted twice in the page template. First where the main navigation is, which should only show the top level. It looks like this: {menu template='Simple Navigation' number_of_levels='1'}.

The sub navigation should only contain the second level and down, depending on what is selected on the first level. Also, the third level links should only display when its parent on the second level is clicked, otherwise they are hidden. That is, the second level is collapsed unless the current page has sub pages.

The tag for the sub navigation looks like this: {menu template='simple_navigation.tpl' start_level='2' collapse='1'}.

Attached style sheets for the menu

As the main navigation and the sub navigation need to be styled differently (one horizontal, the other vertical), two navigation style sheets are attached to this page template. Navigation Simple - Horizontal is for styling the horizontal main menu. Navigation Simple - Vertical on the other hand, contains the style for the sub navigation to the left.

Both using the same Menu Manager template

However, as you could see, both parts of the navigation are using the same menu manager template. That is because the output code is the same. It is only through CSS that the two parts get styled differently.

Floating the sidebar to the right

You can easily float the sidebar with the sub navigation to the right instead. Look in the Layout Top menu + 2 columns style sheet for the float:left; property in the div#sidebar element. Change that to float:right; and the sidebar with the menu will instead be on the right side of the content, of course you will also have to adjust the margins for the sidebar and the div#main, basically just swap the left and right margins.

---