Afficher les éléments de fondu dans l’un à côté de l’autre

HTML:

  1.0 Main Menu  1.1 Sub Menu 
 1.2 Sub Menu   1.2.1 Sub Menu
 1.2.2 Sub Menu
 
 
 
 
 
 2.0 Main Menu  2.1 Sub Menu   2.1.1 Sub Menu
 2.1.2 Sub Menu
 2.1.3 Sub Menu
 
 
 
 2.2 Sub Menu

CSS:

  .button_desktop_01{ float: left; width: 20%; cursor: pointer; background: #5882FA } .button_desktop_02 { cursor: pointer; } .FadeItem_01, .FadeItem_02 { display: none; } .FadeItem_02 { float: left; }

jQuery:

 $(document).ready(function() { $(".button_desktop_01, .button_desktop_02").mouseenter(function() { $(this).children(".FadeItem_01, .FadeItem_02").fadeIn(500); }); $(".button_desktop_01, .button_desktop_02").mouseleave(function() { $(this).children(".FadeItem_01, .FadeItem_02").fadeOut(500); }); });

Le code ci-dessus FadeIn / Out des FadeItems qui fonctionne parfaitement jusqu’à présent. Maintenant, je souhaite que

apparaisse juste à côté de

J’ai essayé de faire cela avec le float: left; propriété sur la classe .FadeItem_02 mais cela ne fonctionne pas.

Comment dois-je modifier mon code pour y parvenir? Idéalement, il devrait apparaître dans le même style (taille, couleur, etc.) qu’aujourd’hui, mais au lieu d’apparaître au- dessous de

il devrait apparaître juste à côté .

Vous pouvez également trouver tous les codes ici: https://jsfiddle.net/gycp99zj/6/

Vous pouvez utiliser ces parameters:

  .button_desktop_02 { cursor: pointer; position: relative; } .FadeItem_01, .FadeItem_02 { display: none; } .FadeItem_01 { position: relative; } .FadeItem_02 { position: absolute; left: 120px; top: 0; width: 120px; background: #5882FA }

Le positionnement absolu fait sortir le sous-sous-menu du sous-menu, la position relative de leur parent agit comme une “ancre”, les parameters de position (haut, gauche) déterminent où ils apparaissent et il a également besoin d’une largeur.

Ce code dans un jsfiddle: https://jsfiddle.net/avc7pr8a/1/

Essayez ce code

 .FadeItem_02 { position:relative; left:100%; background: #5882FA }

Avez-vous voulu dire?

 $(document).ready(function() { $(".button_desktop_01, .button_desktop_02").mouseenter(function() { $(this).children(".FadeItem_01, .FadeItem_02").fadeIn(500); }); $(".button_desktop_01, .button_desktop_02").mouseleave(function() { $(this).children(".FadeItem_01, .FadeItem_02").fadeOut(500); }); });

  .button_desktop_01{ float: left; width: 20%; cursor: pointer; background: #5882FA } .button_desktop_02 { cursor: pointer; } .FadeItem_01, .FadeItem_02 { display: none; } .FadeItem_02 { position:relative; left:50%; background: #5882FA } .button_desktop_02 { cursor: pointer; position: relative; } .FadeItem_01, .FadeItem_02 { display: none; } .FadeItem_01 { position: relative; } .FadeItem_02 { position: absolute; left: 110px; top: 0; width: 120px; background: #5882FA }

   1.0 Main Menu  1.1 Sub Menu 
 1.2 Sub Menu   1.2.1 Sub Menu
 1.2.2 Sub Menu
 
 
 
 
 
 2.0 Main Menu  2.1 Sub Menu   2.1.1 Sub Menu
 2.1.2 Sub Menu
 2.1.3 Sub Menu
 
 
 
 2.2 Sub Menu