La navigation avec Bootstrap – Partie 2Faire une navbar avec Bootstrap

Suite du tour des possibilités qu’offre le framework qui nous intéresse depuis plusieurs articles, cette fois nous allons voir comment faire une navbar avec Bootstrap.

Une navbar est un des éléments les plus importants d’une page web. C’est une des raisons qui font que tes utilisateurs visitent ton site ou le quittent. Les titres d’onglets leurs couleurs, leurs animations, son aspect général, etc doivent être choisis avec précision et susciter l’intérêt. Mais autre aspect important, la navbar doit aussi être accessible sur mobile.

Bootstrap est un framework pensé mobile first, donc le code qui suivra tiendra compte de l’aspect responsive que devra avoir une navbar. Pour cela Bootstrap a pensé à tout! Comme pour l’article précédent sur la navigation, certaines de ces fonctions auront besoin de jQuery et de Javascript pour fonctionner. N’étant pas encore formé à ces deux langages, je ne parlerai pas de ça pour le moment.

Construire la navbar

La balise nav

Avant de rendre notre navbar classe, il va falloir poser la structure. Le code de la navbar est un peu lourd puisqu’il contient pas mal d’informations. Notamment le bouton toggle, qui permet d’accéder aux boutons de la navbar sur les appareils mobiles.

D’un point de  vue sémantique, il va falloir créer une balise nav qui englobera tout le contenu de la barre de navigation.  Cette balise comprendra les classes CSS nav et navbar-default. Nous verrons plus loin que l’on peut remplacer cette seconde classe par une autre qui modifiera l’aspect de la navbar. Retiens simplement que navbar-default défini l’aspect de base de ta navbar. Fais d’ailleurs le test sans cette classe CSS…

<nav class="navbar navbar-default">
	<div class="container-fluid">

	</div> <!-- container-->
</nav>

Container ou container- fluid?

En fait les deux sont possibles, mais tu verras que très souvent, les navbars des sites que tu visites s’étirent sur toute la largeur de l’écran. Mais en tout cas sache que les deux fonctionnent, à toi de faire ce qu’il te plaît et surtout ce que veut ton client…

Dans les deux cas, il faudra qu’à l’intérieur de ta balise nav, tu ajoutes une div qui englobera le reste du codes de la navbar, et qui aura les classes CSS container ou container-fluid. 

Si tu as un doute concernant les différences entre les propriétés container et container-fluid, je te conseille de jeter un oeil à cet article: Le système de grille Bootstrap.

Dans l’exemple Codepen, je choisis d’avoir une navbar qui fera toute la largeur de la page, j’utiliserai donc container-fluid.

 

Insérer le bouton toggle et  le logo

Un bouton toggle est le petit carré qui comporte 3-4 lignes horizontale, sur lequel tu appuies lorsque tu cherches à voir les éléments de navigations depuis un appareil mobile.

Pour insérer le bouton toggle et le logo de ton client, Bootstrap demande de créer une div comportant la classe CSS navbar-header. Cette nouvelle section a donc deux principaux blocs:

  • un bouton: balise button qui servira à faire le bouton toggle,
  • une div  qui aura la classe CSS navbar-brand.

Le logo

Beaucoup de sites commerciaux, ou autre arborent leur logo dans la navbar. C’est un très bon moyen d’enfoncer le clou, et faire en sorte que le visiteur mémorise le site et l’image de la société dont il recherche les services. C’est une  bonne astuce d’insérer un logo à cet endroit puisque l’utilisateur va rapidement regarder vers la navbar pour savoir comment s’orienter sur ton site.

Pour insérer le logo, il te suffit de créer une div et de lui donner la valeur navbar-brand. Puis dans cette div insère ton logo avec la balise HTML img si c’est une image…

Détail qui a son importance, pense à faire en sorte que ton logo soit cliquable et permette à l’utilisateur de revenir à la page d’accueil par exemple. Pour cela, place ton logo dans une balise  <a> celle qui sert à faire des liens.

Le boutton toggle

Il faut d’ores et déjà savoir que sans l’ajout de code jQuery ou Javascript, l’animation de ce bouton ne marchera pas avec Bootstrap seul. Je te laisse vérifier ce point en allant voir sur le fichier Codepen.

