Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1554 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Question menu accordeon Jquery

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Question menu accordeon Jquery

n°1852808
tompouss
Petit chat
Posté le 19-02-2009 à 06:42:06  profilanswer
 

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
mood
Publicité
Posté le 19-02-2009 à 06:42:06  profilanswer
 

n°1853099
fluminis
Posté le 19-02-2009 à 18:03:58  profilanswer
 

<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
n°1853293
kurt11
Posté le 20-02-2009 à 03:38:04  profilanswer
 

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...

n°1853316
kurt11
Posté le 20-02-2009 à 09:02:50  profilanswer
 

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
n°1853382
tompouss
Petit chat
Posté le 20-02-2009 à 12:30:56  profilanswer
 

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
n°1853393
tompouss
Petit chat
Posté le 20-02-2009 à 13:22:38  profilanswer
 

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
n°1853446
Profil sup​primé
Posté le 20-02-2009 à 14:41:06  answer
 

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]

n°1853467
fluminis
Posté le 20-02-2009 à 15:11:58  profilanswer
 

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


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
n°1853521
tompouss
Petit chat
Posté le 20-02-2009 à 16:25:00  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Question menu accordeon Jquery

 

Sujets relatifs
Menu accordéon Spry ne fonctionne pas sous Firefox[RESOLU] Masquer barre de menu
Question débile - fonctions membres C++Reflexions sur jQuery, Mootools, ...
Menu multilevel (besoin de mettre le sous-menu a gauche!!)Menu 5 onglets
Menu déroulant au passage de la sourisProbleme centrage menu
Une question sur les suites/chaine de caracteres:) 
Plus de sujets relatifs à : Question menu accordeon Jquery

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.148 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)