Barre de menu verticale avec les styles Css
Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Barre de menu verticale
Avec cette nouvelle astuce sur les styles Css, nous allons apprendre à agencer les éléments Html pour créer une barre de navigation verticale, surplombant les autres objets de la page.
Dans l'exemple finalisé illustré par la capture, au clic sur un bouton de menu, une barre de navigation verticale surgit au-dessus des éléments du contenu. Au survol de ses rubriques, des effets de couleurs se déclenchent pour indiquer que les liens sont cliquables.
Base de travail
Pour la mise en place de cette nouvelle astuce, nous suggérons de débuter l'étude à partir d'une page Web proposant déjà une structure avancée.
- Télécharger le fichier compressé barre-verticale-css.rar en cliquant sur ce lien,
- Puis, le décompresser dans le dossier de votre choix,
- Double cliquer sur le fichier index.htm pour l'exécuter dans le navigateur par défaut,
Au premier chargement, la surprise est de taille. La page Web apparaît complètement déstructurée.
La barre de navigation verticale est visible alors qu'elle ne devrait apparaître que sur demande. De plus, elle ne cohabite pas du tout avec les autres éléments. Ils sont tous repoussés plus bas. Tout cela est une question d'organisation par les styles Css et c'est ce que nous allons découvrir ensemble.
- A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
- Dans le menu contextuel qui surgit, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
...
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
</head>
<body>
...
La première est celle qui gère l'organisation globale de la page. La seconde, nommée les-styles, est celle que nous allons implémenter pour disposer correctement les éléments de la barre de navigation.
Plus bas dans le code html et plus spécifiquement dans le calque d'identifiant contenu, nous trouvons l'imbrication des éléments html à mettre en page pour ce menu.
...
<div id="contenu">
<!-- Barre de menu -->
<div class="barre" id="barreNavig">
<button onclick="fermer()"class="barre-element">Fermer ×</button>
<a href="#" class="barre-element bouton">Lien1</a>
<a href="#" class="barre-element bouton">Lien2</a>
<a href="#" class="barre-element bouton">Lien3</a>
</div>
<!-- Bouton Menu et titre page -->
<div class="fond">
<button class="bouton fond grand" onclick="ouvrir()">?</button>
<h1>Astuce Css - Menu vertical</h1>
</div>
<div id="auCentre">
...
Comme l'indiquent les commentaires dans le flux, le premier bloc correspond à la barre de navigation verticale, précisément celle qui repousse tous les autres objets plus bas dans la page. Le second bloc correspond au bandeau horizontal à disposer en haut de page. C'est lui qui accueille le titre et le bouton de menu pour ouvrir le bandeau de navigation.
Dans le premier bloc, les éléments de menu sont matérialisés par un bouton pour fermer le bandeau et par des liens hypertextes (balises a) pour les rubriques cliquables. Ils sont encapsulés dans un calque (balise div) d'identifiant barreNavig et associé au style barre (attribut class). C'est ce style que nous allons enrichir en premier pour corriger les défauts de placement.
Le style bouton associé aux liens cliquables doit aussi être considéré. C'est grâce à lui que nous pourrons créer les effets visuels au survol des rubriques.
Le second bloc est associé à la classe fond par le biais de son calque. Nous verrons qu'un petit réglage utile y sera à entreprendre.
Enfin, vous notez que les deux boutons (button) appellent une fonction Javascript respective au clic (onclick). Il s'agit des fonctions fermer et ouvrir. Elles doivent simplement permettre de masquer et d'afficher sur demande la barre de navigation verticale.
Vous remarquez qu'une construction se poursuit dans le calque d'identifiant situé juste en-dessous. Il s'agit des travaux réalisés à l'occasion de l'astuce précédente pour donner vie à un système de navigation par onglets. Une fois que nous aurons correctement réalisé les réglages de mise en page par les styles Css, nous le retrouverons donc dans le flux. Mais nous ne nous attarderons pas sur les éléments Html qui le composent.
- A la racine du dossier de décompression, double cliquer sur le sous dossier css,
- Dès lors, cliquer droit sur la feuille de styles les-styles.css,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
Eléments Html empilés
Pour débuter, nous souhaitons réorganiser les éléments Html de manière à ce qu'ils puissent cohabiter. Pour cela, nous devons les empiler. Et pour qu'ils puissent se positionner non pas dans le flux, mais les uns en dessous des autres, nous devons simplement agir sur l'attribut position du style barre qui est associé à la barre de navigation verticale.
- A la fin du style barre, ajouter la ligne Css suivante :
{
height:400px;
width:200px;
background-color:#fff;
overflow:auto;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
font-size:18px;
border-radius:30px 0px 0px 0px;
position:absolute;
}
Avec l'attribut position réglé sur la valeur absolute, le calque concerné ne se soucie plus du positionnement des autres calques. Il ne les repousse plus et accepte de les chevaucher.
- Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
- Puis, actualiser la cache du navigateur avec le raccourci clavier CTRL + F5,
Certes, il reste encore du chemin à parcourir mais comme vous pouvez le voir, un seul réglage Css a suffi à réorganiser l'ensemble des éléments de la page. Vous remarquez que la barre de navigation verticale épouse parfaitement le coin arrondi du cadre. C'est une astuce que nous avons déjà découverte consistant à exploiter l'attribut Css border-radius. Ainsi inscrit dans le style barre : border-radius:30px 0px 0px 0px, il arrondit l'angle supérieur gauche sans toucher aux autres. C'est un réglage identique que nous devrons appliquer au bandeau bleu en arrière-plan. Pour l'instant, ses coins débordent du cadre. Et il s'agira cette fois d'agir sur ses deux angles supérieurs.
- Revenir dans l'éditeur Notepad sur le code de la feuille de styles,
- A la fin du style barre, ajouter la ligne Css suivante :
{
height:400px;
width:200px;
background-color:#fff;
overflow:auto;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
font-size:18px;
border-radius:30px 0px 0px 0px;
position:absolute;
display:none;
}
Avec l'attribut display réglé sur la valeur none, nous ordonnons de masquer par défaut cette barre de navigation verticale. Bien sûr, l'enjeu consiste désormais à la faire réapparaître au clic sur le bouton de menu. Et c'est là que le code Javascript doit intervenir en toute simplicité et nous le verrons.
- Enregistrer les modifications et revenir sur la page Web,
- Puis, actualiser le cache du navigateur par le raccourci clavier CTRL + F5,
La barre de navigation verticale est désormais masquée au chargement de la page Web. Une fois encore, seules deux lignes Css ont suffi pour considérablement remodeler l'organisation et la présentation de la structure Html. Et à ce titre, vous notez que le système de navigation par onglets, développé au cours de la précédente astuce, se suggère. Si vous passez la souris sur les boutons de menu faisant office d'onglets, vous faites apparaître le contenu des rubriques attenantes juste en-dessous. Par contre et bien évidemment à ce stade, si vous cliquez sur le bouton de menu dans le bandeau bleu, rien ne se produit encore.
Arrondir les angles supérieurs
Nous l'avons évoqué précédemment, le bandeau bleu du titre dénote. Il ne s'intègre pas dans la présentation. Ce sont ses bords supérieurs gauche et droit qui débordent en raison du cadre aux coins arrondis.
- Revenir dans l'éditeur Notepad sur le code de la feuille de styles,
- A la fin du style fond, ajouter le réglage Css suivant :
{
color:#fff;
background-color:#2b579a;
padding-left:15px;
text-align:left;
border-radius:30px 30px 0px 0px;
}
Grâce à l'attribut border-radius et à l'énumération de ses paramètres, nous arrondissons en conséquence, après quelques essais, les angles supérieurs du bandeau bleu.
- Enregistrer les modifications et basculer sur la page Web,
- Rafraîchir le cache du navigateur avec le raccourci clavier CTRL + F5,
Comme vous pouvez le voir, le bandeau du menu s'inscrit désormais parfaitement dans la forme du cadre.
Afficher et masquer la barre de navigation
Nous l'avons souligné, les appels aux fonctions Javascript existent. Mais les fonctions Javascript elles-mêmes brillent encore par leur absence. Elles doivent respectivement se charger de masquer la barre de menu et de l'afficher. Pour cela, elles doivent changer dynamiquement la valeur de l'attribut display pour le calque d'identifiant barreNavig, celui associé à la classe barre et qui gère la barre de navigation verticale.
- Revenir dans l'éditeur Notepad, sur le code de la page index.htm cette fois,
- En bas dans la section de script, avant la fonction afficher, créer les deux fonctions suivantes :
</div>
<script type="text/javascript" language="javascript">
function ouvrir() {
document.getElementById("barreNavig").style.display = "block";
}
function fermer() {
document.getElementById("barreNavig").style.display = "none";
}
function afficher(id)
{
...
La fonction afficher est celle de l'astuce précédente. Elle gère le comportement du système de navigation par onglets. La fonction ouvrir est appelée par le bouton de menu. Grâce à la méthode getElementById de l'objet Javascript document, elle pointe sur le calque d'identifiant barreNavig, soit la barre de navigation verticale que nous avons masquée. En réglant à block la valeur de sa propriété display, nous la rendons de nouveau visible au clic. Notez que pour atteindre l'attribut display, dans la hiérarchie, il faut d'abord passer par la propriété style. De la même façon mais inversement, la fonction fermer cache de nouveau cette barre de navigation, en basculant à none la valeur de l'attribut display. Elle est appelée par le bouton intitulé Fermer et situé dans cette barre de navigation verticale.
- Enregistrer les modifications et revenir sur la page Web,
- Actualiser le cache du navigateur,
- Passer d'abord la souris sur l'un des onglets pour faire apparaître une rubrique,
- Puis, cliquer sur le bouton de menu, au-dessus du titre dans le bandeau,
La barre de navigation apparaît parfaitement positionnée sur la gauche du cadre. Mais comme vous pouvez le voir, elle est partiellement masquée par le calque de la rubrique active. Nous devons corriger ce défaut. Si vous cliquez sur le bouton Fermer en haut de la barre, le menu disparaît de nouveau. Le système commence donc à devenir opérationnel.
Ordre d'empilement des calques
Pour corriger le défaut d'affichage, nous devons agir sur l'ordre d'empilement des calques. Le calque du menu doit être placé au-dessus des autres. Et c'est une simple propriété Css qui permet de le stipuler.
- Revenir dans l'éditeur Notepad sur le code de la feuille de styles,
- A la fin du style barre, ajouter le réglage suivant :
{
height:400px;
width:200px;
background-color:#fff;
overflow:auto;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
font-size:18px;
border-radius:30px 0px 0px 0px;
position:absolute;
display:none;
z-index:1;
}
En réglant à 1 la valeur de l'attribut Css z-index, nous plaçons le calque de la barre de navigation au-dessus des autres. Plus cette valeur est élevée, plus le calque est haut dans la hiérarchie. Mais ici, comme l'attribut z-index n'a jamais été renseigné pour les autres calques, la valeur 1 suffit.
- Enregistrer les modifications et revenir sur la page Web,
- Actualiser le cache du navigateur,
- Passer d'abord la souris sur l'un des onglets pour faire apparaître une rubrique,
- Puis, cliquer sur le bouton de menu pour faire apparaître la barre de navigation,
Cette fois, elle est correctement placée dans la hiérarchie. Elle domine les autres éléments Html.
Navigation au survol
Pour parfaire la solution, nous souhaitons faire réagir les rubriques de la barre de navigation verticale, au passage de la souris. Un changement de couleur fera l'affaire. Ces éléments sont associés au style bouton. Il suffit donc de créer le style dérivé bouton:hover pour gérer le survol de la souris et influer sur les propriétés de la rubrique concernée.
- Revenir dans l'éditeur Notepad sur le code de la feuille de styles,
- Après le style bouton, créer le style bouton:hover comme suit,
{
color:#edeeee;
background-color:#2b579a;
}
Nous choisissons donc de modifier significativement la couleur de texte ainsi que la couleur de fond.
- Enregistrer les modifications et revenir sur la page Web,
- Actualiser le cache du navigateur et cliquer sur le bouton de menu,
- Puis, passer la souris sur les rubriques de la barre de navigation verticale,
Comme vous pouvez le voir, les rubriques réagissent parfaitement. Notre système de navigation est donc parfaitement fonctionnel. Il ne resterait plus qu'à associer ces rubriques à des liens hypertextes effectifs.
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales
