Barres de navigation et menu entête

Une barre de navigation est un en-tête de navigation qui est placé en haut de la page
Dans ce tutoriel, vous apprendrez comment créer les en-têtes de navigation fixes et statiques en utilisant le composant navbar de Bootstrap.

Tutoriel Bootstrap 3

Création d'un menu avec une barre de navigation Simple

Pour créer un en-tête de navigation réactive pour votre site ou application, vous devez utiliser le composant navbar de Bootstrap. Ces navbar sensible étaient au départ créés pour des dispositifs ayant de petites écrans comme les téléphones cellulaires qui se développe quand l'utilisateur clique sur le bouton Activer/désactiver. Toutefois, il auront une configuration  horizontale comme d'habitude sur les dispositifs de moyennes et grandes taille d’écran comme les ordinateurs portables ou de bureau.

Plusieurs variantes de barres de navigation sot disponibles dans bootstrap que vous pouvez crées et positionnées  avec beaucoup moins d'effort.

Ainsi des navbars fixe ou non avec menus déroulants ou simple sont contenues dans bootstrap.

L'exemple suivant vous montrera comment créer une barre de navigation statique simple avec les liens de navigation.

Sélectionner le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de Navbar Static de Bootstrap 3 </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .exemple{
                margin: 10px;
    }
</style>
</head>
<body>
<div class="exemple">
    <nav role="navigation" class="navbar navbar-default">
        <!-- Pour un affichage sur les mobiles -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Nom du site</a>
        </div>
        <!-- Collection de liens de navigatioon -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Accueil</a></li>
                <li><a href="#">Profil</a></li>
                <li><a href="#">Espace membre</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</div>
</body>
</html>

 

Pour placer un ou plusieurs éléments à droite de la barre de navigation utiliser la classe navbar -right comme nous l’avons fait pour l’élément login dans notre exemple.

Vous pouvez aussi inclure des menus déroulants et si vous le voulez un formulaire de recherche dans la navbars.

Sélectionner le code

<div class="barre">
    <nav role="navigation" class="navbar navbar-default">
        <!-- Pour un affichage sur les mobiles -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
<span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Nom du site</a>
        </div>
        <!-- Collection de liens de navigatioon -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Accueil</a></li>
                <li><a href="#">Profil</a></li>
                <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Espace membre <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Vos articles</a></li>
                    <li><a href="#">Statistiques</a></li>
                    <li><a href="#">Autres</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Historique</a></li>
                </ul>
                </li>
            </ul>
                                               <form role="search" class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" placeholder="Search" class="form-control">
            </div>
                                               </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</div>

 

Voici une version de l’exemple précédent avec des icones de glyphicon

Sélectionner le code

    <nav role="navigation" class="navbar navbar-default">
        <!-- Pour un affichage sur les mobiles -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
<span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Nom du site</a>
        </div>
        <!-- Collection de liens de navigatioon -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Accueil</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-book"></span> Profil</a></li>
                <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Espace membre <b class="caret"></b></a>
                                 <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Vos articles</a></li>
                    <li><a href="#">Statistiques</a></li>
                    <li><a href="#">Autres</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Historique</a></li>
                                </ul>
                </li>
            </ul>
                                               <form role="search" class="navbar-form navbar-left">
            <div class="form-group">
                <span class="glyphicon glyphicon-search"></span> <input type="text" placeholder="chercher" class="form-control">
            </div>
                                               </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in"> Login</a></li>
            </ul>
        </div>
    </nav>

 

Bootstrap la barre de navigation fixe

Bootstrap fournit aussi un mécanisme pour créer une barre de navigation fixé en haut ou en bas de la fenêtre donc qui ne fait pas défiler avec le contenu de la page.

Créer une  barre de navigation fixe vers le haut

Utiliser la classe .navbar-fixed-top en plus de la classe de base .navbar et .navbar-default et vous créez ainsi des navbars qui sont fixées en haut de la page.

Sélectionner le code

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<!-- les éléments de votre menu ici comme on vient de le voir ci dessus -->
</nav>

 

Créer la barre de navigation fixe en bas

De même pour créer des navbars fixés en bas ajouter la classe .navbar -fixed-bottom.

Sélectionner le code

<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
<!-- les éléments de votre menu ici comme on vient de le voir ci dessus -->
</nav>

 

Créer la Variate inversée d'une barre de navigation

Vous pouvez également créer des variate inversée de la barre de navigation « bootstrap » simplement en ajoutant la classe .navbar-inverse à la classe de base .navbar , sans aucun autre changement  dans ce que nous avons vu en haut.

Sélectionner le code

<nav role="navigation" class="navbar navbar-inverse">
<!-- les éléments de votre menu ici comme on vient de le voir ci dessus -->
</nav>

 

Remarque : Vous pouvez utiliser votre propre feuille de style. Dans ce cas il faut l’ajouter juste avant la balise de fermeture du head (</head>).


chapitre précédent chapitre suivant

Par carabde 02 janvier 2016