Menu en slide d’images en arrière-plan, avec jQuery

Menu en slide d'images en arrière-plan, avec jQuery

Voici un tutoriel pour un menu original, élégant et en jQuery. Ce menu est en plusieurs slides sur lesquelles apparaîtra lorsque nous les survolez, un sous-menu ainsi une image de fond différente. Ce menu est livré avec des possibilités de configuration, telles que la taille de l’image, l’effet de survol et d’états par défaut personnalisés.

La structure :

<div id="sbi_container" class="sbi_container">
	<div class="sbi_panel" data-bg="images/1.jpg">
		<a href="#" class="sbi_label">About</a>
		<div class="sbi_content">
			<ul>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
			</ul>
		</div>
	</div>
	<div class="sbi_panel" data-bg="images/2.jpg">
		...
	</div>
	...
</div>

Le script à personnaliser :
$('#sbi_container').bgImageMenu({
	defaultBg	: 'images/default.jpg',
	menuSpeed	: 300,
	border		: 1,
	type		: {
		mode		: 'verticalSlideAlt',
		speed		: 450,
		easing		: 'easeOutBack'
	}
});

J’ai préparé et testé pour vous une démo avec mes photos personnelles. Le fichier compressé est hébergé aussi sur mon serveur : Télécharger ce Menu en slide

Qu’en pensez-vous ?

1 réponse
  1. TsunamiChups
    TsunamiChups dit :

    Mise à part un petit default de css (celons moi)
    le background-color:black est des trop au survol de la souris.
    S’est voyant et surtout dommage, ça gâche un peu le rendu (esthétique)
    Mais mise a part ça s’est un plugin assez sympa.

    Répondre

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

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