Theme Responsive

Dans Outils le 16 juillet

aperçus du menu adaptable

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:

exemple de menu court

Et le voici avec le plugin:

menu long

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({});
});



Étiquettes : ,

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *