HorizontalNav, un menu horizontal responsive avec jQuery

29 juillet 2012
9 617 vues

HorizontalNav est un plugin jQuery qui permet de réaliser une navigation horizontale qui s’adapte dynamiquement à la largeur de son conteneur. Pratique et facile à utiliser, l’outil s’inscrit parfaitement dans l’aire du temps avec l’une des grandes tendances du moment : le responsive webdesign.

Un menu qui s’adapte à son conteneur

HorizontalNav se sert de la propriété CSS display:table sur la liste à puces (combinée à un width:100% sur le ul et display:table-cell sur les li), compatible avec les navigateurs modernes, pour optimiser au maximum l’espace disponible des cellules du menu. Alors pourquoi passer par un plugin jQuery si le CSS est suffisant ? Tout simplement pour gagner du temps, mais aussi pour assurer le support du navigateur Internet Explorer 7 qui ne prend pas en compte cette propriété. Libre à vous de choisir la méthode qui convient le mieux.

Exemples sans et avec HorizontalNav

Le style est bien sûr totalement personnalisable : padding, margin, et autres bordures ne « casseront » pas l’effet souhaité. De plus, il existe trois paramètres pour personnaliser l’affichage du menu :

  • responsive : booléen (true par défaut) qui indique si le menu doit réagir automatiquement lorsque la fenêtre est redimensionnée.
  • responsiveDelay : entier en milliseconde (100 par défaut) qui indique le délai avant que le script recalcule la navigation lorsque la fenêtre est redimensionnée.
  • tableDisplay : booléen (true par défaut) qui indique aux navigateurs modernes d’utiliser la propriété CSS display:table. Si la valeur est false, l’espace des cellules est calculé en JavaScript.

Installation du menu

Il faut commencer par inclure jQuery et le plugin HorizontalNav.

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.horizontalNav.js" type="text/javascript"></script>

Ensuite, on déclare la structure HTML du menu. A noter que dans cet exemple nous utilisons la balise HTML5 nav pour déclarer notre menu. Cette balise représente une section possédant des liens de navigation principaux au sein du document ou vers d’autres pages, mais vous pouvez très bien vous en passer pour faire fonctionner HorizontalNav.

<nav class="horizontal-nav full-width">
   <ul>
      <li><a href="#">Navigation Item</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</nav>

Puis on déclare une feuille CSS pour donner un style au menu.

// There is no required CSS for this plugin to work properly
// but here is what is being used to style this demo
.horizontal-nav {
	background: #efefef;
	border-radius: 6px;
}
.horizontal-nav ul {
	background: #128F9A;
	float: left;
	text-align: center;
	border-radius: 6px;
	border: 1px solid #0e7079;
}
.horizontal-nav ul li {
	float: left;
	border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
	border-left: 0 none;
}
.horizontal-nav ul li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	border-top: 1px solid rgba(255,255,255, 0.25);
	border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
	border-left: 0 none;
}
.horizontal-nav ul li a:hover {
	background: #12808a;
}
.horizontal-nav ul li:first-child a {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

Et enfin, on termine par l’appel jQuery.

$(document).ready(function() {
	$('.full-width').horizontalNav({});
});

Voilà, c’est terminé ! Votre menu sera désormais réactif à la largeur de son conteneur.

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, Safari, IE7+
Démonstration : http://sebnitu.github.com/HorizontalNav/
Licence : Creative Commons Attribution-NonCommercial 3.0

Commentaires

  • Florian

    Un site proposant de nombreuse choses sur le responsive http://theme-responsive.com/

  • http://twitter.com/enguerranws Enguerran Weiss

    Utiliser un plugin jQuery pour faire un truc facilement réalisable en CSS me semble assez loin de la notion de RWD quand même…