Les barres

jdb-bar

Les barres de navigation

La classe jdb-bar permet de créer des barres de navigation horizontales ou verticales. Combinée avec jdb-bar-item, elle offre une base pour construire des menus, des groupes de boutons et d'autres composants alignés.

Barre horizontale

Par défaut, les éléments jdb-bar-item à l'intérieur d'une jdb-bar sont alignés horizontalement :

Accueil Articles Contact

Code :

<div class="jdb-bar jdb-light-gray">
  <a class="jdb-bar-item">Accueil</a>
  <a class="jdb-bar-item">Articles</a>
  <a class="jdb-bar-item">Contact</a>
</div>

Barre verticale

Ajoutez la classe jdb-bar-block pour empiler les éléments verticalement :

Accueil Articles Contact

Code :

<div class="jdb-bar-block jdb-light-gray">
  <a class="jdb-bar-item">Accueil</a>
  <a class="jdb-bar-item">Articles</a>
  <a class="jdb-bar-item">Contact</a>
</div>

Barres colorées

Utilisez les classes de couleur JdB.CSS pour personnaliser l'arrière-plan de la barre ou de chacun de ses éléments :

Accueil Articles Contact

Noir Jaune Bleu

Code :

<!-- Couleur sur la barre -->
<div class="jdb-bar jdb-blue">
  <a class="jdb-bar-item">Accueil</a>
  <a class="jdb-bar-item">Articles</a>
  <a class="jdb-bar-item">Contact</a>
</div>

<!-- Couleur sur chaque élément -->
<div class="jdb-bar">
  <a class="jdb-bar-item jdb-black">Noir</a>
  <a class="jdb-bar-item jdb-yellow">Jaune</a>
  <a class="jdb-bar-item jdb-red">Rouge</a>
</div>

Effets de survol

Les classes jdb-hover-couleur permettent de changer la couleur de fond au survol du curseur :

Accueil Articles Contact

Code :

<div class="jdb-bar jdb-light-gray">
  <a class="jdb-bar-item jdb-hover-blue">Accueil</a>
  <a class="jdb-bar-item jdb-hover-green">Articles</a>
  <a class="jdb-bar-item jdb-hover-red">Contact</a>
</div>

La classe jdb-hover-none permet de désactiver tout effet de survol sur un élément.

Barres avec des liens

Les éléments <a> avec la classe jdb-bar-item fonctionnent comme des liens classiques :

Accueil Rechercher Messages

Code :

<div class="jdb-bar jdb-border">
  <a href="#" class="jdb-bar-item jdb-hover-light-gray">
    Accueil
  </a>
  <a href="#" class="jdb-bar-item jdb-hover-light-gray">
    Rechercher
  </a>
  <a href="#" class="jdb-bar-item jdb-hover-light-gray">
    Messages
  </a>
</div>

Barres avec des boutons

Les éléments <button> peuvent être utilisés de la même manière.

Code :

<div class="jdb-bar jdb-light-gray">
  <button class="jdb-bar-item jdb-button jdb-hover-gray">Nouveau</button>
  <button class="jdb-bar-item jdb-button jdb-hover-gray">Modifier</button>
  <button class="jdb-bar-item jdb-button jdb-hover-gray">Supprimer</button>
</div>

Boutons groupés avec bordures

Ajoutez la classe jdb-rounded ou jdb-bordered-items à la barre pour ajouter des bordures entre les éléments :

Code :

<!-- Avec jdb-rounded -->
<div class="jdb-bar jdb-rounded">
  <button class="jdb-bar-item jdb-button jdb-light-gray">Précédent</button>
  <button class="jdb-bar-item jdb-button jdb-light-gray">Suivant</button>
</div>

<!-- Avec jdb-bordered-items -->
<div class="jdb-bar jdb-bordered-items">
  <button class="jdb-bar-item jdb-button jdb-white">Option 1</button>
  <button class="jdb-bar-item jdb-button jdb-white">Option 2</button>
  <button class="jdb-bar-item jdb-button jdb-white">Option 3</button>
</div>

Barre responsive

La classe jdb-mobile est idéale pour rendre les éléments de barre adaptatifs.

Vous pouvez également combinez jdb-bar avec les classes de visibilité responsive pour afficher un menu différent selon la taille de l'écran. Utilisez par exemple jdb-hide-small pour masquer des éléments sur petits écrans.

Redimensionnez la fenêtre pour voir l'effet :

Accueil Articles Contact

Code :

<div class="jdb-bar jdb-light-gray">
  <a class="jdb-bar-item jdb-button jdb-mobile">Accueil</a>
  <a class="jdb-bar-item jdb-button jdb-mobile">Articles</a>
  <a class="jdb-bar-item jdb-button jdb-mobile">Contact</a>
</div>

Alignement à droite

Utilisez la classe jdb-right pour pousser des éléments à droite dans une barre :

Accueil Articles Paramètres

Code :

<div class="jdb-bar jdb-light-gray">
  <a class="jdb-bar-item jdb-button">Accueil</a>
  <a class="jdb-bar-item jdb-button">Articles</a>
  <a class="jdb-bar-item jdb-button jdb-right">
    <i class="fa fa-cog" aria-hidden="true"></i> Paramètres
  </a>
</div>

Navigation précédent / suivant

Combinez jdb-left et jdb-right pour créer une navigation de type "précédent / suivant" :

Code :

<div class="jdb-bar jdb-light-gray">
  <button class="jdb-bar-item jdb-button jdb-gray jdb-left">
    <i class="fa fa-chevron-left" aria-hidden="true"></i> Précédent
  </button>
  <button class="jdb-bar-item jdb-button jdb-gray jdb-right">
    Suivant <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </button>
</div>

Barre centrée

Entourez la barre avec un conteneur utilisant la classe jdb-center pour centrer les éléments :

Code :

<div class="jdb-center">
  <div class="jdb-bar">
    <button class="jdb-button jdb-light-gray">Bouton 1</button>
    <button class="jdb-button jdb-gray">Bouton 2</button>
    <button class="jdb-button jdb-dark-gray">Bouton 3</button>
  </div>
</div>

Barre avec badge

Ajoutez un jdb-badge à un élément de la barre pour afficher un compteur ou une notification :

Messages 5 Notifications 12 Tâches 3

Code :

<div class="jdb-bar-block jdb-light-gray" style="max-width:220px">
  <a class="jdb-bar-item jdb-button">
    Messages <span class="jdb-badge jdb-blue jdb-right">5</span>
  </a>
  <a class="jdb-bar-item jdb-button">
    Notifications <span class="jdb-badge jdb-red jdb-right">12</span>
  </a>
  <a class="jdb-bar-item jdb-button">
    Tâches <span class="jdb-badge jdb-green jdb-right">3</span>
  </a>
</div>