Composant UI: Barre de navigation Bootstrap

composant ui barre de navigation

Annonce

Voici le composant barre de navigation pour l’interface d’une page web que je vous propose après quelques thèmes bootstrap gratuits et tutoriels sur Bootstrap publiés sur le blog.

Vous n’aurez plus besoin désormais de créer une barre de navigation pour vos projets, car je vous propose 5 différentes versions qui sont toutes adaptées à tout projet web.

Vous n’aurez qu’à intégrer les liens menant vers les pages de votre projet dans la barre, appliquer le style que vous souhaitez à la barre et vous avez de quoi naviguer entre les pages de votre projet.

Elles sont conçues à l’aide de la version 4.3.1 de Bootstrap.

Voici les différents types de barre de navigation que je vous propose :

Barre de navigation simple :

C’est du classique, elle comporte un logo à gauche et les liens de navigation à droite.

Ces liens apparaissent sur les écrans supérieurs ou égaux à 991px, mais s’affichent lors d’un clic sur un menu hamburger intégré dans la barre  sur les écrans inférieurs à 991px.

Barre de navigation avec logo au milieu :

Sur les écrans inférieurs à 991 px, elle a le même comportement que la précédente, mais sur les écrans supérieurs à 991px, le logo est au milieu des liens de navigation qui eux-mêmes sont centrés au milieu de la barre.

Des sous-menus intégrés (1) :

Cette barre est la même que la première barre sauf qu’ici j’ai intégré des sous-menus. Ils s’affichent quand on clique sur le menu sous lequel ils sont regroupés.

Des sous-menus intégrés (2) :

Dans cette barre, les sous-menus s’affichent lors du passage de la souris sur le menu sous lequel ils sont regroupés.

Méga menu intégré:

Le sous-menu intégré dans cette barre est gigantesque, il regroupe plus d’une dizaine de liens.

Toutes les barres sont réunies sur une page, vous pouvez voir cette page en cliquant sur le bouton démo ci-dessous.


[wpdm_package id=’1062′]

Annonce

Laisser un commentaire