[HTML] - Sous menus qui apparaissent au fur et à mesure des clics

- Sous menus qui apparaissent au fur et à mesure des clics [HTML] - HTML/CSS - Programmation

Marsh Posté le 10-07-2005 à 19:59:45    

Bonjour,
 
tout est dans le titre, après de longues recherches infructueuses, je cherche à faire apparaitre des images, boutons, etc... quand on clic sur un objet :
 
http://www.nicoco.free.fr/temp/menus.GIF
 
Comment procéder ?
 
Merci d'avance ;-)

Reply

Marsh Posté le 10-07-2005 à 19:59:45   

Reply

Marsh Posté le 10-07-2005 à 20:09:08    

c'est simple :
 
chaque menu ou sous menu doit correspondre à un div, l image a un img
 
<div id="menu">....</div>
<div id="sous_menu">....</div>
<div id="sous_sous_menu">....</div>
<img name="image">....</div>
 
ensuite tu ajoute un onClick="affiche('id_du_div')
 
<div id="menu" onClick="affiche('sous_menu')">....</div>
<div id="sous_menu" onClick="affiche('sous_sous_menu')">....</div>
<div id="sous_sous_menu" onClick="affiche('image')">....</div>
<img name="image">....</div>
 
ensuite o debut de ta page tu ajoute ca :
 
function change(nom)
{
fichier = document.getElementById(nom)
if (fichier.style.display == "none" )
{
fichier.style.display = ""
}
else
{
fichier.style.display = "none"
}
}
 
Enfin pour les elements que tu veux cacher au chargement de la page ajoute : style="display:none;" dans le <div>


Message édité par shrito le 10-07-2005 à 20:09:43
Reply

Marsh Posté le 10-07-2005 à 21:16:38    

je vais essayer :jap: merci

Reply

Marsh Posté le 10-07-2005 à 21:34:47    

mon dieu, tu mérites qu'on brule ta maison shrito
 
un menu c'est une liste et donc une liste c'est  
 
<ul>
<li></li>
<ul>
 
pas de DIV

Reply

Marsh Posté le 10-07-2005 à 21:36:27    

hum ca depend si tes listes sont dans le meme div... vu son dessin c'est pas le cas... donc moi je joue sur l affichage des div qui contiennent les listes...

Reply

Marsh Posté le 10-07-2005 à 21:37:35    

ben idem considère UL comme un DIV

Reply

Marsh Posté le 10-07-2005 à 21:39:52    

ui mais bon tu as pas plus raison que moi... les deux methode respectent les normes.. ceci dit en reflechissant bien tu es peut etre un peu plus logique..

Reply

Marsh Posté le 10-07-2005 à 22:28:59    

les normes sont peut-etre respectées, mais un menu avec des sous menus, c'est une liste avec des sous listes au niveau sémantique, en attendant <nl> en xhtml2 (navigation list) ...


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 10-07-2005 à 22:32:54    

gatsusat a écrit :

ben idem considère UL comme un DIV


 
voila un petit script fait main qui s'occupe de tout faire à ta place. J'entend par là que tu n'a même pas besoin de mettre les onclick="showmonmenu('leiddusousmenu')"
ce script fait tout tout seul
 
les sous menu ne sont pas cachés par CSS, mais par le JS, car si on affiche la page sans javascript, il faut bien qu'on puisse cliquer sur les liens des sous menus!
 
la seule recommendation est du respecter les UL LI A
 
voila un exemple ici http://gatsu.ftp.free.fr/html/scriptMenuauto.html
 
le squelette suivant doit etre conservé :

Code :
  1. <ul id="menu">
  2. <li><a href="#">lien</a></li>
  3. <li><a href="#">Sous Menu</a>
  4.  <ul>
  5.   <li><a href="#">lien</a></li>
  6.   <li><a href="#">lien</a></li>
  7.   <li><a href="#">lien</a></li>
  8.  </ul>
  9. </li>
  10. </ul>


 
 
bon voila le zoli script

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script>
  7. function DynamMenu(){
  8.  if(!document.getElementsByTagName) //On teste si on a le droit de faire mumuse avec le DOM sur les TAGNAME
  9.   return;
  10.  var Menu = document.getElementById('menu'); //On récupère le menu
  11.  var li = Menu.getElementsByTagName('LI'); //On récupère tous les LI du menu
  12.       for(var i=0; i<li.length-1; ++i) { //On scanne tous les LI
  13.    var sousUL = li[i].getElementsByTagName('UL'); //Pour chaque LI on recupère le UL dessous
  14.    if (sousUL[0]) { //On vérifié qu'il y a un UL dans le LI
  15.     sousUL[0].id = 'sousmenu' + i; //On met un ID à ce UL
  16.     sousUL[0].style.display = "none";
  17.     li[i].getElementsByTagName('A')[0].href= "javascript:ShowHideMenu('sousmenu" + i + "')";
  18.    } 
  19.   }
  20. }
  21. window.onload = DynamMenu;
  23. function ShowHideMenu(MenuId){
  24.  var SousMenu = document.getElementById(MenuId);
  25.  if (SousMenu.style.display=='block' || SousMenu.style.display == null) {
  26.   SousMenu.style.display = 'none'; //ON cache le sous menu
  27.  }
  28.  else{
  29.   SousMenu.style.display = 'block'; //On affiche le sous menu
  30.  }
  32. }
  33. </script>
  34. </head>
  36. <body>
  37. <ul id="menu">
  38. <li><a href="#">lien</a></li>
  39. <li><a href="#">lien</a></li>
  40. <li><a href="#">lien</a></li>
  41. <li><a href="#">Truc a cliquer pour etendre</a>
  42.  <ul id="test">
  43.   <li><a href="#">lien</a></li>
  44.   <li><a href="#">infos 12</a>
  45.    <ul>
  46.     <li><a href="#">lien</a></li>
  47.     <li><a href="#">lien</a></li>
  48.     <li><a href="#">lien</a></li>
  49.    </ul>
  50.   </li>
  51.   <li><a href="#">lien</a></li>
  52.  </ul>
  54. </li>
  55. <li><a href="#">lien</a></li>
  56. <li><a href="#">clic là aussi</a>
  57.  <ul>
  58.   <li><a href="#">lien</a></li>
  59.   <li><a href="#">lien</a></li>
  60.   <li><a href="#">lien</a></li>
  61.  </ul>
  62. </li>
  63. </ul>
  66. </body>
  67. </html>


Message édité par gatsusat le 10-07-2005 à 22:43:22
Reply

Marsh Posté le 10-07-2005 à 22:35:44    

:jap: :jap: :jap: :jap: :jap:

Reply

Marsh Posté le 10-07-2005 à 22:35:44   

Reply

Marsh Posté le 10-07-2005 à 22:36:18    

et sans js ? le menu est entièrement déroulé ?


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 10-07-2005 à 22:37:11    

lol :) ton code est surement plus pro que le mien... mais plus long et plus complexe pour lui...
 
PS : je vois que vous avez l air d etre plutot bon... donc si vous avez 5 min essayer de passer sur mon TOPIC : XMLHTTPREQUEST car personne ne sait m aider


Message édité par shrito le 10-07-2005 à 22:39:00
Reply

Marsh Posté le 10-07-2005 à 22:40:32    

attend plainsofpainounet je m'occupe de cela tout de suite, j'utilise une CSS pour cahcer les sous Menu, et donc là je vais le faire à partir du code
 
voila corrigé


Message édité par gatsusat le 10-07-2005 à 22:42:02
Reply

Marsh Posté le 11-07-2005 à 06:31:08    

Bravo gatsu :)
 
Good Job !


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 11-07-2005 à 07:39:52    

bon ben maintenant on peu faire des choses tous nus tous les deux ?

Reply

Marsh Posté le 11-07-2005 à 07:57:45    

Jamais, crève :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Sujets relatifs:

Leave a Replay

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