Menu haut et sous menu gauche 1 colonne

Avec le gestionnaire de menu vous pouvez facilement séparer la navigation en deux partie. Sur cette page le niveau supérieur (menu de niveau 1) de votre arborescence de page est affiché dans des onglets horizontaux. Et sur la partie gauche, les sous menus sont affichés verticalement..

La balise {menu}

La balise {menu} est donc inséréedeux fois dans le gabarit de cette page. Une première fois pour les menu de niveau 1, comme ceci : {menu template='simple navigation' number_of_levels='1'}.

La navigation à gauche devrait seulement contenir le deuxième niveau et les niveau inférieurs, selon ce qui est choisi au premier niveau. Et, les liens de troisième niveau devraient seulement être visible quand son parent au deuxième niveau est cliqué, autrement ils sont cachés.

La balise ressemble alors à ceci :{menu template='simple navigation' start_level='2' collapse='1'}. 

Feuille de style pour le menu

Puisque la navigation principale (haut) et la navigation secondaire (gauche) sont présentées différemment (une horizontale, l'autre verticale), deux feuille de style de navigation sont attachés au gabarits de cette page. Navigation: Simple - Horizontal pour le menu horizontal en haut. Navigation: Simple - Vertical pour les sous menus à gauche.

Tous les deux utilisent le même gabarit de menu

Cependant vous pouvez remarquer que les deux menus utilisent le même gabarit de menu, car le moteur de rendu est le même. La différence se fait grâce au CSS dans la feuille de style.

La barre latérale à droite

Vous pouvez facilement placer la barre latérale de navigation à droite. Regarder le Menu haut déroulant 2 colonnes la feuille de style contient la propriété float:left; dans l'élémént div#sidebar. Changé en float:right; et la barre latérale avec le menu changer de position, naturellement vous pouvez aussi ajuster les marges et le div#main.