JQuery Hover Drop-Down-Menu Full Width Size

J'ai un menu vertical dans mon site Web. Maintenant, j'ai besoin d'un système déroulant dans certains liens.
J'ai vu cet exemple sur Internet: http://jsfiddle.net/4jxph/3018/ Mais je veux un sous-menu pleine largeur. Le système déroulant de Sony est ce que je veux. Système déroulant par Sony: Sony J'ai toujours craetet un menu déroulant pleine largeur.
Mon code: http://www.jsfiddle.net/3aK9k/4 .
Donc, ce que je veux, lorsque je déplace le content afin que le sous-menu et à nouveau sur le lien de menu qui a affiché le sous-menu que le sous-menu devrait être là sans quelques mouvements.

J'espère avoir expliqué ce que je veux faire. Je pense que c'est possible, mais cela a accablé ma connaissance de JS et jQuery.

Quelqu'un peut-il me dire comment?

HTML

  <ul id="nav_menu"> <li><a class="nav_menu_link nav">Home</a></li> <li class="nav_menu_link_drop nav"> <a class="nav_menu_link">DropDown 1</a> </li> <div id="content1" class="content" style="display: none;"> <ul style="padding: 20px; height: auto;"> <li><a href="#">Item1</a></li><br /> <li><a href="#">Item2</a></li><br /> <li><a href="#">Item3</a></li><br /> <li><a href="#">Item4</a></li> </ul> </div> <li class="nav_menu_link_drop nav"> <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li> <div id="content2" class="content" style="display: none;"> <ul style="padding: 20px; height: auto;"> <li><a href="#">Other</a></li><br /> <li><a href="#">Other Test</a></li> </ul> </div> </ul> 

jQuery

 var stop = true; var hovered; var timeout; $('.nav').hover( function(){ clearTimeout(timeout); stop = true; hovered = this; timeout = setTimeout(function(){ if($(hovered).hasClass('nav_menu_link_drop')){ $('.content').css('z-index',0); $(hovered).next('.content').css('z-index',5); $(hovered).next('.content').slideDown(350); timeout = setTimeout(function(){ $('.content').not($(hovered).next('.content')).slideUp(350); },200); } else $('.content').slideUp(350); },400); }, function(e){ stop = false; clearTimeout(timeout); setTimeout(function(){ if(!stop) $('.content').slideUp(350); },500); } ); $('.content').hover( function(){ stop = true; }, function(){ } ); $('#nav_menu').hover( function(){ }, function(){ timeout = setTimeout(function(){ $('.content').slideUp(350); },200); } ); 

VIOLON

J'ai fait slidedown dans le violon qui fonctionne exactement comme sony.de :

Violin mis à jour (nouveau)

HTML

 <div id="menu"> <ul> <div id="mainMenu"> <li class="menu1">Home</li> <li class="menu2">DropDown1</li> <li class="menu3">DropDown2</li> </div> </ul> <div class="submenu menu2"> <!--menu items--> </div> <div class="submenu menu3"> <!--menu items--> </div> </div> 

CSS

 html,body{ width:100%; height:100%; margin:0px; padding:0px; } #menu{ position:relative; width:100%; height:80px; font-family:sans-serif; } #menu,#menu ul,#menu>ul>#mainMenu>li,#menu div{ display:inline-block; margin-top:0px; } #menu >ul { position:absolute; top:0px; z-index:100; list-style:none; padding:0px; font-size:18px; height: 80px; width: 100%; background: none repeat scroll 0% 0% #FFA500; } #menu ul>#mainMenu>li{ padding: 29px; } #menu ul>#mainMenu>li:hover{ background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.4); color: #FFF; transition: all 0.2s ease 0s; } #menu .submenu{ position:absolute; bottom:0px; width:100%; background-color:white; border:1px solid black; } 

JQuery

 var preClass=""; $('#menu>ul>#mainMenu>li').hover(function(){ var curClass = $(this).attr('class'); if(preClass!=curClass){ $('.submenu[class*='+preClass+']').stop() .animate({'bottom':'0px'}); $('.submenu[class*='+curClass+']').stop() .animate({'bottom':''+(-$('div[class*='+curClass+']').height())+'px'});} preClass=curClass; }); $('#mainMenu').mouseleave(function(){ preClass=""; setTimeout(function(){ if(preClass=="") $('.submenu').stop().animate({'bottom':'0px'}); },350); }); $('#menu').mouseleave(function(){ preClass="" $('.submenu').stop().animate({'bottom':'0px'}); }); $('.submenu').hover(function(){ preClass = $(this).attr('class').replace("submenu ",""); $(this).css({'bottom':''+(-$(this).height())+'px'}); }, function(){ if(preClass!=curClass){ $(this).stop().animate({'bottom':'0px'}); } }); 

Fiddle with delay ajouté comme sony.de

Vérifiez votre code nécessaire jSFiddle

Télécharger le fichier de code de Box

Code HTML

 <ul id="nav_menu"> <li><a class="nav_menu_link">Home</a></li> <li class="nav_menu_link_drop_1"> <a class="nav_menu_link">DropDown 1</a> </li> <div id="content1" style="display: none;"> <ul id="file_menu"> <li><a href="#file">File</a></li> <li><a href="#edit">Edit</a></li> <li><a href="#view">View</a></li> <li><a href="#insert">Insert</a></li> <li><a href="#modify">Modify</a></li> <li><a href="#control">Control</a></li> <li><a href="#debug">Debug</a></li> <li><a href="#window">Window</a></li> <li><a href="#help">Help</a></li> </ul> </div> <li class="nav_menu_link_drop_2"> <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li> <div id="content2" style="display: none;"> <ul id="file_menu"> <li><a href="#file">2 File</a></li> <li><a href="#edit">2 Edit</a></li> <li><a href="#view">2 View</a></li> <li><a href="#insert">2 Insert</a></li> <li><a href="#modify">2 Modify</a></li> <li><a href="#control">2 Control</a></li> <li><a href="#debug">2 Debug</a></li> <li><a href="#window">2 Window</a></li> <li><a href="#help">2 Help</a></li> </ul> </div> </ul> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

Code CSS

 * { margin: 0; padding: 0; } #nav_menu { position: absolute; display: block; height: 80px; width: 100%; background: orange; } #nav_menu li { list-style-type: none; text-decoration: none; vertical-align: middle; height: 80px; display: inline-block; position: relative; } .nav_menu_link { color: black; font-size: 18px; height: 0; font-family: Arial; vertical-align: baseline; position: relative; display: inline-block; height: auto; padding: 29px; } .nav_menu_link:hover { background: rgba(0, 0, 0, 0.4); color: #FFF; transition: all .2s; } .nav_menu_link:hover .arrow.down { border-top-color: #FFF; } #content1:hover { display: block !important; width: 100%; height: auto !important; position: absolute; } #content2:hover { display: block !important; width: 100%; height: auto !important; position: absolute; } #content1, #content2 { width: 100%; height: auto; background: gray; display: none; position: absolute; } #file_menu { border: 1px solid #1c1c1c; } #file_menu li { width: 100%; height: 30px; background-color: #302f2f; } #file_menu li a { font-family: Arial; font-size: 14px; color:#FFFFFF; font-weight: bold; text-decoration:none; padding:5px 10px; display:block; } #file_menu li a:hover { color: #F00880; } 

JQuery

 var link1 = $(".nav_menu_link_drop_1"); var link2 = $(".nav_menu_link_drop_2"); var content1 = $('#content1'); var content2 = $('#content2'); $(link1).hover( function(){ $(content1).slideDown(350); }, function(){ $(content1).slideUp(350); } ); $(link2).hover( function(){ $(content2).slideDown(350); }, function(){ $(content2).slideUp(350); } ); 

Vous pouvez le faire avec seulement CSS . Plus propre, plus simple.

Démo en direct ici : http://jsfiddle.net/4jxph/3031/

Voici le CSS modifié:

 body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #333333; } #container { margin: auto; } #header { background-image: url(images/header.png); background-repeat: no-repeat; height: 42px; width: 490px; margin-bottom: 20px; } #button { height: 32px; width: 184px; margin: auto; } #button:hover .file_menu { max-height: 100000px; opacity: 1; } ul, li { margin:0; padding:0; list-style:none; } .menu_class { border:1px solid #1c1c1c; } .file_menu { max-height: 0; overflow: hidden; opacity: 0; width:100%; border: 1px solid #1c1c1c; transition: all .2s; } .file_menu li { background-color: #302f2f; } .file_menu li a { color:#FFFFFF; text-decoration:none; padding:10px; display:block; } .file_menu li a:hover { padding:10px; font-weight:bold; color: #F00880; } 

Parce que vous le souhaitez, voici la solution JS (plus propre que toute autre réponse):

 var link = $("li[class^=nav_menu_link_drop]"); $(link).hover( function(){ var content = $(this).next('div[id^="content"]'); $(content).stop(true).slideDown(350); }, function(){ var content = $(this).next('div[id^="content"]'); $(content).delay(350).slideUp(350); } ); 

Est-ce que ça fait le travail? http://jsfiddle.net/3aK9k/27/

Si je vous ai donné raison, vous ne voulez pas l'animation, car cela permet de régler simplement l'heure de l'animation sur 0. Vous n'avez pas besoin de .stop() et vous devriez envisager d'utiliser .hover() au lieu du mouseenter et du mouseleave . Voici un lien: http://api.jquery.com/hover/

Exemple:

 $(link1).hover( function(){ $(content1).slideDown(0); }, function(){ $(content1).slideUp(0); } ); 

Voici votre violon avec le code mis à jour: http://jsfiddle.net/3aK9k/2/

EDIT: Je viens de remarquer, mais tu as invalide html, ton div -tag est dans l' ul -tag, le met dans ton li … Seriosly VÉRIFIE ton balisage … Ce n'est pas le seul faux, j'ai remarqué …

EDIT: Uhm … OK … peut-être que vous devriez repenser votre application, seulement parce que cela fonctionne, vous ne devriez pas utiliser le html invalide