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.
Ci-dessous l’exemple d’un menu, avec et sans l’utilisation du plugin :
Pour le mettre en place, rien de plus simple. Il faut déjà avoir le code HTML :
<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>
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 !