Avoir une barre de navigation verticale

par Matriochka Lun 8 Juil 2013 - 10:24

Avoir une barre de navigation verticale

	Avant toute modification, assurez-vous que votre forum respecte les conditions suivantes : - Vous devez être le fondateur du forum pour avoir accès aux templates de celui-ci ; - Votre forum doit être en version PhpBB2.

Le tutoriel qui suit vous permettra d’obtenir une barre de navigation verticale sur votre forum Forumactif.

Voir illustration :

Modification du template overall_header

On place la variable qui génère la barre de navigation dans une div à laquelle on donne la class vertical_nav, afin de pouvoir la modifier depuis la feuille de styles CSS par la suite.

Une fois la modification faite, enregistrez-la puis publiez le template en cliquant sur le "Plus" vert dans le listing des templates.

Panneau d'administration  Affichage  Templates  Général, overall_header

Editez le template overall_header en cliquant sur la roue crantée ;
Recherchez la partie (CTRL + F) :

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>
Remplacez-la par :

Code:
<div class="vertical_nav">{GENERATED_NAV_BAR}</div>

N’oubliez pas de publier le template en cliquant sur Ajout

.

Modification de la feuille de styles CSS

Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS)

Collez le code suivant :

Code:: div.vertical_nav { position:absolute; top:50px; left:5%;} div.vertical_nav a.mainmenu { display:list-item; list-style:none;}

position:absolute : nous permet de placer l’ensemble de la barre de navigation comme un élément flottant. Si vous désirez que le bloc suive le défilement de la page, vous devez remplacer position:absolute; par position:fixed; ;
top:50px : nous permet de positionner notre bloc à 50 pixels du haut de la page ;
left:5% : nous permet de positionner notre bloc à 5% de la gauche de la page.
display:list-item : nous permet d’afficher les liens de la barre de navigation comme une liste de haut en bas ;
list-style:none : nous permet de supprimer le style initialement attribué aux listes (les puces : •).

Si vous désirez encadrer votre bloc comme sur la démonstration plus haut, pour cela rien de plus simple, il vous suffit d’ajouter du style sur l’élément div.vertical_nav :

background:#FFFFFF; : nous permet de coloriser le fond du bloc en blanc ;
border:1px solid #D0D0D0; : nous permet d’ajouter une bordure pleine, d’un pixel d’épaisseur et de couleur grise.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder vos modifications.