IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jquery pb menu deroulant


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    1 349
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 349
    Par défaut jquery pb menu deroulant
    étant novice en js je me suis mis à tester jquery et j'ai refait ce tuto:

    http://dmouronval.developpez.com/tut...ry/menu-anime/

    donc mon menu marche bien mais j'ai était obligé de faire une fonction jquery par item et je n'arrive pas à résoudre ça

    voici le html:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div id="menu_l">
    				<h4 class="menu_head1"><img class="droite_menu" src="img/downsimple.png">Accés</h4>
    				<ul class="menu_body1">
    					<li><a href="#">National</a></li>
    					<li><a href="#">UPR</a></li>
    					<li><a href="#">NRA</a></li>
    					<li><a href="#">DSLAM</a></li>
    				</ul>
    				<h4 class="menu_head2"><img class="droite_menu" src="img/downsimple.png">Trafic</h4>
    				<ul class="menu_body2">
    					<li><a href="#">National</a></li>
    					<li><a href="#">UPR</a></li>
    					<li><a href="#">NRA</a></li>
    					<li><a href="#">DSLAM</a></li>
    				</ul>
    			</div>

    et le js

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    		$(document).ready(function () {
    			//$("ul.menu_body li:even").addClass("alt");  alternance couleur
    			$('h4.menu_head1').click(function () {
    				$('ul.menu_body1').slideToggle('medium');
    			});
    			$('h4.menu_head2').click(function () {
    			$('ul.menu_body2').slideToggle('medium');
    			});
    		});
    donc j'aimerais pouvoir identifier sur quel menu on clique et faire une seule fonction et ainsi une seule classe menu head

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonjour.

    Voici un exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Animated Drop Down Menu with jQuery</title>
    	<link href="css/style.css" rel="stylesheet" type="text/css" />
    	<style type="text/css">
    		#menuHead1, #menuHead2, #menuHead3 {
    			margin-left:12px;
    			margin-bottom:12px;
    			display:block;
    		}
    	</style>
    	<script type="text/javascript" src="jsfiles/jquery-1.3.2.min.js"></script>
    	<script type="text/javascript">
    		function fqqchose(jqueryObject){
    			console.log("Ouverture ou fermeture du menu " + jqueryObject[0].id);
    		}
     
    		$(document).ready(function () {
    			$("ul.menu_body li:even").addClass("alt");
     
    			$('ul.menu_body li a').mouseover(function () {
    				$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    			});
     
    			$('ul.menu_body li a').mouseout(function () {
    				$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    			});
     
    			$('img.menu_head').click(function(){
    				var obj = $(this).parent();
     
    				obj.find('ul.menu_body').slideToggle('medium');
     
    				fqqchose(obj);
    			});
     
    		});
    	</script>
    </head>
    <body>
    	<div class="container">
     
    		<span id="menuHead1">
    			<img src="images/navigate.png" width="184" height="32" class="menu_head" />
    			<ul class="menu_body">
    				<li><a href="#">About Us</a></li>
    				<li><a href="#">Portfolio</a></li>
    				<li><a href="#">Clients</a></li>
    				<li><a href="#">Blog</a></li>
    				<li><a href="#">Support Forums</a></li>
    				<li><a href="#">Gallery</a></li>
    				<li><a href="#">Contact Us</a></li>
    			</ul>
    		</span>
     
    		<br />
     
    		<span id="menuHead2">
    			<img src="images/navigate.png" width="184" height="32" class="menu_head" />
    			<ul class="menu_body">
    				<li><a href="#">About Us</a></li>
    				<li><a href="#">Portfolio</a></li>
    				<li><a href="#">Clients</a></li>
    				<li><a href="#">Blog</a></li>
    				<li><a href="#">Support Forums</a></li>
    				<li><a href="#">Gallery</a></li>
    				<li><a href="#">Contact Us</a></li>
    			</ul>
    		</span>
     
    		<br />
     
    		<span id="menuHead3">
    			<img src="images/navigate.png" width="184" height="32" class="menu_head" />
    			<ul class="menu_body">
    				<li><a href="#">About Us</a></li>
    				<li><a href="#">Portfolio</a></li>
    				<li><a href="#">Clients</a></li>
    				<li><a href="#">Blog</a></li>
    				<li><a href="#">Support Forums</a></li>
    				<li><a href="#">Gallery</a></li>
    				<li><a href="#">Contact Us</a></li>
    			</ul>
    		</span>
     
    	</div>	
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. [CSS-Javascript] Menu déroulant
    Par JeromeR dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 21/10/2004, 17h07
  2. [VBA-E] Barre d'outils et menu déroulants
    Par Tcmat dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 17/08/2004, 21h51
  3. [LG]Menu déroulant sous Pascal
    Par Apprenti Sorcier dans le forum Langage
    Réponses: 8
    Dernier message: 26/03/2004, 13h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo