[ Résolu ] Menu déroulant deux fois?

Question

SirPsy

24 Jun 2011 à 01:41

Bonjour,

Étant débutant en codage etc., j'ai encore un peu de mal avec jQuery.
Je souhaites créer mon portfolio afin d'y exposer mes créations et j'aurais besoin de créer plusieurs menus déroulants (je ne vois que cette technique).

J'aurais par exemple:
_Graphisme:
1
2
3

_Photographie:
1
2
3

Une amie m'a donc filée un lien vers ceci http://dmouronval.developpez.com/tutoriels/javascript/jquery/menu-anime/fichiers/example.html
Donc j'ai réussi à appliquer le truc à l'aide du tuto, mais je n'arrive à le charger que sur un seul truc "graphisme" par exemple, impossible de l'appliquer à Photographie...

Auriez vous une idée de mon problème?

Cordialement, Ludovic
Modifié par SirPsy (24 Jun 2011 - 22:52)

n3k0

24 Jun 2011 à 10:40

Bonjour,

pour pouvoir te répondre précisément, peux-tu nous donner le code javascript et le code html en question ?
Modifié par n3k0 (24 Jun 2011 - 10:49)

SirPsy

24 Jun 2011 à 11:37

Bonjour, merci de ta réponse,

le code Javascript c'est ce que j'ai mis dans mon css? ou le fichier jQuery téléchargé auparavant?
désolé je ne maitrise pas encore totalement le langage Smiley ohwell

.

n3k0

24 Jun 2011 à 11:47

En fait, il nous faudrait :
- le code HTML de ton menu ( entier, avec tes différents menu )
- le code Javascript censé créer ton menu déroulant

De cette façon, on pourra te dire pourquoi l'animation ne s'applique pas à tous tes menus.

lddsoft

24 Jun 2011 à 11:59

Bonjour,

Teste un peu ceci et dis si c'est ce que tu cherches. Il faut aussi créer les images "graphisme.png" et "photographie.png" aux bonnes dimensions!
graphisme.png : http://imageshack.us/photo/my-images/860/graphisme.png/
photographie.png : http://imageshack.us/photo/my-images/807/photographie.png/

N.B.: il y a certainement moyen d'améliorer le code jQuery!

La page HTML:


<!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>Menu d&eacute;roulant anim&eacute; avec jQuery</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsfiles/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
	$('ul.menu_body').slideToggle('medium');
    });
	$('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 );
    });

	$("ul.menu_body2 li:even").addClass("alt");
    $('img.menu_head2').click(function () {
	$('ul.menu_body2').slideToggle('medium');
    });
	$('ul.menu_body2 li a').mouseover(function () {
	$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
	$('ul.menu_body2 li a').mouseout(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
	
});
</script>

</head>

<body>
<div class="container">
	<img src="images/graphisme.png" width="184" height="32" class="menu_head" alt="" />
	<ul class="menu_body">
		<li><a href="#">Qui sommes-nous ?</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Forums</a></li>
		<li><a href="#">Gallerie</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<br />
	<img src="images/photographie.png" width="184" height="32" class="menu_head2" alt="" />
	<ul class="menu_body2">
		<li><a href="#">Qui sommes-nous ?_2</a></li>
		<li><a href="#">Portfolio_2</a></li>
		<li><a href="#">Clients_2</a></li>
		<li><a href="#">Blog_2</a></li>
		<li><a href="#">Forums_2</a></li>
		<li><a href="#">Gallerie_2</a></li>
		<li><a href="#">Contact_2</a></li>
	</ul>
</div>
<p><a href="../" style="color: white; font-weight: bold">Retour &agrave; l'article</a></p>
</body>
</html>

Le CSS :

@charset "utf-8";
/* CSS Document */

body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul, li{margin:0; padding:0; list-style:none;}

.menu_head, .menu_head2{border:1px solid #998675;}

.menu_body , .menu_body2{display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li, .menu_body2 li{background:#493e3b;}
.menu_body li.alt, .menu_body2 li.alt{background:#362f2d;}
.menu_body li a, .menu_body2 li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body li a:hover, .menu_body2 li a:hover{padding:15px 10px; font-weight:bold;}

Modifié par lddsoft (24 Jun 2011 - 12:19)

SirPsy

24 Jun 2011 à 15:39

Ha! Le code proposé par lddsoft fonctionne chez moi Smiley smile

.
Est-ce parce qu'il a tout regroupé dans une div? La taille des images joue t'elle un rôle?
Je pense adapter ce code au mien, mais j'aimerais comprendre mon erreur afin de ne plus la reproduire donc je vous montre mon code.

En tout cas merci beaucoup pour votre aide Smiley smile

.

HTML

<!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>Ludovic François</title>
<link href="accueil.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsfiles/jquery.js"></script>




<script type="text/javascript">
$(document).ready(function () {
    $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
        $('ul.menu_body').slideToggle('medium');
    });
    $('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 );
    });
});
</script>





<script type="text/javascript">
$(document).ready(function () {
    $("ul.menu_p li:even").addClass("alt");
    $('img.menu_photo').click(function () {
        $('ul.menu_p').slideToggle('medium');
    });
    $('ul.menu_p li a').mouseover(function () {
        $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
    $('ul.menu_p li a').mouseout.(function () {
        $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>


</head>

<body>

<div id="goutte"><img src="image/goutte.png" /></div>


<img src="image/DG.png" width="169" height="23" class="menu_head" />

<div class="design">

<ul class="menu_body">
    <li><a href="#">Qui sommes-nous ?</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Forums</a></li>    
    <li><a href="#">Gallerie</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>

<div class="photographie">

<img src="image/P.png" width="169" height="23" class="menu_photo" />

<ul class="menu_p">
    <li><a href="#">Unknown</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Clients</a></li>

</ul>
</div>


</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

body
{
	background-image:url(image/logo.png);
	background-repeat:no-repeat;
	background-position: 20px 0px;
	background-attachment: fixed;
}

#goutte{
	position: absolute;
	margin-left: 258px;
	margin-top: 52px;
	left: -38px;
	top: 26px;
}



/**NAVIGUATIONDG**/

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
ul, li{
	margin:0;
	padding:0;
	list-style:none;
}

.menu_head{
	margin-top: 150px;
	margin-left: 35px;
	
}

.menu_body{
	display:none;
	width:184px;
}


.menu_body li a:hover{
    padding:15px 10px;
    font-weight:bold;
}



/**NAVIGUATION PHOTOGRAPHIE**/



.menu_photo{
	margin-top: 10px;
	margin-left: 35px;
}

.menu_p{
	display:none;
	width:184px;
}


.menu_p li a:hover
{
    padding:15px 10px;
    font-weight:bold;
}

Les images (au cas où):
http://d12.e-loader.net/s0wEgj73Re.png
http://d10.e-loader.net/nMmSE2BvhF.png
http://d5.e-loader.net/67cN360cXJ.png
http://d14.e-loader.net/swA2UcsZy6.png

lddsoft

24 Jun 2011 à 16:20

C'est bien simple, tu as commis deux fois la même faute de syntaxe dans le script js:

... mouseout.(function () {

au lieu de :

... mouseout(function () {

Vois-tu où est l'erreur ?

SirPsy

24 Jun 2011 à 16:50

Ah oui, merci beaucoup Smiley smile

. Je viens de modifier et ça marche. C'est étonnant car j'en avais un qui fonctionner. J'ai du mal à comprendre ça par contre.
J'ai repris le code qui était fournit sur le lien dans mon premier post', j'avoue que sans ton intervention je n'aurais jamais trouvé.

Merci encore, d'avoir pris de ton temps Smiley smile

.
Modifié par SirPsy (24 Jun 2011 - 16:50)

Sujet clos