Bonjour,
Je suis entrain de faire un site pour un client et j'ai un petit problème avec le hover d'un menu que j'ai réalisé :
Voici l'adresse de test : http://www.l-azk.com/Urban-Aktors/
En fait sous Internet Explorer (7 et 8) le hover pose quelques problèmes (il s'ouvre, se referme même si on est toujours en hover etc...). Même sous firefox il y a parfois des problèmes d'ouverture et de fermeture .
Voici mon html pour ma navigation :
Voici mon code Jquery :
Merci de votre aide
Laurent
Modifié par pikupman (30 May 2011 - 17:29)
Je suis entrain de faire un site pour un client et j'ai un petit problème avec le hover d'un menu que j'ai réalisé :
Voici l'adresse de test : http://www.l-azk.com/Urban-Aktors/
En fait sous Internet Explorer (7 et 8) le hover pose quelques problèmes (il s'ouvre, se referme même si on est toujours en hover etc...). Même sous firefox il y a parfois des problèmes d'ouverture et de fermeture .
Voici mon html pour ma navigation :
<nav class="nav" id="nav">
<div class="branding">
<a href="index.html" class="small-logo" title="Back to Home">Urban Aktors</a>
</div>
<div class="inner">
<ul class="main-menu">
<li class="nav-01">01</li>
<li class="nav-02">02</li>
<li class="nav-03">03</li>
<li class="nav-04">04</li>
<li class="nav-05">05</li>
<li class="nav-06">06</li>
<li class="nav-07">07</li>
<li class="nav-08">08</li>
<li class="nav-09">09</li>
<li class="nav-10">10</li>
</ul>
</div><!-- / .inner -->
<div class="submenu">
<a href="index.html" class="full-logo" title="Back to Home" style="display:none;">Urban Aktors</a>
<ul class="sub">
<li class="cufon-white sub-01"><a href="#">Urban aktors</a></li>
<li class="cufon-white sub-02"><a href="#">Marketing Factory</a></li>
<li class="cufon-white sub-03"><a href="#">World Shows</a></li>
<li class="cufon-white sub-04"><a href="#">Events</a></li>
<li class="cufon-white sub-05"><a href="#">Shop</a></li>
<li class="cufon-white sub-06"><a href="#">Corporate</a></li>
<li class="cufon-white sub-07"><a href="#">Consulting</a></li>
<li class="cufon-white sub-08"><a href="#">Architecture</a></li>
<li class="cufon-white sub-09"><a href="#">Blog</a></li>
<li class="cufon-white sub-10"><a href="#">Contact</a></li>
</ul>
</div><!-- / .submenu -->
</nav><!-- / .nav -->
Voici mon code Jquery :
$("nav").hover(
function () {
$("a.small-logo").fadeOut("slow");
$("a.full-logo").delay(800).fadeIn("slow");
$("span.copy").delay(800).fadeIn("slow");
$(".standardpage").animate({marginLeft: "+=185px"}, 1000 );
$("div.submenu").animate({left: "+=185px"}, 1000 );
$("div.submenu ul").delay(800).animate({opacity:"toggle"});
},
function () {
$("a.full-logo").delay(800).fadeOut("slow");
$("a.small-logo").delay(2500).fadeIn("slow");
$("span.copy").fadeOut("slow")
$(".standardpage").delay(1000).animate({marginLeft: "-=185px"}, 1000 );
$("div.submenu").delay(1000).animate({left: "-=185px"}, 1000 );
$("div.submenu ul").delay(800).animate({opacity:"toggle"});
});
Merci de votre aide

Laurent
Modifié par pikupman (30 May 2011 - 17:29)