Résolu SECTIONS MENU ET SOUS SECTION (générer leur nom css) - Customisation

Solutions (57)
Tags :
  • CSS
  • Programmation
|
Bonjour à tous !
Je cherche à customiser les lignes de code suivantes (generator indexhibit):

  1. • $s .= "<ul>\n";
  2.  
  3. • if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>\n";
  4.  
  5. • $s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>\n";



En résumé, j'aimerais que chaque SECTION_TITLE générée, porte le nom suivant SECTION_TITLE (par défaut) et soit suivie d'un chiffre en fonction de leur ordre de création pour les différenciées (1,2,3,4,…), pareil pour les sous-sections_title lié à leur Section.

Je ne sais pas si c'est clair ? ; )

En gros c'est le principe suivant:

Exemple nom css du menu:

SECTION-TITLE-1
- sous-section-title-1.1
- sous-section-title-1.2
- sous-section-title-1.3
- etc

SECTION-TITLE-2
- sous-section-title-2.1
- sous-section-title-2.2
- sous-section-title-2.3
- etc

SECTION-TITLE-3
- sous-section-title-3.1
- sous-section-title-3.2
- sous-section-title-3.3
- etc

et ainsi de suite en fonction du nombre de sections créés via le cms.

voici une partie du code original (se référer aux signes (•) pour trouver les lignes):


  1. // sections navigation
  2. function sectional()
  3. {
  4. $OBJ =& get_instance();
  5. global $rs;
  6.  
  7. $pages = $OBJ->db->fetchArray("SELECT id, title, url,
  8. section, sec_desc, sec_disp, year, secid
  9. FROM ".PX."objects, ".PX."sections
  10. WHERE status = '1'
  11. AND hidden != '1'
  12. AND section_id = secid
  13. ORDER BY sec_ord ASC, ord ASC");
  14.  
  15. if (!$pages) return 'Error with pages query';
  16.  
  17. foreach($pages as $reord)
  18. {
  19. $order[$reord['sec_desc']][] = array(
  20. 'id' => $reord['id'],
  21. 'title' => $reord['title'],
  22. 'url' => $reord['url'],
  23. 'year' => $reord['year'],
  24. 'secid' => $reord['secid'],
  25. 'disp' => $reord['sec_disp']);
  26. }
  27.  
  28. $s = '';
  29.  
  30. foreach($order as $key => $out)
  31. {
  32. • $s .= "<ul>\n";
  33.  
  34. • if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>\n";
  35.  
  36. foreach($out as $page)
  37. {
  38. $active = ($rs['id'] == $page['id']) ? " class='active'" : '';
  39.  
  40. • $s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>\n";
  41. }
  42.  
  43. $s .= "</ul>\n\n";
  44. }
  45.  
  46. return $s;
  47. }




voici le code que l'on m'a conseillé:
les lignes 32, 34 et 40 (tj indiquée dans le code par le signe ( • ) ont été modifiées de la manière suivante (mais cela ne fonctionne pas comme je le souhaite):




  1. • $s .= "<ul>";
  2.  
  3. • $s .= "<ul id=\"" . str_replace(" ", "_", $key) . "\">\n";
  4.  
  5. • $active = ($rs['id'] == $page['id']) ? " class='active ". $page['id'] . "'" : " class='". $page['id'] . "'";



Le but est donc d'avoir des noms (css) par défaut, pour les sections et sous section afin de pouvoir créer des styles (css) pour des emplacements futurs et ne pas être bloqué par des styles qui portent le nom des sections comme dans le code conseillé et que je ne pourrai deviner.

J'espère que cette fois-ci cela vous semble plus compréhensible !

Une petite aide me serait vraiment précieuse, car beaucoup de mes projets en dépendent.

Merci Merci
ddd
Contenus similaires
Meilleure solution
partage
, Modérateur |
donzus a dit :
Question 1:

Pour pouvoir jouer avec deux expandingMenu , je cherche à retrouver l'effet suivant:

Lors du clique sur une section-title-> elle s'ouvre
si on clique sur une autre section-title -> celle déjà ouverte se ferme et la nouvelle s'ouvre.
En gros il ne serait possible d'ouvrir qu'une section-title à la fois.

Que faut-il rajouter/modifier dans notre expandingMenu pour avoir cet l'effet?


Du coup, tu n'aurais plus besoin de te baser sur des cookies, vu que tu n'en aurais qu'un ouvert.

Et ça ressemblerait à du code que je t'ai déjà filé plus haut:
  1. $(document).ready(function()
  2. {
  3. // On cache toutes les sous-sections-title
  4. $(".sous-sections-title" ).hide();
  5. // On affiche celles qui est sont en "active"
  6. $(".sous-sections-title" ).each(function()
  7. {
  8. $(this).find(".active" ).parent().show();
  9. });
  10. });


donzus a dit :
Question 2:

Si je souhaite que l'expandingMenu n'agisse que sur certaines sections-title, il faut jouer avec le code suivant (cf code2): en supprimant la ligne de la section-title qu'il faut désactiver.

Première étape, remplacer le code ci-dessous par le code 2

  1. $(document).ready(function()
  2. {
  3. setTimeout('move_up()', 1);
  4. expandingAllMenus();
  5.  
  6. });


code2

  1. $(document).ready(function()
  2. {
  3. setTimeout('move_up()', 1);
  4. expandingMenu(0);
  5. expandingMenu(1);
  6. expandingMenu(2);
  7. expandingMenu(3);
  8. expandingMenu(4);
  9. expandingMenu(5);
  10. expandingMenu(6);
  11. expandingMenu(7);
  12. // expandingMenu(8);
  13. // expandingMenu(9);
  14.  
  15. });


Ensuite dans le pluging ExpandingMenu.js
j'imagine qu'il faut remplacer la ligne 1

  1. function expandingAllMenus() {
  2. var speed = 200;


par

  1. function expandingMenu(num) {
  2. var speed = 200;


Mais que faut-il changer d'autre dans le pluging expaningMenu.js ?

Bonne soirée


Euh non, ça serait beaucoup plus compliqué...
Il faudrait revoir la fonction expandingAllMenus pour ne pas étendre tous les menus d'un coup. Là j'ai fait pour que ce soit plus simple pour toi et que tu n'aies pas besoin d'ajouter un expandingMenu(X) à chaque fois que tu ajoutes un sous-menu.
Mais tu ne veux pouvoir l'activer que sur plusieurs éléments ? Quel serait le but ? :heink: 
  • Commenter cette solution |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par donzus.
  • Commenter cette réponse |
Score
0
òh
òi
|
tout fonctionne !!
Merci Merci :) 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Ok, c'est au niveau du .active qui ne fonctionne pas.
Remplace
  1. $(".sections").each(function()
  2. {
  3. $(this).find("li.active").prevAll().nextAll().show();
  4. }

par
  1. $(".sous-sections-title").each(function()
  2. {
  3. $(this).find("li.active").parent().show();
  4. }
  • Commenter cette réponse |
Score
0
òh
òi
|
Pareil sans la ligne 14:

sinon avec le code suivant, le problème est le même lors du clique sur les sous-sections

  1. $(document).ready(function()
  2. {
  3. // First we hide all exhibitis
  4. $(".section-title").nextAll().hide();
  5.  
  6. // then the active exhibit is showed
  7. $(".sections").each(function()
  8. {
  9. $(this).find("li.active").prevAll().nextAll().show();
  10. });
  11.  
  12. // This is the toggle function
  13. // first it hides all sections
  14. $(".section-title").click(function()
  15. {
  16. $(".section-title").nextAll().hide();
  17. $(this).nextAll().slideToggle("fast");
  18. });
  19.  
  20. });




  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Euh, pas sûr que tu aies besoin de la ligne 14.
  • Commenter cette réponse |
Score
0
òh
òi
|
ok, parfait pour l'expandingMenu(num), tout fonctionne.

Le code avec le toggle est le suivant (en ligne):

http://www.alaindedecker.be/

  1. $(document).ready(function()
  2. {
  3. // First we hide all exhibitis
  4. $(".section-title").nextAll().hide();
  5. // then the active exhibit is showed
  6. $(".sections").each(function()
  7. {
  8. $(this).find("li.active").prevAll().nextAll().show();
  9. });
  10. // This is the toggle function
  11. // first it hides all sections
  12. $(".section-title").click(function()
  13. {
  14. $(".section-title").nextAll().hide(200).animate({easing:"linear"});
  15. $(this).nextAll().show(300);
  16. });
  17. });


Il fonctionne presque,...
reste un problème, ..l'éternel…, lors du clique sur une sous-section de la section-title ouverte, celle-ci se referme.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Citation :
Mais le menu reste figé, rien ne se déroule (voir site).

Parce qu'il faut ajouter une function sur ton évènement onclick afin de cacher/afficher le contenu. De mémoire dans les 1ers messages que tu as posté il y avait quelque chose sur ça, avec une histoire de toggle qui permet d'afficher/cacher automatiquement.

Citation :
Pourquoi je souhaiterais que l'expandingMenu n'agisse que sur certaines sections-title ?

Dans ce cas, on va refaire une fonction expandingMenu(num), donc tu supprimeras là expandingAllMenus() et tu appelleras expandingMenu(0) pour chacun de tes éléments.

  1. function expandingMenu(num) {
  2. var speed = 200;
  3.  
  4. var menu = $(".sous-sections-title")[num];
  5. // on cache l'élément si le cookie n'existe pas ou si le cookie est égal à 'closed'
  6. if ( ( getCookie(menu.id) == '0' || getCookie(menu.id) == 'closed' ) ) {
  7. $(menu).hide();
  8. }
  9.  
  10. // gère le clic sur les .section-title
  11. $(menu).prev().click(
  12. function () {
  13. if ( (getCookie(menu.id) == '0' || getCookie(menu.id) == 'closed' ) ) {
  14. var state = 'open';
  15. $(menu).show(speed);
  16. } else {
  17. var state = 'closed';
  18. $(menu).hide(speed);
  19. }
  20. setCookie(menu.id, state, 1);
  21. }
  22. )
  23. }


Et ça devrait le faire.
  • Commenter cette réponse |
Score
0
òh
òi
|
Petite suite,

J'ai essayé avec:

  1. $(document).ready(function()
  2. {
  3. // On cache toutes les sous-sections-title
  4. $(".sous-sections-title" ).hide();
  5. // On affiche celles qui est sont en "active"
  6. $(".sous-sections-title" ).each(function()
  7. {
  8. $(this).find(".active" ).parent().show();
  9. });
  10. });


Mais le menu reste figé, rien ne se déroule (voir site).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Pourquoi je souhaiterais que l'expandingMenu n'agisse que sur certaines sections-title ?

Vu que grâce à toi je peux customiser/démanbrer, mettre en page le menu comme bon me semble, j'imaginais, par exemple, avoir deux sections-titles:

l'une en haut à gauche,
l'autre en haut à droite,
avec leurs sous-sections ouvertes à l'ouverture du site.

Et le reste du menu en bas à droit fermé à l'ouverture du site qui dépend de l'exandingMenu.
voir exemple en image:

http://www.pocketdesigners.be/exemple_sections_blocs.pd...


Le but: aucun, à part esthétique ou avoir une système de menu un peu différent que l'éternel colonne.


  • Commenter cette réponse |
Score
0
òh
òi
|
CUSTOM / SECTIONS-TITLE & SOUS-SECTIONS-TITLE

Bonjour à tous,

Pour simplifier la recherche, voici un petit récapitulatif du "livre" que nous venons d'écrire ; ).

Remplacez le code d'origine par le nouveau code.

code d'origine:
  1. $s = '';
  2.  
  3. foreach($order as $key => $out)
  4. {
  5. $s .= "<ul>\n";
  6.  
  7. if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>\n";
  8.  
  9. foreach($out as $page)
  10. {
  11. $active = ($rs['id'] == $page['id']) ? " class='active'" : '';
  12.  
  13. $s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>\n";
  14. }
  15.  
  16. $s .= "</ul>\n\n";
  17. }
  18.  
  19. return $s;
  20. }


nouveau code:

  1. $i = 1;
  2. $s .= "<ul id='bloc-sections'>\n";
  3. foreach($order as $key => $out)
  4. {
  5. if ($out[0]['disp'] == 1)
  6. $s .= "<li class='sections' id='sections-$i'><span class='section-title' id='section-title-$i'>" . $key . "</span>";
  7. $j = 1;
  8. $s .= "<ul class= 'sous-sections-title' id='bloc-sous-sections-$i'>";
  9. foreach($out as $page)
  10. {
  11. $active = ($rs['id'] == $page['id']) ? "active" : '';
  12. $s .= "<li class='sous-section-title-$i $active' id='sous-section-title-$i-$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>";
  13. $j++;
  14. }
  15. $s .= "</ul>\n";
  16.  
  17. if ($out[0]['disp'] == 1)
  18. $s .= "</li>\n\n";
  19. $i++;
  20. }
  21. $s .= "</ul>\n";
  22. return $s;
  23. }



Ensuite pour que l'expandingMenu fonctionne avec le nouveau code:
Supprimez l'ancien et remplacé le par:

  1. function expandingAllMenus() {
  2. var speed = 200;
  3.  
  4. // pour tous les sous-sections-title
  5. $(".sous-sections-title" ).each(function() {
  6. var menu = this;
  7. // on cache l'élément si le cookie n'existe pas ou si le cookie est égal à 'closed'
  8. if ( ( getCookie(menu.id) == '0' || getCookie(menu.id) == 'closed' ) ) {
  9. $(this).hide();
  10. }
  11.  
  12. // gère le clic sur les .section-title
  13. $(this).prev().click(
  14. function () {
  15. if ( (getCookie(menu.id) == '0' || getCookie(menu.id) == 'closed' ) ) {
  16. var state = 'open';
  17. $(menu).show(speed);
  18. } else {
  19. var state = 'closed';
  20. $(menu).hide(speed);
  21. }
  22. setCookie(menu.id, state, 1);
  23. }
  24. )
  25. });
  26. }


Ensuite modifiez le code suivant:

  1. $(document).ready(function()
  2. {
  3. setTimeout('move_up()', 1);
  4. expandingMenu(0);
  5. expandingMenu(1);
  6. expandingMenu(2);
  7. expandingMenu(3);
  8. // expandingMenu(4);
  9. // expandingMenu(5);
  10.  
  11. });


par:

  1. $(document).ready(function()
  2. {
  3. setTimeout('move_up()', 1);
  4. expandingAllMenus();
  5.  
  6. });


Dernière étape, adaptez le fichier style.css pour pouvoir customiser le menu comme vous le souhaitez.
et rajoutez dans celui-ci la ligne suivant:

  1. .section-title { cursor: pointer; }



Voilà, normalement tout devrait fonctionner !
J'en profite aussi, via ce petit résumé, pour remercier Oumar,
pour sa généreuse aide, sans qui cette customisation n'aurait pas été possible !






  • Commenter cette réponse |
Score
0
òh
òi
|
Génial !!
Style css rajouté, tout fonctionne !! wouhouu : )

1000 x Un grand grand Merci !! Pour ta patience, ton entraide et tes connaissances !

Juste une dernière chose sans vouloir abuser, il me reste deux questions et puis c'est vraiment fini ! Mais si tu en as marre, ce qui serait compréhensible : ), j'arrête ici.

Question 1:

Pour pouvoir jouer avec deux expandingMenu , je cherche à retrouver l'effet suivant:

Lors du clique sur une section-title-> elle s'ouvre
si on clique sur une autre section-title -> celle déjà ouverte se ferme et la nouvelle s'ouvre.
En gros il ne serait possible d'ouvrir qu'une section-title à la fois.

Que faut-il rajouter/modifier dans notre expandingMenu pour avoir cet l'effet?

Question 2:

Si je souhaite que l'expandingMenu n'agisse que sur certaines sections-title, il faut jouer avec le code suivant (cf code2): en supprimant la ligne de la section-title qu'il faut désactiver.

Première étape, remplacer le code ci-dessous par le code 2

  1. $(document).ready(function()
  2. {
  3. setTimeout('move_up()', 1);
  4. expandingAllMenus();
  5.  
  6. });


code2

  1. $(document).ready(function()
  2. {
  3. setTimeout('move_up()', 1);
  4. expandingMenu(0);
  5. expandingMenu(1);
  6. expandingMenu(2);
  7. expandingMenu(3);
  8. expandingMenu(4);
  9. expandingMenu(5);
  10. expandingMenu(6);
  11. expandingMenu(7);
  12. // expandingMenu(8);
  13. // expandingMenu(9);
  14.  
  15. });


Ensuite dans le pluging ExpandingMenu.js
j'imagine qu'il faut remplacer la ligne 1

  1. function expandingAllMenus() {
  2. var speed = 200;


par

  1. function expandingMenu(num) {
  2. var speed = 200;


Mais que faut-il changer d'autre dans le pluging expaningMenu.js ?

Bonne soirée


  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Et maintenant, dans ton fichier style.css, tu peux ajouter la ligne de CSS que je t'ai donné au-dessus.
Et je pense que ça sera bon
  • Commenter cette réponse |
Score
0
òh
òi
|
oh... ca marche : ) !
  1. // gère le clic sur les .section-title
  2. $(this).prev().click(
  3. function () {
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Euh non, tu n'as pas du tout compris... Relis juste ma 1ère phrase...
Citation :
En effet ligne 13, remplace parent(".section-title" ) par prev(), de telle manière que ça donne ça : $(this).prev().click(


Après, je te parle de quelque chose d'autre, pour mettre un curseur en forme de pointeur, tu ajoutes l'autre code dans ton code CSS... mais on verra ça après, j'ai l'air de t'embrouiller complètement, donc arrête toi à la 1ère phrase, et dis-moi si c'est bon.
  • Commenter cette réponse |
Score
0
òh
òi
|
De cette manière si j'ai bien compris:
  1. $(this).prev(".section-title" { cursor: "pointer"; }).click(
  2. function () {


Mais ca ne marche pas...
N'y aurait-il pas un problème avec ceci ?:

  1. $(document).ready(function()
  2. {
  3. setTimeout('move_up()', 1);
  4. expandingAllMenus();
  5.  
  6. });
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
En effet ligne 13, remplace parent(".section-title") par prev(), de telle manière que ça donne ça : $(this).prev().click(

Et ça devrait être bon maintenant...
Et tu veux aussi ajouter du CSS:
  1. .section-title { cursor: pointer; }
  • Commenter cette réponse |
Score
0
òh
òi
|
tout est chargé, placé, modifié...
mais un "débuggage"à l'air d'être nécessaire...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Alors, on a seulement besoin de modifier la fonction expandingMenu(num) dans les 3 fonctions.
Par contre, pour ton histoire de menu qui se referme quand on clique sur un sous-menu, oui c'est de ma faute, vu que ça ressemble à ça:
<li onclick="...">
Title
<ul>...</ul>
</li>

Du coup, ça l'exécute dès qu'on clique sur le Title ou dans le sous-menu... j'avais pas pensé à cet aspect... on va devoir remodifier le PHP :( 
On va juste ajouter un <span> autour du titre.
Remplace :
  1. $s .= "<li class='section-title' id='section-title-$i'>" . $key;

Par :
  1. $s .= "<li class='sections' id='sections-$i'><span class='section-title' id='section-title-$i'>" . $key . "</span>";


Et dans le fichier JavaScript:
Remplace la fonction expandingMenu(num) par :
  1. function expandingAllMenus() {
  2. var speed = 200;
  3.  
  4. // pour tous les sous-sections-title
  5. $(".sous-sections-title").each(function() {
  6. var menu = this;
  7. // on cache l'élément si le cookie n'existe pas ou si le cookie est égal à 'closed'
  8. if ( ( getCookie(menu.id) == '0' || getCookie(menu.id) == 'closed' ) ) {
  9. $(this).hide();
  10. }
  11.  
  12. // gère le clic sur les .section-title
  13. $(this).parent(".section-title").click(
  14. function () {
  15. if ( (getCookie(menu.id) == '0' || getCookie(menu.id) == 'closed' ) ) {
  16. var state = 'open';
  17. $(menu).show(speed);
  18. } else {
  19. var state = 'closed';
  20. $(menu).hide(speed);
  21. }
  22. setCookie(menu.id, state, 1);
  23. }
  24. )
  25. });
  26. }


Et ensuite, au lieu d'appeler 20 fois expandingMenu(0), expandingMenu(1)...
Tu fais juste expandingAllMenus();
Et ça devrait être bon... (je n'ai pas pu testé spécifiquement vu qu'il y a une petite modification à faire dans le code PHP, et que y'a plus besoin de l'autre code)
Si ça ne marche pas, met bien tout sur le site comme je t'ai dit, que je puisse débugger
  • Commenter cette réponse |
Score
0
òh
òi
|
Oui, ça me parraissait étrange aussi de supprimer autant de code ; )
Bon, voici l'autre code (il inclut les cookies) on touche au but, ... je n'ai pas changé les noms d'origine de peur de faire 1000 erreurs à nouveau: que modifierais-tu dans celui-ci ? (bien sûr il ne fonctionne pas tel quel)


  1. /* Expanding Menus for Indexhibit
  2. * uses jquery
  3. *
  4. * Created by Ross Cairns Mar 2008
  5. * Edited and Pumped by www.kochiz.info
  6. */
  7.  
  8.  
  9. function expandingMenu(num) {
  10. var speed = 200;
  11.  
  12. //var item_title = menues.children(":first");
  13. var item_title = $("#menu ul").eq(num).children(":first");
  14. var menu = item_title.parent("ul");
  15. // add an ID to the item_title object for each li.section-title
  16. item_title.id="menu_item:" + num;
  17.  
  18. menu.id="menu:" + num;
  19.  
  20. var items = menu.children().filter(function (index) { return index > 0; });
  21.  
  22.  
  23. /* hide items if not active */
  24. if ( ( getCookie(menu.id) == '0' || getCookie(menu.id) == 'closed' ) ) {
  25. menu.children().filter(function (index) { return index > 0; }).hide();
  26. }
  27.  
  28. /* add click functions + pointer to title */
  29. item_title.css({cursor:"pointer"}).click(
  30. function () {
  31. //items.show(speed);
  32. if ( (getCookie(menu.id) == '0' || getCookie(menu.id) == 'closed' ) ) {
  33. var state = 'open';
  34. items.show(speed);
  35. } else {
  36. var state = 'closed';
  37. items.hide(speed);
  38. }
  39. setCookie(menu.id, state, 1);
  40. }
  41. )
  42. }
  43.  
  44.  
  45.  
  46. function setCookie(c_name,value,expiredays)
  47. {
  48. var exdate = new Date();
  49. exdate.setDate(exdate.getDate() + expiredays);
  50. document.cookie = c_name + "=" + escape(value) +
  51. ((expiredays==null) ? "" : ";expires=" + exdate.toGMTString()) + '; path=/';
  52. }
  53.  
  54. function getCookie(c_name)
  55. {
  56. if (document.cookie.length > 0)
  57. {
  58. c_start = document.cookie.indexOf(c_name + "=")
  59.  
  60. if (c_start != -1)
  61. {
  62. c_start = c_start + c_name.length + 1
  63. c_end = document.cookie.indexOf(";", c_start)
  64.  
  65. if (c_end == -1) c_end = document.cookie.length
  66. return unescape(document.cookie.substring(c_start, c_end))
  67. }
  68. }
  69. return 0;
  70. }


ps: l'autre code est vraiment bien aussi, j'aimerais le garder mais il y a juste un détail qui me dérange, si il est possible de le corriger ce serait super, sinon tampis.

Lorsqu'on à cliqué sur une sous-section d'une des sections-title et ensuite qu'on reclique sur une autre sous-section de cette même section-title il réouvre/ferme cette section-title, ce serait pas mal qu'elle reste ouverte.
Et qu'il ne réactive pas l'effet, à chaque clique sur une de ses sous-sections.

C'est le problème de la double exécution dont tu parlais je crois.
Voici un expandingMenu qui fonctionne de cette manière là dans un de mes autres sites.
Peut-être est-ce plus simple de travailler sur celui-là?


  1. /* Expanding Menus for Indexhibit
  2. * uses jquery
  3. *
  4. * Created by Ross Cairns Mar 2008
  5. */
  6.  
  7.  
  8. function expandingMenu(num) {
  9. var speed = 200;
  10.  
  11. var item_title = $("#menu ul").eq(num).children(":first");
  12. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
  13.  
  14. /* hide items if not active */
  15. if (items.is(".active") == false) {
  16. items.hide();
  17. }
  18.  
  19. /* add click functions + pointer to title */
  20. item_title.css({cursor:"pointer"}).toggle(
  21. function () {
  22. items.show(speed);
  23. }, function () {
  24. items.hide(speed);
  25. }
  26. )
  27. }


voilà voilà.
Et encore et toujours:
Merci pour cette aide ! :) 






  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Bah tu as complètement supprimé tout ce qu'il y avait dans le plugin expandingMenu.js, forcément que plus rien ne fonctionne :) 
Met la même chose dans le expandingMenu.js que pour l'autre site
  • Commenter cette réponse |
Score
0
òh
òi
|
oups, ...j'avais mal lu, sorry

En supprimant la ligne de 10 à 16 l'expandingMenu reste ouvert et ne réagit plus.

  1. $(document).ready(function()
  2. {
  3. // On cache toutes les sous-sections-title
  4. $(".sous-sections-title" ).hide();
  5. // On affiche celles qui est sont en "active"
  6. $(".sous-sections-title" ).each(function()
  7. {
  8. $(this).find(".active" ).parent().show();
  9. });


Le code javascript "expandingMenu.js" est un pluging d'indexhibit qui me permet d'avoir un expanding menu.
Il suffit de le placer (via le ftp), dans le dossier (js) ensuite de rajouter les lignes suivantes dans mon index.php

  1. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingMenus.js'></script>

et aussi ceci,

  1. <plug:front_lib_js />
  2. <script type='text/javascript'>
  3. path = '<%baseurl%>/files/gimgs/';
  4.  
  5. <!-- script déroulement menu -expandingMenus -->
  6.  
  7. $(document).ready(function()
  8. {
  9. setTimeout('move_up()', 1);
  10. expandingMenu(0);
  11. expandingMenu(1);
  12. expandingMenu(2);
  13. expandingMenu(3);
  14. expandingMenu(4);
  15. expandingMenu(5);
  16. expandingMenu(6);
  17. expandingMenu(7);
  18. expandingMenu(8);
  19. expandingMenu(9);
  20. expandingMenu(10);
  21. expandingMenu(11);
  22. expandingMenu(12);
  23. expandingMenu(13);
  24. expandingMenu(14);
  25. expandingMenu(15);
  26. expandingMenu(16);
  27. expandingMenu(17);
  28. expandingMenu(18);
  29. expandingMenu(19);
  30. expandingMenu(20);
  31. // expandingMenu(21);
  32. // expandingMenu(22);
  33.  
  34. });
  35.  
  36.  
  37. </script>





après ces modifications l'expandingMenu est activé.

Ce code javascript était lié à l'ancien code php, comme nous avons modifier celui-ci, les noms ne sont plus les mêmes.
Je souhaitais juste réactualiser le pluging "expandingMenu.js" pour qu'il fonctionne avec les noms du nouveau code.
Mais impossible d'arriver au même résultat que sur ce site en changeant juste les noms:

http://www.juliedebieve.com/index. [...] 01/custom/

je me répète, mais je ne sais plus quoi dire, ni quoi faire.
Cela doit être autant fatiguant pour toi que pour moi, désolé que ça n'en finisse pas.

Bonne soirée


  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
donzus a dit :
Ah ok, je ne touche pas aux lignes 10 et 16 donc.
Du coup il n'y a pas de solution ?

?? Je parle pas français ou quoi ?
Ca fait deux fois que je te dis qu'il faut supprimer les lignes de 10 à 16...


donzus a dit :
Mais pourquoi l'expandingMenu du dernier site que j'ai fait fonctionne t-il de cette manière ? L'état est conservé même s'il change de page.

http://www.juliedebieve.com/index. [...] 01/custom/

Ce serait frustrant d'avoir fait tout ca, de toucher presque au but... sans y arriver totalement.

Bon, ok, en fait tu as un expandingMenu qui s'occupe de gérer tout ça... Pourquoi tu voulais ajouter du code javascript alors ?
Le expandingMenu se charge de sauvegarder dans un cookie l'état de chaque élément...
  • Commenter cette réponse |
Score
0
òh
òi
|
Ah ok, je ne touche pas aux lignes 10 et 16 donc.
Du coup il n'y a pas de solution ?
Mais pourquoi l'expandingMenu du dernier site que j'ai fait fonctionne t-il de cette manière ? L'état est conservé même s'il change de page.

http://www.juliedebieve.com/index. [...] 01/custom/

Ce serait frustrant d'avoir fait tout ca, de toucher presque au but... sans y arriver totalement.

  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
C'était pas supprimer les lignes 10 et 16, c'était les lignes 10 à 16 :) 

Et vu que ça change de page, c'est pas pratique pour pouvoir conserver l'état.
  • Commenter cette réponse |
Score
0
òh
òi
|

Bonsoir,

Alors avec le (s) corrigé et sans la ligne 14 le code est intéressant pour un site futur,
je le garde donc en archive
mais comment faire pour qu'il garde actif (ouvert) les sections-title déjà déroulées (lorsqu'on clique sur un sous menu ?). Il ne manque que ce petit détail pour arriver au code idéal ; ), …
...ah oui et aussi le problème de la double exécution (voir 2e code)


code actif sur le site:

  1. $(document).ready(function()
  2. {
  3. // On cache toutes les sous-sections-title
  4. $(".sous-sections-title" ).hide();
  5. // On affiche celles qui est sont en "active"
  6. $(".sous-sections-title" ).each(function()
  7. {
  8. $(this).find(".active" ).parent().show();
  9. });
  10. // This is the toggle function
  11. // first it hides all sections
  12. $(".section-title" ).click(function()
  13. {
  14.  
  15. $(this).find(".sous-sections-title" ).slideToggle(100);
  16. });
  17. });



Par contre si je supprime la ligne 10 et 16, j'arrive à au code suivant qui ma parait curieux et il ne fonctionne pas.


  1. $(document).ready(function()
  2. {
  3. // On cache toutes les sous-sections-title
  4. $(".sous-sections-title" ).hide();
  5. // On affiche celles qui est sont en "active"
  6. $(".sous-sections-title" ).each(function()
  7. {
  8. $(this).find(".active" ).parent().show();
  9. });
  10.  
  11. // first it hides all sections
  12. $(".section-title" ).click(function()
  13. {
  14.  
  15. $(this).find(".sous-sections-title" ).slideToggle(100);
  16.  
  17. });


  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
A mince, il manque un s à "sous-sections-title" à la ligne 3, j'ai mal recopié.

Edit: et il semblerait que tu aies déjà un code qui ouvre/ferme le sous menu lorsque l'on clique sur le menu, du coup, il faut supprimer les lignes 10 à 16, parce que sinon, ça va l'exécuter 2 fois, et donc refermer tout de suite.
  • Commenter cette réponse |
Score
0
òh
òi
|
ça ne fonctionne pas,
il faut que j'essaie avec d'autres noms ?

  1. $(document).ready(function()
  2. {
  3. // On cache toutes les sous-section-title
  4. $(".sous-section-title" ).hide();
  5. // On affiche celles qui est sont en "active"
  6. $(".sous-sections-title" ).each(function()
  7. {
  8. $(this).find(".active" ).parent().show();
  9. });
  10. // This is the toggle function
  11. // first it hides all sections
  12. $(".section-title" ).click(function()
  13. {
  14.  
  15. $(this).find(".sous-sections-title" ).slideToggle(100);
  16. });
  17. });

  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Si tu ne veux pas que tout le menu se déroule, supprime la ligne 14 de ce que je t'ai donné
  • Commenter cette réponse |
Score
0
òh
òi
|
zut le problème reste le même:


voici un lien avec un expandingMenu qui correspond exactement à ce que je recherche:

http://www.juliedebieve.com/index.php?/stylisme01/custo...

peut-être que cela te paraîtra plus clair.
Lorsqu'on clique sur différentes sections-title, elles se déroulent et lors du clique sur tel ou tel sous-sections, les sections-title déroulées restent telquel, alors qu'avec le code ci-dessus tout le menu se déroule.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Alors, après pour le javascript, avec ça, ça devrait le faire :
  1. $(document).ready(function()
  2. {
  3. // On cache toutes les sous-section-title
  4. $(".sous-section-title").hide();
  5. // On affiche celles qui est sont en "active"
  6. $(".sous-sections-title" ).each(function()
  7. {
  8. $(this).find(".active").parent().show();
  9. });
  10. // This is the toggle function
  11. // first it hides all sections
  12. $(".section-title").click(function()
  13. {
  14. $(".sous-sections-title").hide();
  15. $(this).find(".sous-sections-title").slideToggle(100);
  16. });
  17. });
  • Commenter cette réponse |
Score
0
òh
òi
|
ok, compris pour les listes imbriquées.
Le code est remplacé, je ne touche plus à rien !
Désolé, .. : )
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Non ce n'est pas correct :) 
Ce que je t'ai donné c'est correct... il ne fallait pas déplacer le </li>, il faut modifier le JavaScript après pour prendre en compte cette modification.
Et même en réfléchissant, tu as beaucoup trop d'éléments...

Il faudrait un seul <ul> pour tout le menu, et un <li> par "section-title", qui aurait un <ul> à l'intérieur pour contenir les sous éléments.
  1. $i = 1;
  2. $s .= "<ul id='bloc-sections'>\n";
  3. foreach($order as $key => $out)
  4. {
  5. if ($out[0]['disp'] == 1)
  6. $s .= "<li class='section-title' id='section-title-$i'>" . $key;
  7. $j = 1;
  8. $s .= "<ul class= 'sous-sections-title' id='bloc-sous-sections-$i'>";
  9. foreach($out as $page)
  10. {
  11. $active = ($rs['id'] == $page['id']) ? "active" : '';
  12. $s .= "<li class='sous-section-title-$i $active' id='sous-section-title-$i-$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>";
  13. $j++;
  14. }
  15. $s .= "</ul>\n";
  16.  
  17. if ($out[0]['disp'] == 1)
  18. $s .= "</li>\n\n";
  19. $i++;
  20. }
  21. $s .= "</ul>\n";
  22. return $s;
  23. }


Ca qui te donnera quelque chose dans ce genre :
  1. <ul id='bloc-sections'>
  2. <li class="section-title" id="section-title-1">
  3. Home
  4. <ul style="display: none;" class="sous-sections-title" id="bloc-sous-sections-1">
  5. <li class="sous-section-title-1" id="sous-section-title-1-1"><a href="***" onclick="do_click();">Main</a></li>
  6. </ul>
  7. </li>
  8. <li class="section-title" id="section-title-2">
  9. Info
  10. <ul style="display: none;" class="sous-sections-title" id="bloc-sous-sections-2">
  11. <li class="sous-section-title-2" id="sous-section-title-2-1"><a href="***" onclick="do_click();">Info 01</a></li>
  12. <li class="sous-section-title-2" id="sous-section-title-2-2"><a href="***" onclick="do_click();">Info 02</a></li>
  13. </ul>
  14. </li>
  15. </ul>


Et c'est comme ça que doit être des listes imbriquées. ( http://www.w3schools.com/HTML/tryit.asp?filename=tryhtm... )

Ensuite, met ton site comme ça, que je vois comment faire pour le javascript. mais vu que t'es tout le temps en train de modifier ce que je te dis, difficile de te dire exactement quoi faire pour le javascript
  • Commenter cette réponse |
Score
0
òh
òi
|
J'ai fait un petit changement dans le code;

  1. $s .= "<ul class= 'sections' id='section-$i'>\n";
  2. if ($out[0]['disp'] == 1)
  3. $s .= "<li class='section-title' id='section-title-$i'>" . $key;
  4. $s .= "</li>";


je ne sais pas si cela te parait correct; cela me permet d'isoler les sections-title, et ainsi de pouvoir les "cacher" via l'expanding menu.

  1. $(document).ready(function()
  2. {
  3. // First we hide all exhibitis
  4. $(".section-title").nextAll().hide();
  5.  
  6. // then the active exhibit is showed
  7. $(".sections ").each(function()
  8. {
  9. $(this).find(".active").prevAll().nextAll().show();
  10. });
  11.  
  12. // This is the toggle function
  13. // first it hides all sections
  14. $(".section-title ").click(function()
  15. {
  16. $(".sous-sections-title").nextAll().hide();
  17. $(this).nextAll().slideToggle(100);
  18. });
  19.  
  20. });


En faisant cela l'expanding fonctionne "presque". Reste juste le problème de son retour à l'état initial lors du clique sur l'une des sous-sections.
  • Commenter cette réponse |
Score
0
òh
òi
|
voilà qui est fait !

  1. $i = 1;
  2. $s .= "<div id='bloc-sections'>\n";
  3. foreach($order as $key => $out)
  4. {
  5. $s .= "<ul class= 'sections' id='section-$i'>\n";
  6. if ($out[0]['disp'] == 1)
  7. $s .= "<li class='section-title' id='section-title-$i'>" . $key;
  8. $j = 1;
  9. $s .= "<ul class= 'sous-sections-title' id='bloc-sous-sections-$i'>";
  10. foreach($out as $page)
  11. {
  12. $active = ($rs['id'] == $page['id']) ? "active" : '';
  13. $s .= "<li class='sous-section-title-$i $active' id='sous-section-title-$i-$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>";
  14. $j++;
  15. }
  16. $s .= "</ul>\n";
  17.  
  18. if ($out[0]['disp'] == 1)
  19. $s .= "</li>";
  20. $s .= "</ul>\n\n";
  21. $i++;
  22. }
  23. $s .= "</div>\n";
  24. return $s;
  25. }


que proposes-tu pour la suite ?
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
C'est normal ça... $i et $j sont des variables PHP, elles n'ont rien à faire dans ton code Javascript...

Mais déjà, plutôt que de s'occuper du code javascript, la 1ère chose à faire est d'aboutir à un code PHP qui génère quelque chose de correct, et ce n'est pas le cas actuellement, donc arrête de te soucier du soucis du javascript pour le moment. Et met le nouveau code que je t'ai donné. On regardera alors ce que ça génère, et on pourra modifier le javascript après
  • Commenter cette réponse |
Score
0
òh
òi
|
exemple:

  1. $(document).ready(function()
  2. {
  3. // First we hide all exhibitis
  4. $(".sections .sections-title").nextAll().hide();
  5.  
  6. // then the active exhibit is showed
  7. $("#sous-section-title-$i-$j ").each(function()
  8. {
  9. $(this).find(".active").prevAll().nextAll().show();
  10. });
  11.  
  12. // This is the toggle function
  13. // first it hides all sections
  14. $(".sections .sections-title ").click(function()
  15. {
  16. $("#sous-section-title-$i-$j").nextAll().hide();
  17. $(this).nextAll().slideToggle(100);
  18. });
  19.  
  20. });


si je change par exemple:

  1. // First we hide all exhibitis
  2. $(".sections .sections-title").nextAll().hide();


par

  1. // First we hide all exhibitis
  2. $("#sous-section-title-$i-$j").nextAll().hide();


à l'inverse ici toutes les sections et leurs sous-sections sont déroulées en début.
Mais ça ne résoud pas le problème, il est juste inversé.
Si l'on ferme certaines sections-title (en cliquant dessus) et puis qu'on clique sur une sous-sections, le menu revient aussi à son état initial c'est à dire complétement déroulé, et ne garde pas l'état dans lequel il était.

Il y a des centaines de possibilité, peut-être vais-je tomber sur la bonne ; )



  • Commenter cette réponse |
Score
0
òh
òi
|
En faite, en changeant les noms plein de modifications sont possible,
mais je n'arrive juste pas à lui dire lorsqu'on clique sur tel sous-section ne revient pas à l'état initial (c'est à dire totalement fermé)
Garde le menu comme il est à ce moment là.

je me répète, c'est juste pour clarifier et éviter qu'on parte sur de faux problèmes.
  • Commenter cette réponse |
Score
0
òh
òi
|
aie...
les styles restent, mais l'expandingMenu ne fonctionne plus du tout, impossible même de le modifier en changeant les noms du pluging, il reste juste ouvert. (et le problème des dernières sections qui restent déroulées revient alors que cela à été corrigé)
Tandis qu'avec l'ancien code, en changeant les noms, cela modifiait l'apparence du menu,... mais je n'arrive toujours pas à trouver la bonne combinaison.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Il y a encore un soucis dans le code, y'a beaucoup trop de <ul> qui sont créés, les <ul> ne sont pas sensés être imbriqués comme ça.
  1. $i = 1;
  2. $s .= "<div id='bloc-sections'>\n";
  3. foreach($order as $key => $out)
  4. {
  5. $s .= "<ul class= 'sections' id='section-$i'>\n";
  6. if ($out[0]['disp'] == 1)
  7. $s .= "<li class='section-title' id='section-title-$i'>" . $key;
  8. $j = 1;
  9. $s .= "<ul class= 'sous-sections-title' id='bloc-sous-sections-$i'>";
  10. foreach($out as $page)
  11. {
  12. $active = ($rs['id'] == $page['id']) ? "active" : '';
  13. $s .= "<li class='sous-section-title-$i $active' id='sous-section-title-$i-$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>";
  14. $j++;
  15. }
  16. $s .= "</ul>\n";
  17.  
  18. if ($out[0]['disp'] == 1)
  19. $s .= "</li>";
  20. $s .= "</ul>\n\n";
  21. $i++;
  22. }
  23. $s .= "</div>\n";
  24. return $s;


Ca devrait être un peu mieux au niveau du code comme ça.
Dis-moi si ça va, et on verra après pour le reste.
  • Commenter cette réponse |
Score
0
òh
òi
|
J'avais oublié d'activer les expandingMenu(.) dans le fichier php voilà pourquoi les sections-title à partir de la 6 n'étaient pas prisent en compte par l'expandingMenu.
un problème résolu,... reste l'autre...

  1. $(document).ready(function()
  2. {
  3. setTimeout('move_up()', 1);
  4. expandingMenu(0);
  5. expandingMenu(1);
  6. expandingMenu(2);
  7. expandingMenu(3);
  8. expandingMenu(4);
  9. expandingMenu(5);
  10. // expandingMenu(6);
  11. // expandingMenu(7);


});
  • Commenter cette réponse |
Score
0
òh
òi
|
C'est corrigé, par contre le problème des "expandingMenu.js" persiste.
Ils fonctionnaient très bien avec l'ancien code, mais vu qu'ici les noms ont changés...

code modifié:

  1. $i = 1;
  2.  
  3. $s .= "<ul id='bloc-sections'>\n";
  4. foreach($order as $key => $out)
  5. {
  6.  
  7. $s .= "<ul class= 'sections' id='section-$i'>\n";
  8. if ($out[0]['disp'] == 1)
  9.  
  10. $s .= "<ul class= 'sections-title'><li class='section-title' id='section-title-$i'>" . $key . "</li></ul>\n";
  11.  
  12. $j = 1;
  13. foreach($out as $page)
  14. {
  15.  
  16. $active = ($rs['id'] == $page['id']) ? "active" : '';
  17. $s .= "<ul class= 'sous-sections-title' id='bloc-sous-sections-$i'><li class='sous-section-title-$i $active' id='sous-section-title-$i-$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li></ul>\n";
  18. $j++;
  19. }
  20.  
  21.  
  22. $s .= "</ul>\n\n";
  23. $i++;
  24. }
  25. $s .= "</ul>\n";
  26. return $s;



voici l'ancien code et ensuite les 'expandingMenu' d'origine pour que tu ai une idée:


  1. $s = '';
  2.  
  3. foreach($order as $key => $out)
  4. {
  5. $s .= "<ul>\n";
  6.  
  7. if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>\n";
  8.  
  9. foreach($out as $page)
  10. {
  11. $active = ($rs['id'] == $page['id']) ? " class='active'" : '';
  12.  
  13. $s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>\n";
  14. }
  15.  
  16. $s .= "</ul>\n\n";
  17. }
  18.  
  19. return $s;
  20. }


expandingMenu (1):

  1. /* Expanding Menus for Indexhibit
  2. * uses jquery
  3. *
  4. * Created by Ross Cairns Mar 2008
  5. */
  6.  
  7.  
  8. function expandingMenu(num) {
  9. var speed = 300;
  10.  
  11. var item_title = $("#menu ul").eq(num).children(":first");
  12. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
  13.  
  14. /* hide items if not active */
  15. if (items.is(".active") == true) {
  16. items.hide();
  17. }
  18.  
  19. /* hide items if not active */
  20. if (items.is(".active") == false) {
  21. items.hide();
  22. }
  23.  
  24. /* add click functions + pointer to title */
  25. item_title.css({cursor:"pointer"}).toggle(
  26. function () {
  27. items.show(speed);
  28. }, function () {
  29. items.hide(speed);
  30. }
  31. )
  32. }


expandingMenu (2):

  1. $(document).ready(function()
  2. {
  3. // First we hide all exhibitis
  4. $("#menu ul li.section-title").nextAll().hide();
  5.  
  6. // then the active exhibit is showed
  7. $("#menu ul").each(function()
  8. {
  9. $(this).find("li.active").prevAll().nextAll().show();
  10. });
  11.  
  12. // This is the toggle function
  13. // first it hides all sections
  14. $("#menu ul li.section-title").click(function()
  15. {
  16. $("#menu ul li.section-title").nextAll().hide();
  17. $(this).nextAll().slideToggle("fast");
  18. });
  19.  
  20. });


peut-être que cela semble plus clair pour toi ?


  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
donzus a dit :
Bonsoir,
voici le code avec les derniers changements:

  1. $i = 1;
  2.  
  3. $s .= "<ul id='bloc-sections'>\n";
  4. foreach($order as $key => $out)
  5. {
  6.  
  7. $s .= "<ul class= 'sections' id='section-$i'>\n";
  8. if ($out[0]['disp'] == 1) $s .= "<ul class= 'sections-title'><li class='section-title' id='section-title-$i'>" . $key . "</li></ul>\n";
  9.  
  10. $j = 1;
  11. foreach($out as $page)
  12. {
  13.  
  14. $s .= "<div id='bloc-sous-sections-$i'>\n";
  15. $active = ($rs['id'] == $page['id']) ? "active" : '';
  16. $s .= "<ul class= 'sous-sections-title'><li class='sous-section-title-$i $active' id='sous-section-title-$i-$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li></ul>\n";
  17. $j++;
  18. }
  19.  
  20. $s .= "</div>\n";
  21. $s .= "</ul>\n\n";
  22.  
  23. $i++;
  24. }
  25. $s .= "</ul>\n";
  26. return $s;
  27. }



Grâce à ces modifications, j'arrive au résultat souhaité (au niveau des styles) ! ( une <div> a tout de même été rajoutée)

Salut,

Le soucis c'est que tu l'as mal ajoutée ta div. Tu la créées dans la boucle foreach($out as $page), sauf que tu la fermes en dehors de la boucle. Donc si y'a 3 sous éléments, il va créer 3 <div>, et ne va créer qu'un seul </div>. Et s'il y a 0 sous élément, il va créer 0 <div> et 1 </div>
Et comme je te l'ai dit plus haut, tu n'as pas besoin de div ici, ta div aura le même effet que ton <ul>, tu peux lui donner un id spécifique si tu veux:
$s .= "<ul class= 'sous-sections-title' id='bloc-sous-sections-$i'> ...

donzus a dit :
Seul problème, pour les deux " expandinMenu.js " (voir ci-dessous), lorsque je clique sur l'une des sous-sections

par exemple: projet02

tout le menu revient à son état initial, ce que je ne veux pas.
J'aimerais qu'il reste dans l'état ou il est à ce moment là.

J'ai essayé de changer les noms dans le pluging expandingMenu, mais impossible d'y arriver.
Peut-être me suis-je trompé de nom, je ne sais pas trop lequel mettre et à quel endroit, ou peut être le problème est-il autre part ?


Ca, ça risque d'être plus délicat à faire, sans passer par une iframe/AJAX.
Mais tu dois pouvoir te débrouiller pour "expand" au moins tout jusqu'à ton item, il me semble que cette fonction est prévue avec le "active".

Mais on va attendre que tu corriges déjà la page pour voir.
  • Commenter cette réponse |
Score
0
òh
òi
|
Bonsoir,
voici le code avec les derniers changements:

  1. $i = 1;
  2.  
  3. $s .= "<ul id='bloc-sections'>\n";
  4. foreach($order as $key => $out)
  5. {
  6.  
  7. $s .= "<ul class= 'sections' id='section-$i'>\n";
  8. if ($out[0]['disp'] == 1) $s .= "<ul class= 'sections-title'><li class='section-title' id='section-title-$i'>" . $key . "</li></ul>\n";
  9.  
  10. $j = 1;
  11. foreach($out as $page)
  12. {
  13.  
  14. $s .= "<div id='bloc-sous-sections-$i'>\n";
  15. $active = ($rs['id'] == $page['id']) ? "active" : '';
  16. $s .= "<ul class= 'sous-sections-title'><li class='sous-section-title-$i $active' id='sous-section-title-$i-$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li></ul>\n";
  17. $j++;
  18. }
  19.  
  20. $s .= "</div>\n";
  21. $s .= "</ul>\n\n";
  22.  
  23. $i++;
  24. }
  25. $s .= "</ul>\n";
  26. return $s;
  27. }



Grâce à ces modifications, j'arrive au résultat souhaité (au niveau des styles) ! ( une <div> a tout de même été rajoutée)

Ci-joint le lien vers le menu test (ouvrir toutes les sections-title pour avoir un aperçu des possibilités de customisation):

http://www.alaindedecker.be/


Evidemment, tout ne fonctionne pas correctement, (ça en devient un peu lassant ; )
Comme tu l'as dit mes connaissances sont limitées, je manque de temps pour pouvoir me plonger pleinement dans l'apprentissage de l'html, Css, javascript & php.
Devant composer avec d'autres activités, cela ce fait petit à petit, mais la motivation est là !

Merci pour ton conseil, le site du zéro fait déjà partie d'une liste de sites que je survole dès que possible pour compléter mes connaissances.
J'espère d'ici peu, pouvoir lire leurs tutoriaux sérieusement, mais d'ici là mes envies (et besoins) de customisation m'amènent à être confronté à des problèmes difficile à résoudre.

Par exemple, pour en revenir aux soucis rencontrés:

J'ai du adapter mes " expandinMenu.js " pour qu'ils fonctionnent avec le code, en remplaçant par exemple ("#menu ul") par ("ul.sections"):
Seul problème, pour les deux " expandinMenu.js " (voir ci-dessous), lorsque je clique sur l'une des sous-sections

par exemple: projet02

tout le menu revient à son état initial, ce que je ne veux pas.
J'aimerais qu'il reste dans l'état ou il est à ce moment là.

J'ai essayé de changer les noms dans le pluging expandingMenu, mais impossible d'y arriver.
Peut-être me suis-je trompé de nom, je ne sais pas trop lequel mettre et à quel endroit, ou peut être le problème est-il autre part ?



Autre soucis, mais il concerne juste le pluging expandingMenu (1) (voir code qui suit)

à partir de la 7e section-title (ici la section OUPS) générée (via la cms), l'expanding menu n'agit plus.
Les sections restent déroulées. Pourquoi ?

ExpandingMenu (1)

  1. /* Expanding Menus for Indexhibit
  2. * uses jquery
  3. *
  4. * Created by Ross Cairns Mar 2008
  5. */
  6.  
  7.  
  8. function expandingMenu(num) {
  9. var speed = 200;
  10.  
  11. var item_title = $("ul.sections").eq(num).children(":first");
  12. var items = $("ul.sections").eq(num).children().filter(function (index) { return index > 0; });
  13.  
  14. /* hide items if not active */
  15. if (items.is(".active") == true) {
  16. items.hide();
  17. }
  18.  
  19. /* hide items if not active */
  20. if (items.is(".active") == false) {
  21. items.hide();
  22. }
  23.  
  24. /* add click functions + pointer to title */
  25. item_title.css({cursor:"pointer"}).toggle(
  26. function () {
  27. items.show(speed);
  28. }, function () {
  29. items.hide(speed);
  30. }
  31. )
  32. }



