HorizontalNav - un plugin jQuery pour étendre vos menus horizontaux

Les menus horizontaux sont monnaies courantes sur les sites. Mais le problème avec un menu dynamique, c'est que sa taille varie (par définition) en fonction du nombre d'onglets.

Pour que votre menu reste toujours adapté au design de votre site, HorizontalNav permet d'ajuster la largeur de votre menu à son conteneur. C'est un plugin très pratique et qui évite de passer des heures à faire de l'adaptation. En plus, il est compatible avec notre ami IE 7.

Prenons l'exemple d'un menu, sans l'utilisation du plugin, voici à quoi il ressemblerait :

Après utilisation du plugin, on obtient le résultat suivant :

Pour le mettre en place, rien de plus simple. Il faut déjà avoir le code HTML :

	

		
Navigation Item
		
Work
		
Blog
		
About
		
Contact
	

Et appliquer le style du menu :

.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 appelle le plugin pour qu'il fasse son travail :

$(document).ready(function() {
	// Call horizontalNav on the navigations wrapping element
	$('.full-width').horizontalNav({});
});

Et voilà qui devrait vous faciliter la vie et vous faire gagner du temps !

Site officiel