Pour créer ce bouton qui n’apparaîtra que sur les écrans mobiles (inférieur à 768 pixels), il faut commencer par créer une balise html <button>, et renseigner l’attribut type= »button ».

Comme toujours avec Bootstrap, il te faut ajouter des classes CSS à ta balise <button>:

  • navbar-toggle: indique que le bouton intégré est un bouton toggle pour Bootstrap;
  • collapsed: indique le déroulement de la navbar contenu dans le bouton.

La balise <button> contient encore quelques informations, notamment les éléments suivant:

  • data-toggle: permet d’utiliser les données contenues dans la « navbar standard ». Pour bien comprendre à quoi sert cet attribut, je te conseille de lire cet article du JDN. C’est assez clair je trouve, je ne fais ici que simplifier au maximum. Aucun intérêt de recopier l’article. Je me suis ensuite demandé ce qu’était une fenêtre modale, l’article parle de ce terme que je ne comprenais pas, donc si tu veux en savoir un peu plus, c’est sur Wikipédia que ça se passe…
  • data-target: permet de simplifier la vie du développeur et de se passer de ligne de code Javascript. Cet attribut contient un sélecteur CSS et permet de cibler directement l’id contenue dans le code de la navbar que nous verrons ensuite.

Tous les attributs et classe dont je viens de parler sont contenus dans la balise ouvrante <button>, et pour finir il reste à coder l’apparence du bouton. « Euh mais c’est pas une image ou une icône du coup??!! » – Et non!!

A l’intérieur des balises HTML button, il va falloir intégrer des balises span qui permettront de définir l’apparence du bouton et qui contiendront les classes CSS icon-bar. Les voilà les icônes que tu voulais tout à l’heure, sauf que ça ne sort pas de chez font-awesome, elles sont déjà prévues dans Bootstrap!

Tu remarqueras qu’une balise span correspond à une ligne du bouton toggle. Je me suis amusé à en mettre plein pour voir, et c’est pas une bonne idée… 3 ou 4 lignes suffisent…

Il est bon de remarquer que la première ligne span ne contient pas la classe CSS icon-bar mais sr-only. Cette classe sert à cacher des informations aux lecteurs d’écrans (sr = screen reader). En français j’imagine que c’est cette classe qui permet de masquer ou d’afficher le bouton toggle en fonction de la taille de l’écran. Pour plus de renseignement, tu peux aller voir sur stack overflow, ils parlent de cette propriété, mais c’est en anglais!

Passons au code du bouton, tu peux retrouver le code complet de la navbar sur codepen.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</button>

Intégrer la navbar

Nous y voilà, on va enfin voir le code de la navbar, celle avec les liens vers les autres pages.  Jusque là je n’ai pas menti, le code est assez lourd, je ne sais pas si je m’en rappellerais par coeur, tellement il y a de choses. J’avoue aussi que si je ne m’étais pas fixé comme objectif de faire un article à ce sujet, j’aurais surement été moins loin sur certaines choses…

Le code qui va suivre va ressembler à quelque chose de plus connu. Une <div> comprenant la classe CSS navbar-collapse, une liste non ordonnée <ul> avec les classes CSS nav et navbar-nav et plusieurs éléments de listes <li> comprenant des liens <a>.

<div class="collapse navbar-collapse">
	<ul class="nav navbar-nav" id="collapse-1">
		<li class="active"><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Produit</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div> <!-- fin navbar collapse-->

Remarque bien l’id qui permet au bouton de « venir chercher le contenu de la navbar » et de l’afficher dans la liste déroulante lorsque l’on clique sur le bouton.

Plus de possibilités

Bootstrap permets quelques propriétés complémentaires, mais je vais passer assez vite dessus. Non pas que ça ne soit pas intéressant mais cet article est déjà très long , et pour les avoir manipulées un peu, les propriétés qui suivent nécessitent d’être triturées pour bien comprendre comment cela fonctionne.

Ajouter du texte

Il est possible d’ajouter d’autres éléments dans une navbar. Par exemple, l’entreprise qui t’embauche pour faire son site a peut-être une devise ou un slogan? Il est possible de le faire figurer dans la navbar en ajoutant un paragraphe comportant la classe CSS: navbar-text.

Dans l’exemple de Codepen, j’ai ajouté du texte, mais il faudrait travailler davantage la mise en forme pour un vrai projet. Je pense qu’il faudrait créer une grille Bootstrap dans la nav pour que tout s’agence correctement, et que chaque chose soit à sa place. Pour ça je te conseille de refaire une  barre de navigation d’un site que tu connais bien. C’est le genre de chose que je vais essayer de faire aussi.

Positionner le texte

Concernant la position du texte que tu peux ajouter dans la navbar, il est  également possible de choisir de le mettre à gauche ou à droite grâce aux classes CSS: navbar-right et/ou navbar-left.

Modifier l’apparence de la navbar

Bootstrap propose 2 apparences pour la navbar, un thème clair et un thème foncé qu’il est simple de mettre en place grâce à l’ajout de deux classes CSS dans la balise nav:

  • thème clair:  c’est le thème par défaut, pour l’appliquer, ajoute la class navbar-default à la balise <nav>;
  • thème foncé: ce thème permet d’avoir un contraste plus prononcé, fond noir. Pour mettre en place cette apparence, il faut ajouter la classe CSS navbar-inverse à la balise <nav>.

Tu te demandes pourquoi la classe par défaut comporte une classe CSS, puisqu’à priori c’est celle dont tu te serviras le plus. Et bien j’imagine que pour des raisons d’accessibilité pour les personnes mal-voyantes ou non-voyantes, tu peux avoir besoin de proposer l’une ou l’autre des apparences. J’ai bien sur jamais eu le cas encore, mais je pense que ça peut servir à cela entre autre.

Ajouter un lien

Alors je ne vois pas bien à quoi cette fonction peut servir, puisqu’habituellement, les boutons de la navbar servent aussi de lien. Je ne vois pas pourquoi on aurait besoin d’ajouter des liens complémentaires? Mais comme ça existe, et tant qu’on y est on va en parler un peu.

Pour ajouter un lien dans la navbar, on va imbriquer les balises HTML de paragraphe p et de lien a. Tu peux voir dans Codepen comment intégrer cela. Le paragraphe devra comporter la classe CSS navbar-text et la balise a la classe CSS navbar-link.

A la différence des liens de la navbar à proprement parlé, les liens sont soulignés au survol. Il est possible de modifier l’apparence avec un peu de code CSS, voir dans codepen.

Fixer la navbar

Dernier point,et non des moindres, de cet article assez long, les classes CSS permettant de fixer la position de la navbar en  haut ou en bas de page.  Pour mettre en évidence cette propriété, j’ai ajouté un peu de texte Lorem Ipsum pour avoir quelque chose à scroller.

Sans les propriétés qui vont suivre, la navbar scroll comme le reste du texte. C’est assez pénible puisqu’on perd l’outil de navigation dans le site, et si ça agace l’utilisateur de devoir remonter à chaque fois en haut de page, il risque simplement de quitter le site. Je te conseille de faire le test, depuis Codepen. Applique ou retire ces propriétés pour voir de quoi je parle.

Bootstrap t’offre donc la possibilité de positionner ta navbar fixe en haut ou en bas avec l’ajout de classes CSS à ta balise nav:

  • navbar-fixed-top: fixe ta navbar en haut de page,
  • navbar-fixed-bottom: fixe ta navbar en bas de page.

Attention: 

Lorsque tu opteras pour un positionnement fixe en haut de page, il faudra appliquer un padding-top d’au moins 70px à la balise HTML , afin que ta navbar ne masque pas les premières lignes de ton contenu. Les 70 px correspondent à la hauteur d’une navbar Bootstrap tenant sur une ligne. Si ta navbar est plus haute, il te faudra certainement dépasser les 70px. Encore une fois, n’hésites pas à faire des tests.

Je pense maintenant avoir fais le tour de la question de la navbar avec Bootstrap. Il me faudra encore manipuler tout cela dans des projets afin d’être un peu plus habitué à manipuler tout ce code.

Le prochain article concernera la pagination, et les moyens de naviguer d’une page à l’autre au sein d’une même section.

A bientôt pour la suite et fin de mon exploration de Bootstrap!

Et bon week end!

Guillaume