ExpandingMenu (2)

  1. $(document).ready(function()
  2. {
  3. // First we hide all exhibitis
  4. $("ul.sections .sections-title").nextAll().hide();
  5.  
  6. // then the active exhibit is showed
  7. $("ul.sections").each(function()
  8. {
  9. $(this).find("li.active").prevAll().nextAll().show();
  10. });
  11.  
  12. // This is the toggle function
  13. // first it hides all sections
  14. $("ul.sections .sections-title").click(function()
  15. {
  16. $("ul.sections .sections-title").nextAll().hide();
  17. $(this).nextAll().slideToggle("fast");
  18. });
  19.  
  20. });



Ce sont les derniers problèmes qu'il me faut résoudre, et puis c'est fini !!
Après deux jours de recherches, j'ai n'ai aucune solution.
Pourrais-tu m'aider sur ce dernier point?

Merci à toi











  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
donzus a dit :
Merci, la précision sur les <ul> et <div> est clair,

Pour être un peu plus clair, un <div> est un conteneur pouvant prendre n'importe quel élément.
Alors qu'un <ul> c'est utilisé pour faire une liste non numérotée, conjointement aux <li>
Un <ul> avec des <li>, c'est équivalent à ça:
  • élément 1
  • élément 2
  • élément 3

    donzus a dit :
    petite hésitation par exemple sur: </li></ul>\n ou </li>\n</ul> ?
    le \n ou \n\n correspond à quoi ? Quand est-ce qu'il faut mettre l'un ou l'autre ou rien ?

    \n = un saut de ligne
    Ca ne change strictement rien du tout pour toi d'ajouter des \n ou pas. Vu qu'en HTML, pour faire un saut de ligne, il faut faire un <br/>
    C'est juste pour aérer le code source (inutile quoi)

    donzus a dit :
    voici le résultat:

    1. $i = 1;
    2. foreach($order as $key => $out)
    3. {
    4.  
    5. $s .= "<ul class= 'sections'>\n";
    6. if ($out[0]['disp'] == 1) $s .= "<ul class= 'sections-title'><li class='section-title' id='section-title-$i'>" . $key . "</li></ul>\n";
    7.  
    8. $j = 1;
    9. foreach($out as $page)
    10. {
    11. $active = ($rs['id'] == $page['id']) ? "active" : '';
    12. $s .= "<ul class= 'sous-sections-title'><li class='sous-section-title-$i $active' id='sous-section-title-$i.$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li></ul>\n";
    13. $j++;
    14. }
    15. $s .= "</ul>\n\n";
    16. $i++;
    17. }
    18.  
    19. return $s;
    20. }

    Ca me parait pas mal.

    donzus a dit :
    En testant les styles dans CSSEdit tout fonctionne parfaitement sauf lorsque je test les:

    li#sous-section-title-1.1.sous-section-title-1
    li#sous-section-title-1.2.sous-section-title-1
    li#sous-section-title-1.3.sous-section-title-1
    etc
    li#sous-section-title-2.1.sous-section-title-2
    li#sous-section-title-2.2.sous-section-title-2
    etc
    li#sous-section-title-3.1.sous-section-title-3
    etc


    qui existent mais impossible de les modifier ? pourquoi ? je ne sais pas. Quel serait le problème ?

    Ah oui, ça vient certainement du "." dans 2.1, 2.2, 2.3
    Vu que . = nom de classe, ça doit le perdre
    Remplace les noms des classes pour avoir sous-section-title1-2 plutôt que sous-section-title1.2


    donzus a dit :
    En voyant le résultat de ce code, j'aimerais juste rajouter des styles "blocs" (ul ou div peut-être ? ; ) ),
    tout en gardant les styles existant:

    voici le lien pour les exemples:
    http://www.pocketdesigners.be/exemple_sections_blocs.pd...


    Petite explication:

    J'aimerais qu'un bloc contienne, toutes les sections-titles et leurs sous-sections:
    cela correspond presque au style:

    ul.sections (que je souhaite garder )

    qui permet de modifier tout les "blocs" sections-title et leurs sous sections (en jaune dans le pdf).
    Mais je souhaiterais que ceux-ci soit également compris dans un bloc (en bleu dans le pdf):


    En ajoutant une <div id="sections-bloc">...</div> autour de tes <ul> ça devrait le faire, de telle manière que t'en aies un avant le foreach dans le code.

    donzus a dit :
    même principe pour les sections-title: (exemple voir pdf)
    même principe les sous-sections-title: (exemple voir pdf)

    Pour les sections-title, tu les as déjà.
    Pour le bloc bleu autour, je ne vois pas l'intérêt, tu as déjà un élément qui contient tout, pourquoi t'en veux un qui va contenir tout sauf les sous éléments du dernier groupe ?

    donzus a dit :
    et aussi pour chaque sous-section-title lié à sa section: (exemple voir pdf)

    .sous-section-title-2

    par exemple, permet de modifier toutes les sous-sections-title-2 ce style est parfait aussi mais j'aimerais avoir un style en plus qui soit un bloc qui englobe toutes les sous-sections-title-2:
    et ceci serait possible pour toutes les sous-sections -title, 1.2.3.4…évidemment.

    Dans ce cas, tu mets un style sur tous les <li> de ton élément:
    .sous-section-title-2 li {
    // du code CSS qui s'applique à tous les sous éléments de .sous-section-title-2
    }

    Mais tu as l'air d'avoir de grosses lacunes en CSS / HTML, je te conseillerais vivement de lire des sites pour ça. (exemple le site du zéro)
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Merci, la précision sur les <ul> et <div> est clair,
    le reste aussi mais je doute sur ma faculté à l'avoir fait correctement:

    petite hésitation par exemple sur: </li></ul>\n ou </li>\n</ul> ?
    le \n ou \n\n correspond à quoi ? Quand est-ce qu'il faut mettre l'un ou l'autre ou rien ?

    voici le résultat:

    1. $i = 1;
    2. foreach($order as $key => $out)
    3. {
    4.  
    5. $s .= "<ul class= 'sections'>\n";
    6. if ($out[0]['disp'] == 1) $s .= "<ul class= 'sections-title'><li class='section-title' id='section-title-$i'>" . $key . "</li></ul>\n";
    7.  
    8. $j = 1;
    9. foreach($out as $page)
    10. {
    11. $active = ($rs['id'] == $page['id']) ? "active" : '';
    12. $s .= "<ul class= 'sous-sections-title'><li class='sous-section-title-$i $active' id='sous-section-title-$i.$j'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li></ul>\n";
    13. $j++;
    14. }
    15. $s .= "</ul>\n\n";
    16. $i++;
    17. }
    18.  
    19. return $s;
    20. }



    En testant les styles dans CSSEdit tout fonctionne parfaitement sauf lorsque je test les:

    li#sous-section-title-1.1.sous-section-title-1
    li#sous-section-title-1.2.sous-section-title-1
    li#sous-section-title-1.3.sous-section-title-1
    etc
    li#sous-section-title-2.1.sous-section-title-2
    li#sous-section-title-2.2.sous-section-title-2
    etc
    li#sous-section-title-3.1.sous-section-title-3
    etc


    qui existent mais impossible de les modifier ? pourquoi ? je ne sais pas. Quel serait le problème ?


    En voyant le résultat de ce code, j'aimerais juste rajouter des styles "blocs" (ul ou div peut-être ? ; ) ),
    tout en gardant les styles existant:

    voici le lien pour les exemples:
    http://www.pocketdesigners.be/exemple_sections_blocs.pd...


    Petite explication:

    J'aimerais qu'un bloc contienne, toutes les sections-titles et leurs sous-sections:
    cela correspond presque au style:

    ul.sections (que je souhaite garder )

    qui permet de modifier tout les "blocs" sections-title et leurs sous sections (en jaune dans le pdf).
    Mais je souhaiterais que ceux-ci soit également compris dans un bloc (en bleu dans le pdf):

    même principe pour les sections-title: (exemple voir pdf)
    même principe les sous-sections-title: (exemple voir pdf)

    et aussi pour chaque sous-section-title lié à sa section: (exemple voir pdf)

    .sous-section-title-2

    par exemple, permet de modifier toutes les sous-sections-title-2 ce style est parfait aussi mais j'aimerais avoir un style en plus qui soit un bloc qui englobe toutes les sous-sections-title-2:
    et ceci serait possible pour toutes les sous-sections -title, 1.2.3.4…évidemment.

    C'est sans doute plus clair dans le pdf.

    J'espère que tu as encore la patience de m'aiguiller sur ce point.
    J'ai hâte d'en finir, de pouvoir commencer la constructions de mes sites,
    une dernière aide serait plus qu'espérée.

    Merci






    • Commenter cette réponse |
    Score
    0
    òh
    òi
    , Modérateur |
    Ah non, mais les <ul> ils sont déjà créés dans le code PHP que je t'ai filé !
    Tu as juste besoin de leur ajouter une class c'est tout.

    Par rapport aux div, ce que je voulais te dire c'est que d'avoir :
    1. <div>
    2. <ul>
    3. <li>
    4. <div>...</div>
    5. </li>
    6. <li>
    7. <div>...</div>
    8. </li>
    9. </ul>
    10. </div>


    Ou:
    1. <ul>
    2. <li>...</li>
    3. <li>...</li>
    4. </ul>


    C'est pareil ! La 2ème solution est même meilleure (normalement, on ne met pas de <div> dans un <li>, et plus généralement un élément de type "block" dans un élément de type "inline")

    Donc, si tu veux appliquer des styles spécifiques, il te faudra seulement ajouter des class à tes <ul> parce qu'ils n'en ont pas actuellement, il n'y en a que pour les <li>.
    Et ensuite, plutôt que d'appliquer les styles sur les div, tu appliques sur les ul ou li, c'est identique.
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Bonjour,

    J'ai suivis ton conseil, pas de <div> mais des <ul>:
    N'ayant pas de base en php, j'y vais par intuition, tatonnement et comparaison.
    Du coup je ne suis pas du tout sûr du résultat.
    De l'emplacement correct des <ul> et de leur fermeture ( </ul> ou </ul>\n ou
    </ul>\n\n)

    Il me semble que la hierarchie est bonne, mais le code pose un léger problème avec mon expanding menu, pourrais-tu me dire si cela te semble correct ?

    Quel aurait été le problème si j'avais utiliser des <div> ?


    voici le code

    1. $i = 1;
    2. foreach($order as $key => $out)
    3. {
    4. $s .= "<ul class= 'sections'>";
    5. if ($out[0]['disp'] == 1)
    6.  
    7.  
    8. $s .= "<ul class= 'sections-title'>";
    9. $s .= "<li class='section-title-$i $active'>" . $key . "</li>\n";
    10.  
    11.  
    12. $j = 1;
    13.  
    14. $s .= "<ul class= 'sous-sections-title'>";
    15. $s .= "<li class='sous-sections-title $active' id='sous-section-title-$i'></li>\n";
    16.  
    17.  
    18.  
    19.  
    20. foreach($out as $page)
    21.  
    22. {
    23. $active = ($rs['id'] == $page['id']) ? "active" : '';
    24. $s .= "<li class='sous-section-title-$i.$j $active'><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>\n";
    25. $j++;
    26. }
    27.  
    28. $s .= "</ul>";
    29. $s .= "</ul>";
    30. $s .= "</ul>";
    31. $s .= "</ul>\n";
    32. $s .= "</ul>\n";
    33. $s .= "</ul>\n\n";
    34. $i++;
    35. }
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    , Modérateur |
    Tu n'as pas besoin de div, tu peux mettre des class styles à tes <ul> et tu auras tout ce que tu veux je pense
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Salut Omar,

    J'ai testé avec l'<ul>, cela donne une hierarchie intéressante,
    presque comme je le souhaite, mais ce n'est pas aussi complet que celle décrite plus haut
    C'est vraiment cette hierarchie (avec des <div>) que je recherche.
    Les balises <div> me serviraient à regrouper/ou à isoler des objets afin de leur attribuer une mise en forme commune ou particulière.
    • Commenter cette réponse |
    Afficher plus de solutions

    Ce n'est pas ce que vous cherchiez ?

    Tom's guide dans le monde
    • Allemagne
    • Italie
    • Irlande
    • Royaume Uni
    • Etats Unis
    Suivre Tom's Guide
    Inscrivez-vous à la Newsletter
    • ajouter à twitter
    • ajouter à facebook
    • ajouter un flux RSS