Theme Responsive

Les menus horizontaux sont les plus répandus. 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 IE 7.

Voici l’exemple d’un menu court:

Et le voici avec le plugin:

Pour le mettre en place il faut:

1) Ajouter ce code HTML

2) Utiliser ce style CSS (libre a vous de le modifier)

.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;
}

3) Et enfin insérer ce code

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