11548 sujets

JavaScript, DOM et API Web HTML5

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 :

  <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 Smiley cligne

Laurent
Modifié par pikupman (30 May 2011 - 17:29)
Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif