Question menu accordeon Jquery

Question menu accordeon Jquery - HTML/CSS - Programmation

Marsh Posté le 19-02-2009 à 06:42:06    

Bonjour,
 
j'ai actuellement un site avec une galerie fonctionnant avec lightbox et jquery
 
je voudrais diviser ma galerie en thèmes et que la galerie correspondante s'ouvre en fonction du thème choisit
 
donc en gros autant de menus UL qu'il ya de thèmes avec titre cliquable.
Donc un menu est ouvert par défaut au chargement de la page, si on clique sur un autre thème, le menu se ferme progressivement et c'est l'autre UL (du thème choisit) qui s'ouvre également progressivement
 
j'ai déjà testé des trucs, malheureusement je n'arrive pas tout à fait à faire ce que je veux  
 
j'avais fais des tests avec des UL= class  mais évidemment les nom de thèmes vont êtres différents
 
donc voila si vous pouviez me filer un petit coup de main vu que le javascript je connais pas trop (et en espérant avoir été assez clair), ce serait cool
 
 
merci d'avance
Tom
 
 
ps: l'adresse du site: www.photoericbrenard.be, et l'adresse du site de test : http://www.photoericbrenard.be/test/galeries.php
 
le code :  
 
 

Code :
  1. <ul class="galerie">  <a href="" "onClick='montre();'"><span> test </span></a>
  2.      <li class="photo"> <a href="photos/1.jpg" <img src="photos/tumbs/thumb_1.jpg" alt="photo1"/></a></li>
  4.      <li class="photo"> <a href="photos/2.jpg" <img src="photos/tumbs/thumb_2.jpg" alt="photo2"/></a></li>
  5.      <li class="photo"> <a href="photos/3.jpg" <img src="photos/tumbs/thumb_3.jpg" alt="photo3"/></a></li>
  6.      <li class="photo"> <a href="photos/4.jpg" <img src="photos/tumbs/thumb_4.jpg" alt="photo4"/></a></li>
  7.      <li class="photo"> <a href="photos/5.jpg" <img src="photos/tumbs/thumb_5.jpg" alt="photo5"/></a></li>
  8.      <li class="photo"> <a href="photos/6.jpg" <img src="photos/tumbs/thumb_6.jpg" alt="photo6"/></a></li>
  9.      <li class="photo"> <a href="photos/7.jpg" <img src="photos/tumbs/thumb_7.jpg" alt="photo7"/></a></li>
  11.      <li class="photo"> <a href="photos/8.jpg" <img src="photos/tumbs/thumb_8.jpg" alt="photo7"/></a></li>
  12.      <li class="photo"> <a href="photos/9.jpg" <img src="photos/tumbs/thumb_9.jpg" alt="photo7"/></a></li>
  13.      <li class="photo"> <a href="photos/10.jpg"<img src="photos/tumbs/thumb_10.jpg" alt="photo7"/></a></li>
  14.     </ul>
  15.     <h3> Test2</h3>
  16.     <ul class="galerie">  <a href="" "onClick='montre();'"><span> test2 </span></a>
  18.      <li class="photo"> <a href="photos/1.jpg" <img src="photos/tumbs/thumb_1.jpg" alt="photo1"/></a></li>
  19.      <li class="photo"> <a href="photos/2.jpg" <img src="photos/tumbs/thumb_2.jpg" alt="photo2"/></a></li>
  20.      <li class="photo"> <a href="photos/3.jpg" <img src="photos/tumbs/thumb_3.jpg" alt="photo3"/></a></li>
  21.      <li class="photo"> <a href="photos/4.jpg" <img src="photos/tumbs/thumb_4.jpg" alt="photo4"/></a></li>
  22.      <li class="photo"> <a href="photos/5.jpg" <img src="photos/tumbs/thumb_5.jpg" alt="photo5"/></a></li>
  23.      <li class="photo"> <a href="photos/6.jpg" <img src="photos/tumbs/thumb_6.jpg" alt="photo6"/></a></li>
  25.      <li class="photo"> <a href="photos/7.jpg" <img src="photos/tumbs/thumb_7.jpg" alt="photo7"/></a></li>
  26.      <li class="photo"> <a href="photos/8.jpg" <img src="photos/tumbs/thumb_8.jpg" alt="photo7"/></a></li>
  27.      <li class="photo"> <a href="photos/9.jpg" <img src="photos/tumbs/thumb_9.jpg" alt="photo7"/></a></li>
  28.      <li class="photo"> <a href="photos/10.jpg"<img src="photos/tumbs/thumb_10.jpg" alt="photo7"/></a></li>
  29.     </ul>


 


---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 19-02-2009 à 06:42:06   

Reply

Marsh Posté le 19-02-2009 à 18:03:58    

<a href="" "onClick='montre();'">
 
=> il faut quelques modifs
il y a des guillemets en trop
il faut mettre qq chose dans le href => href="#"
il faut stoper la propagation de l'evenement clic sur le lien
<a href="#" onClick="montre();return false;">
et il faut dire sur quelle liste tu travailes, donc rajouter des id à tes galleries par exemple et faire :
<a href="#" onClick="montre('galerie1');return false;">


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 20-02-2009 à 03:38:04    

Vu que tu utilises JQuery pourquoi ne pas faire :
 

Code :
  1. $("ul span" ).click(function() {
  2.   $(this).next("li" ).show();
  3. }


 
Pas sûr que ce soit la bonne syntaxe, je vais essayer ça...

Reply

Marsh Posté le 20-02-2009 à 09:02:50    

Code :
  1. $(document).ready(function(){
  2.     $("ul span" ).click(function(e) { // selectionne toutes les balises span qui se trouvent entre des balises ul
  3.       var id_ul = $(this).parents("ul" ).attr("id" ); // pour connaître l'id de la balise ul
  4.       $("#" + id_ul + " li" ).slideToggle("slow" ); // affichera/cachera toutes les balises li contenues dans une balise ayant pour id id_ul.
  5.       e.preventDefault(); // équivaut à un return false
  6.     });
  7. });
 

Voila qui devrait fonctionner (à mettre à la place de ta fonction et du document.onload).

 

À la place de slideToggle("slow" ), tu peux mettre slideToggle() ou slideToggle("fast" ) ou encore utiliser toggle().

 

Plus d'infos ici : http://docs.jquery.com/Effects

 

PS : Tu peux supprimer les <a href...>

 

edit : Pour le site il faudra mettre $("#galeries ul span" ).click... au lieu de $("ul span" ).click...


Message édité par kurt11 le 20-02-2009 à 09:35:47
Reply

Marsh Posté le 20-02-2009 à 12:30:56    

merci je vais tester ca
 
J'ai un autre truc mystique a vous soumettre :
 
l'image que j'utilise pour mon footer est un PNG transparent avec bords arrondis
 
sauf que à l'affichage il est pas arrondi du tout.
 
Par contre quand je met "afficher l'image de fond", le fond transparent apparait clairement et donc les  bords arrondis aussi
 
c'est sur www.photoericbrenard.be/test
 
si vous aviez une explication rationnelle pour expliquer ca, ca m'arrangerait ^^


---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 20-02-2009 à 13:22:38    

bon ben ca marche pas  :whistle:  
 
mais je me doute que ca vient du span et l'appel de la fonction jquery
 
 
voici mon code :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="DC.title" content="Eric Brenard - Photographe"/>
  7. <meta name="description" content="Eric Brenard Photographe, reportages, d�veloppement photos, photos d'identit�s, etc. Immortalise les �v�nemements"/>
  8. <meta name="keywords"  content="photo eric brenard, eric brenard, brenard, photographie, eric, photographie, photo, numerique, d�veloppement, reportage, rebecq, appareil photo" />
  9. <meta name="Identifier-url" content="http://www.photoericbrenard.be"/>
  10. <meta name="Abstract" content="Site web d'Eric Brenard - Photographe "/>
  12. <meta name="Category" content="Photographie, photos, Rebecq"/>
  14. <title>Eric Brenard | Photographe</title>
  16. <link href="style.css" rel="stylesheet" type="text/css" />
  17. <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
  18. <!--[if IE 6]> <link href="styleie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
  19. <style type="text/css" media="screen">
  20.         @import url(jquery.lightbox-0.3.css);
  21. </style>
  24. <script type="text/javascript" src="js/jquery.js"></script>
  26. <script type="text/javascript" src="js/jquery.lightbox-0.3.js"></script>
  27. <script type="text/javascript">$(document).ready(function(){$('.photo a').lightBox();})</script>
  28. <script type="text/javascript">
  29. <!--
  30. $(document).ready(function(){
  31.    $(".galerie ul span" ).click(function(e) { // selectionne toutes les balises span qui se trouvent entre des balises ul
  32.    var class_ul = $(this).parents("ul" ).attr("class" ); // pour connaître l'id de la balise ul
  33.     $("#" + class_ul + " li" ).slideToggle("slow" ); // affichera/cachera toutes les balises li contenues dans une balise ayant pour id id_ul.
  34.         e.preventDefault(); // équivaut à un return false
  35.    });
  36. });
  37. -->
  38.   </script>
  41.    
  44. </head>
  45. <body>
  47. <!-- logo et menu-->
  48. <div id="banner">
  49. <a href="index.php"><img id="logo"  src="images/logo.png" alt="logo" ></a>
  51. <ul id="menu">
  52.     <li><a href="prix.php">Prix</a></li>
  53.     <li><a href="galeries.php">Galeries</a></li>
  54.     <li><a href="infos.php">Infos - Magasin</a></li>
  55.     <li><a href="contact.php">Contact</a></li>
  56. </ul>
  57. </div>
  59. <!-- fin banniere
  60. et image de transition-->
  61. <img id="contenu_haut" src="images/top.png" alt="image de transition"/>     
  62.  <!-- contenu global-->
  63.     <div id="contenu">
  64.  <h1> Galeries </h1>
  65.   <!-- contenu proprement dit-->
  66.         <div id="contenu_centre">
  67.                 <p class="mode_emploi">Cliquez sur une image pour l'agrandir</p>
  68.     <ul class="galerie">  <a span onClick="montre();"> test </span></a>
  70.      <li class="photo"> <a href="photos/1.jpg" <img src="photos/tumbs/thumb_1.jpg" alt="photo1"/></a></li>
  71.      <li class="photo"> <a href="photos/2.jpg" <img src="photos/tumbs/thumb_2.jpg" alt="photo2"/></a></li>
  72.      <li class="photo"> <a href="photos/3.jpg" <img src="photos/tumbs/thumb_3.jpg" alt="photo3"/></a></li>
  73.      <li class="photo"> <a href="photos/4.jpg" <img src="photos/tumbs/thumb_4.jpg" alt="photo4"/></a></li>
  74.      <li class="photo"> <a href="photos/5.jpg" <img src="photos/tumbs/thumb_5.jpg" alt="photo5"/></a></li>
  75.      <li class="photo"> <a href="photos/6.jpg" <img src="photos/tumbs/thumb_6.jpg" alt="photo6"/></a></li>
  77.      <li class="photo"> <a href="photos/7.jpg" <img src="photos/tumbs/thumb_7.jpg" alt="photo7"/></a></li>
  78.      <li class="photo"> <a href="photos/8.jpg" <img src="photos/tumbs/thumb_8.jpg" alt="photo7"/></a></li>
  79.      <li class="photo"> <a href="photos/9.jpg" <img src="photos/tumbs/thumb_9.jpg" alt="photo7"/></a></li>
  80.      <li class="photo"> <a href="photos/10.jpg"<img src="photos/tumbs/thumb_10.jpg" alt="photo7"/></a></li>
  81.     </ul>
  82.     <h3> Test2</h3>
  84.     <ul class="galerie">   <a span onClick="montre();"> test2 </span></a>
  85.      <li class="photo"> <a href="photos/1.jpg" <img src="photos/tumbs/thumb_1.jpg" alt="photo1"/></a></li>
  86.      <li class="photo"> <a href="photos/2.jpg" <img src="photos/tumbs/thumb_2.jpg" alt="photo2"/></a></li>
  87.      <li class="photo"> <a href="photos/3.jpg" <img src="photos/tumbs/thumb_3.jpg" alt="photo3"/></a></li>
  88.      <li class="photo"> <a href="photos/4.jpg" <img src="photos/tumbs/thumb_4.jpg" alt="photo4"/></a></li>
  90.      <li class="photo"> <a href="photos/5.jpg" <img src="photos/tumbs/thumb_5.jpg" alt="photo5"/></a></li>
  91.      <li class="photo"> <a href="photos/6.jpg" <img src="photos/tumbs/thumb_6.jpg" alt="photo6"/></a></li>
  92.      <li class="photo"> <a href="photos/7.jpg" <img src="photos/tumbs/thumb_7.jpg" alt="photo7"/></a></li>
  93.      <li class="photo"> <a href="photos/8.jpg" <img src="photos/tumbs/thumb_8.jpg" alt="photo7"/></a></li>
  94.      <li class="photo"> <a href="photos/9.jpg" <img src="photos/tumbs/thumb_9.jpg" alt="photo7"/></a></li>
  95.      <li class="photo"> <a href="photos/10.jpg"<img src="photos/tumbs/thumb_10.jpg" alt="photo7"/></a></li>
  97.     </ul>
  99.   </div>
  100.   <!-- fin contenu-->
  101.     </div>
  102.      <!-- fin conteneur-
  103.   et debut footer-->
  105. <div id="footer">
  106.    <p>  Eric Brenard | Photographe | 2008-2009 - tous droits r&eacute;serv&eacute;s | Site valide XHTML 1.0 et CSS 2</p>
  107.                
  109. </div></body>
  111. </html>

Message cité 1 fois
Message édité par tompouss le 20-02-2009 à 13:26:34

---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 20-02-2009 à 14:41:06    

tompouss a écrit :

Code :
  1. <img id="logo"  src="images/logo.png" alt="logo" >
  2. [...]
  3. <p>  Eric Brenard | Photographe | 2008-2009 - tous droits r&eacute;serv&eacute;s | Site valide XHTML 1.0 et CSS 2</p>



 [:croquignol]

Reply

Marsh Posté le 20-02-2009 à 15:11:58    

<a span onClick="montre();">  
 
c'est pas trop une balise valide xhtml !!


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 20-02-2009 à 16:25:00    

c'est la version test
 
spour ca !    :o
 
la première version est valide  
 
 
(mauvaise langues  :D )
 
bon alors je modifie quoi?
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="DC.title" content="Eric Brenard - Photographe"/>
  7. <meta name="description" content="Eric Brenard Photographe, reportages, d�veloppement photos, photos d'identit�s, etc. Immortalise les �v�nemements"/>
  8. <meta name="keywords"  content="photo eric brenard, eric brenard, brenard, photographie, eric, photographie, photo, numerique, d�veloppement, reportage, rebecq, appareil photo" />
  9. <meta name="Identifier-url" content="http://www.photoericbrenard.be"/>
  10. <meta name="Abstract" content="Site web d'Eric Brenard - Photographe "/>
  12. <meta name="Category" content="Photographie, photos, Rebecq"/>
  14. <title>Eric Brenard | Photographe</title>
  16. <link href="style.css" rel="stylesheet" type="text/css" />
  17. <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
  18. <!--[if IE 6]> <link href="styleie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
  19. <style type="text/css" media="screen">
  20.         @import url(jquery.lightbox-0.3.css);
  21. </style>
  24. <script type="text/javascript" src="js/jquery.js"></script>
  26. <script type="text/javascript" src="js/jquery.lightbox-0.3.js"></script>
  27. <script type="text/javascript">$(document).ready(function(){$('.photo a').lightBox();})</script>
  28. <script type="text/javascript">
  29. <!--
  30. $(document).ready(function(){
  31.    $(".galerie ul span" ).click(function(e) { // selectionne toutes les balises span qui se trouvent entre des balises ul
  32.    var class_ul = $(this).parents("ul" ).attr("class" ); // pour conna�tre l'id de la balise ul
  33.     $("#" + class_ul + " li" ).slideToggle("slow" ); // affichera/cachera toutes les balises li contenues dans une balise ayant pour id id_ul.
  34.         e.preventDefault(); // �quivaut � un return false
  35.    });
  36. });
  37. -->
  38.   </script>
  41.    
  44. </head>
  45. <body>
  47. <!-- logo et menu-->
  48. <div id="banner">
  49. <a href="index.php"><img id="logo"  src="images/logo.png" alt="logo" ></a>
  51. <ul id="menu">
  52.     <li><a href="prix.php">Prix</a></li>
  53.     <li><a href="galeries.php">Galeries</a></li>
  54.     <li><a href="infos.php">Infos - Magasin</a></li>
  55.     <li><a href="contact.php">Contact</a></li>
  56. </ul>
  57. </div>
  59. <!-- fin banniere
  60. et image de transition-->
  61. <img id="contenu_haut" src="images/top.png" alt="image de transition"/>     
  62.  <!-- contenu global-->
  63.     <div id="contenu">
  64.  <h1> Galeries </h1>
  65.   <!-- contenu proprement dit-->
  66.         <div id="contenu_centre">
  67.                 <p class="mode_emploi">Cliquez sur une image pour l'agrandir</p>
  68.     <ul class="galerie">  <a href="#" onClick="montre();"> <span>  test</span> </a>
  70.      <li class="photo"> <a href="photos/1.jpg" <img src="photos/tumbs/thumb_1.jpg" alt="photo1"/></a></li>
  71.      <li class="photo"> <a href="photos/2.jpg" <img src="photos/tumbs/thumb_2.jpg" alt="photo2"/></a></li>
  72.      <li class="photo"> <a href="photos/3.jpg" <img src="photos/tumbs/thumb_3.jpg" alt="photo3"/></a></li>
  73.      <li class="photo"> <a href="photos/4.jpg" <img src="photos/tumbs/thumb_4.jpg" alt="photo4"/></a></li>
  74.      <li class="photo"> <a href="photos/5.jpg" <img src="photos/tumbs/thumb_5.jpg" alt="photo5"/></a></li>
  75.      <li class="photo"> <a href="photos/6.jpg" <img src="photos/tumbs/thumb_6.jpg" alt="photo6"/></a></li>
  77.      <li class="photo"> <a href="photos/7.jpg" <img src="photos/tumbs/thumb_7.jpg" alt="photo7"/></a></li>
  78.      <li class="photo"> <a href="photos/8.jpg" <img src="photos/tumbs/thumb_8.jpg" alt="photo7"/></a></li>
  79.      <li class="photo"> <a href="photos/9.jpg" <img src="photos/tumbs/thumb_9.jpg" alt="photo7"/></a></li>
  80.      <li class="photo"> <a href="photos/10.jpg"<img src="photos/tumbs/thumb_10.jpg" alt="photo7"/></a></li>
  81.     </ul>
  82.     <h3> Test2</h3>
  84.     <ul class="galerie">   <a href="#" onClick="montre();"> <span>  test2</span> </a>
  85.      <li class="photo"> <a href="photos/1.jpg" <img src="photos/tumbs/thumb_1.jpg" alt="photo1"/></a></li>
  86.      <li class="photo"> <a href="photos/2.jpg" <img src="photos/tumbs/thumb_2.jpg" alt="photo2"/></a></li>
  87.      <li class="photo"> <a href="photos/3.jpg" <img src="photos/tumbs/thumb_3.jpg" alt="photo3"/></a></li>
  88.      <li class="photo"> <a href="photos/4.jpg" <img src="photos/tumbs/thumb_4.jpg" alt="photo4"/></a></li>
  90.      <li class="photo"> <a href="photos/5.jpg" <img src="photos/tumbs/thumb_5.jpg" alt="photo5"/></a></li>
  91.      <li class="photo"> <a href="photos/6.jpg" <img src="photos/tumbs/thumb_6.jpg" alt="photo6"/></a></li>
  92.      <li class="photo"> <a href="photos/7.jpg" <img src="photos/tumbs/thumb_7.jpg" alt="photo7"/></a></li>
  93.      <li class="photo"> <a href="photos/8.jpg" <img src="photos/tumbs/thumb_8.jpg" alt="photo7"/></a></li>
  94.      <li class="photo"> <a href="photos/9.jpg" <img src="photos/tumbs/thumb_9.jpg" alt="photo7"/></a></li>
  95.      <li class="photo"> <a href="photos/10.jpg"<img src="photos/tumbs/thumb_10.jpg" alt="photo7"/></a></li>
  97.     </ul>
  99.   </div>
  100.   <!-- fin contenu-->
  101.     </div>
  102.      <!-- fin conteneur-
  103.   et debut footer-->
  105. <div id="footer">
  106.    <p>  Eric Brenard | Photographe | 2008-2009 - tous droits r&eacute;serv&eacute;s | Site valide XHTML 1.0 et CSS 2</p>
  107.                
  109. </div></body>
  111. </html>


Message édité par tompouss le 20-02-2009 à 16:54:02

---------------
collectionneur de pâtes thermiques
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed