Avoir une barre de navigation verticale

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Avoir une barre de navigation verticale

Message 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

  1. Editez le template overall_header en cliquant sur la roue crantée edit ;

  2. 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>

  3. 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.

avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Voir le profil de l'utilisateur
Matriochka a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum