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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1145677
barthoose
Posté le 10-07-2005 à 19:59:45  profilanswer
 

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 ;-)

mood
Publicité
Posté le 10-07-2005 à 19:59:45  profilanswer
 

n°1145689
shrito
Posté le 10-07-2005 à 20:09:08  profilanswer
 

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
n°1145738
barthoose
Posté le 10-07-2005 à 21:16:38  profilanswer
 

je vais essayer :jap: merci

n°1145754
gatsusat
Posté le 10-07-2005 à 21:34:47  profilanswer
 

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

n°1145756
shrito
Posté le 10-07-2005 à 21:36:27  profilanswer
 

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

n°1145758
gatsusat
Posté le 10-07-2005 à 21:37:35  profilanswer
 

ben idem considère UL comme un DIV

n°1145761
shrito
Posté le 10-07-2005 à 21:39:52  profilanswer
 

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

n°1145794
plainsofpa​in
Pingouino's lover
Posté le 10-07-2005 à 22:28:59  profilanswer
 

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
n°1145796
gatsusat
Posté le 10-07-2005 à 22:32:54  profilanswer
 

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
n°1145798
barthoose
Posté le 10-07-2005 à 22:35:44  profilanswer
 

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

mood
Publicité
Posté le 10-07-2005 à 22:35:44  profilanswer
 

n°1145799
plainsofpa​in
Pingouino's lover
Posté le 10-07-2005 à 22:36:18  profilanswer
 

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
n°1145801
shrito
Posté le 10-07-2005 à 22:37:11  profilanswer
 

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
n°1145804
gatsusat
Posté le 10-07-2005 à 22:40:32  profilanswer
 

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
n°1145918
plainsofpa​in
Pingouino's lover
Posté le 11-07-2005 à 06:31:08  profilanswer
 

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
n°1145923
gatsusat
Posté le 11-07-2005 à 07:39:52  profilanswer
 

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

n°1145928
plainsofpa​in
Pingouino's lover
Posté le 11-07-2005 à 07:57:45  profilanswer
 

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

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

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

 

Sujets relatifs
[HTML/PHP] Récupérer données d'un csv[HTML/CSS/Javascript] z-index avec rollover sur image ( zoom CSS )
envoie de formualire : trois clics FF contre un seul pour IE[HTML] Gros problème de Checkbox
Document Word dans une cellule d'un tableau HTML[HTML] Combo box choix multiple
apercu d'une page html[HTML/CSS]alignement texte différents das une même cellule[résolu]
[php] Enlever les balises html d'une chaine de caractèrecorrecteur HTML
Plus de sujets relatifs à : [HTML] - Sous menus qui apparaissent au fur et à mesure des clics

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

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR