Top simple navigation + left subnavigation + 1 column

Le gabarit : 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 {Navigator}

La balise {Navigator} est donc insérée deux fois dans le gabarit de cette page. Une première fois pour les menus de niveau 1, comme ceci : {Navigator 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 :{Navigator 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.


Page précédente : Left simple navigation + 1 column
Page suivante : CSSMenu top + 2 columns