Je suis en train de créer un site Web où j'utilise jQuery pour animer un menu à onglets horizontal. Ce que je veux réaliser on peut le voir ici:Animation de menu jQuery
/lien supprimé/
Si vous placez le curseur/mouseOver l'onglet « Link 1 », vous verrez que se développe un div blanc. Chacun des éléments du menu de l'onglet est un li-tag de style. Ce que je veux faire, c'est que lorsque vous passez la souris sur l'onglet "Link 2", le div blanc se contracte et se développe à nouveau avec du contenu lié à "Link 2" au lieu de "Link 1". En outre, l'onglet "Lien 1" doit être étendu par défaut (c'est-à-dire lorsque vous venez d'entrer dans le site)
Y a-t-il parmi vous des ninjas jQuery qui savent comment faire? Ce que j'ai actuellement est ceci:
<script type="text/javascript">
$(document).ready(function(){
var $div = $('#divtest');
var height = $div.height();
$div.hide().css({ height : 0 });
$('#forside').hover(function() {
if ($div.is(':visible')) {
$div.animate({ height: 0 }, { duration: 200, complete: function() {
$div.hide();
} });
} else {
$div.show().animate({ height : height }, { duration: 200 });
}
return false;
});
});
</script>
Ai-je besoin d'avoir 4 divs différents qui se dilatent/se rétractent à chaque passage de la souris?
Si je ne suis pas clair sur ce que mon problème est, s'il vous plaît dire et je vais essayer d'élaborer :)
Merci à l'avance!
Y a-t-il du contenu important apparaissant dans cette liste déroulante? Je conseillerais sérieusement de créer une version qui fonctionne sans javascript avant de créer la version avec javascript. –
Salut Bryan, merci pour le commentaire rapide. Non, il n'y a rien de très important qui se passe là-bas. Sera un teaser-texte et des images et rien de plus :) Je étais juste accroché à essayer de le faire fonctionner avec jQuery. À l'heure actuelle, le site Web ressemble davantage à un projet ponctuel, donc il n'y a pas de dates limites autour du coin;) – bomortensen