Fonction fadein pour faire apparaitre sous menu

Sujet résolu

20 février 2018 à 19:21:52

Salut,

Question de débutant qui débute

Je cherche à faire apparaître en fade in un sous-menu vertical au survol des <li> de mon menu principal

J'ai d'abord essayé ceci en créant 2 classes différentes dans le css mais cela ne fonctionne pas vu que je cible le même élément : le sous-menu

$(function(){
$('.sousmenu').mouseover(function(){
   $(this).addClass('sousmenu_fadein');
});

. Je cherche une fonction qui me permettrait de modifier mon sous-menu au survol de mes li, pas comme ici où les 2 classes sont affectées au même élément

Voici mon css

.sousmenu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  padding: 0;
  z-index: 10;
}

Je ne viens pas chercher une réponse prémachée, aussi même un lien vers un cours adéquat sera le bienvenu.

Merci pour votre aide

Oliv

Sanapag

21 février 2018 à 15:16:09

Yop,

Je suis pas complètement sur d'avoir compris ton problème mais je te propose ce que j'ai fait dit moi si ça répond a ton problème

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Document sans nom</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
		<script type="text/javascript">
			$(document).ready(function() {
			    $('.sousMenu').hide(); // on cache les champ par défaut
			     
				$('.menu').mouseover(function() {
						var sousMenu = $(this).data('id');
						$(sousMenu).fadeIn('slow');
				});
			});
		</script>
	</head>
 
	<body>
		<ul>
			<li class="menu" data-id="#sousMenu1">truc<div id="sousMenu1" class="sousMenu">ton sous menu 1</div></li>
			<li class="menu" data-id="#sousMenu2">bidule<div id="sousMenu2" class="sousMenu">ton sous menu 2</div></li>
			<li class="menu" data-id="#sousMenu3">machin<div id="sousMenu3" class="sousMenu">ton sous menu 3</div></li>
		</ul>
	</body>

J'ai tout d'abord mit les li et mit une div avec les sous menus en dessous (sa tu vois comment tu veux)

Dans tes li j'ai rajouter des data-id, en gros je les utilises bah pour stocker les id relatif a l'élément sur lequel je suis.

Dans mon Jquery du coup on retrouve le mouseover mais ici on récupère l'id du sous menu visé et on le fait ensuite apparaître

Préviens moi si tu as des questions ou si j'ai répondu complètement a coté de la plaque

Olchiba

21 février 2018 à 18:30:44

Yep !

Merci pour ta réponse très complète, mon html est pareil à ce que tu as écrit mais en plus simple, car mes sous menus possèdent tous la même classe qui applique les mêmes propriétés css, donc pas besoin d'id

J'avais essayé de reproduire ton code dans un exemple simplifié à l'extrême ici vite fait : https://jsfiddle.net/ozxofs9k/40/

Malgré ça je ne suis pas fichu de m'en sortir, je m'y recollerai ce soir ! Je suis comme beaucoup de débutants trop impatient !

Merci de ton aide, je vais persévérer

-
Edité par Olchiba 21 février 2018 à 21:49:32

Sanapag

22 février 2018 à 7:57:39

Je ne sais pas comment marche jsfiddle et si le lien fait sauter les librairies mais sinon je pense juste que ton code ne marche pas a cause de la librairie qui n'est pas ajouté (jQuery)

Olchiba

22 février 2018 à 21:54:20

En fait j'y ai pensé, mais même en invoquant la librairie ça ne marche pas...Ca sera le challenge du we, merci de m'avoir apporté ton aide en tout cas, je pense que je suis pas loin du but !

Sanapag

23 février 2018 à 9:19:36

Désolé je me suis trompé c'était pas du tout la librairie ^^''

Je te conseille de faire attention a la casse

N'hésite pas a faire des alert pour savoir ce qu'il y a dans tes variables

Et pour finir je te conseille d'utiliser cette norme pour nommer fonction et variables

ex :

premierMotOnMetLaMajSeulementQuandOnCommenceUnNouveauMot

regarde ca seulement si tu trouve vraiment pas : https://jsfiddle.net/Sanapag/ozxofs9k/65/

-
Edité par Sanapag 23 février 2018 à 9:20:14

Olchiba

24 février 2018 à 9:20:27

Merci encore Sanapag pour le temps consacré, j'ai mis le sujet en résolu car ça marche enfin, mais je t'avoue que j'ai eu recours à ton code...car j'ai cherché pas mal, mais j'ai décidément aucune notion solide en js, c'est pourquoi je me suis lancé dans le cours d'OC

Je suivrai tes conseils, utiliser des alert et écrire les variables correctement en camel case...

Juste une dernière question, à quoi fait référence le ".sous" dans la variable SousMenu ?

Merci encore