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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Créer un sous menu au sous menu existant ?

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Créer un sous menu au sous menu existant ?

n°1233041
quicky77
Posté le 27-10-2005 à 22:43:53  profilanswer
 

Bnojour a tous,
 
Je voudrais savoir si quelqu'un pouvez m'aider car je voudrais créer un sous sous menu c'est a dire rajouter un catégorie de menu au sous menu voici le script qui vous parlera plus.
 

Citation :

<html>
 
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sans titre</title>
<meta name="generator" content="Namo WebEditor v6.0">
</head>
 
<body>
<div id="layer1" style="width:836px; height:648px; position:absolute; left:63px; top:43px; z-index:1;">
    <p>&nbsp;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) {
  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
 }
if (d) {d.style.display='block';}
}
//-->
</script>
 
 
<style type="text/css">
 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
 
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;  
}
 
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
 
<body>
 
<div id="menu">
 <dl>
  <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
 </dl>
 
 <dl>    
  <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
   <dd id="smenu1">
    <ul>
     <li><a href="#">Sous-Menu 1.1</a></li>
                                       Ajouter un sous menu au sous menu 1.1 ci dessus
     <li><a href="#">Sous-Menu 1.2</a></li>
     <li><a href="#">Sous-Menu 1.3</a></li>
     <li><a href="#">Sous-Menu 1.4</a></li>
     <li><a href="#">Sous-Menu 1.5</a></li>
     <li><a href="#">Sous-Menu 1.6</a></li>
    </ul>
   </dd>
 </dl>
 
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
   <dd id="smenu2">
    <ul>
     <li><a href="#">Sous-Menu 2.1</a></li>
     <li><a href="#">Sous-Menu 2.2</a></li>
     <li><a href="#">Sous-Menu 2.3</a></li>
     <li><a href="#">Sous-Menu 2.4</a></li>
    </ul>
   </dd>
 </dl>
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
   <dd id="smenu3">
    <ul>
     <li><a href="#">Sous-Menu 3.1</a></li>
     <li><a href="#">Sous-Menu 3.2</a></li>
     <li><a href="#">Sous-Menu 3.3</a></li>
     <li><a href="#">Sous-Menu 3.4</a></li>
     <li><a href="#">Sous-Menu 3.5</a></li>
    </ul>
   </dd>
 </dl>
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
   <dd id="smenu4">
    <ul>
     <li><a href="#">Sous-Menu 4.1</a></li>
     <li><a href="#">Sous-Menu 4.2</a></li>
     <li><a href="#">Sous-Menu 4.3</a></li>
    </ul>
   </dd>
 </dl>
 
</div>
 
 
</body>
<p></p>
</div>
</body>
 
</html>


 
Cordialement

mood
Publicité
Posté le 27-10-2005 à 22:43:53  profilanswer
 

n°1233074
CNeo
Posté le 27-10-2005 à 23:06:52  profilanswer
 

Aurais-tu une page d'exemple parce que là je comprends pas pourquoi il y a du JS partout.

n°1233084
quicky77
Posté le 27-10-2005 à 23:16:56  profilanswer
 

Nan je n'ai pas de page d'exemple mais je vais tant donné un. Par exemple un menu est appeler "Music" il a un sous menu appeler "Reagge" et reagge a lui ossi un sous menu appeler "Gentleman".
 
Schématiquement ca donne ca: Music (menu principal)
                                              Reagge (sous menu)
                                                 Gentleman (sous sous menu)
Tu voi ou pas?


Message édité par quicky77 le 27-10-2005 à 23:17:51
n°1233088
quicky77
Posté le 27-10-2005 à 23:20:00  profilanswer
 
n°1233172
CNeo
Posté le 28-10-2005 à 09:22:55  profilanswer
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project 6</title>
<style type="text/css">
body {margin: 1px; padding: 0; behavior: url(csshover.htc);}
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;}
div#nav ul.l1 li.submenu:hover ul.l2,
div#nav ul.l2 li.submenu:hover ul.l3 {display:block;}
</style>
</head>
<body>
 
<div id="nav">
<ul class="l1">
 <li><a href="">blabla</a></li>
 <li class="submenu"><a href="">blabla</a>
  <ul class="l2">
   <li><a href="">blabla</a></li>
   <li><a href="">blabla</a></li>
   <li><a href="">blabla</a></li>
   <li><a href="">blabla</a></li>
  </ul>
 </li>
 <li><a href="">blabla</a></li>
 <li class="submenu"><a href="">blabla</a>
  <ul class="l2">
   <li><a href="">blabla</a></li>
   <li class="submenu"><a href="">blabla</a>
    <ul class="l3">
     <li><a href="">blabla</a></li>
     <li><a href="">blabla</a></li>
     <li><a href="">blabla</a></li>
     <li><a href="">blabla</a></li>
    </ul>
   </li>
   <li><a href="">blabla</a></li>
   <li><a href="">blabla</a></li>
   <li><a href="">blabla</a></li>
   <li><a href="">blabla</a></li>
   <li><a href="">blabla</a></li>
  </ul>
 </li>
 <li><a href="">blabla</a></li>
</ul>
</div>
 
</body>
</html>


 
Ce script fonctionne sous Firefox etc mais ne fonctionne sous IE que si l'utilisateur laisse s'activer le fichier qui est appelé dans le début du script ci-dessus.
 
Sinon il faut mettre de JavaScript !
J'essaye de t'en faire un...


Message édité par CNeo le 28-10-2005 à 09:24:46
n°1233175
Roane
Pingouino's fan
Posté le 28-10-2005 à 09:36:07  profilanswer
 

quicky77 a écrit :

Tiens un exemple
http://www.asp-php.net/tutorial/asp-php/structure.php


 
Ca t'aide à ne faire ton menu qu'une fois ça, en l'incluant par php.
 
Moi je pense que ca serait définitivement mieux si les débutants essayaient de comprendre ce qu'ils vont faire, avant de mettre du code récupéré à droite à gauche, parce que vu le nombre de gens qui postent sans comprendre ce qu'ils font, c'est pénible à la longue ...
 
Définitivement, je pense que la prochaine version de php devraient inclure beaucoup plus d'éléments de rigueur, comme le typage, la déclaration obligatoire, etc ... On éviterait de voir des gens n'y connaissant rien en prog bricoler avec ce qu'ils trouvent sur le net :o


---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
n°1233377
quicky77
Posté le 28-10-2005 à 12:29:58  profilanswer
 

Ok CNeo pa de pb

Message cité 1 fois
n°1233394
CNeo
Posté le 28-10-2005 à 13:00:53  profilanswer
 

quicky77 a écrit :

Ok CNeo pa de pb


 
Je ne t'oublies pas je suis même dessus depuis ce matin... :D
Je touche au but...


Message édité par CNeo le 28-10-2005 à 13:26:25
n°1233504
quicky77
Posté le 28-10-2005 à 14:31:59  profilanswer
 

Merci beaucoup pour ton aide

Message cité 1 fois
n°1233597
CNeo
Posté le 28-10-2005 à 15:30:26  profilanswer
 

quicky77 a écrit :

Merci beaucoup pour ton aide


 
J'ai de petits problèmes avec le JavaScript car je ne suis pas très doué mais je viens de trouver la solution...

mood
Publicité
Posté le 28-10-2005 à 15:30:26  profilanswer
 

n°1233619
quicky77
Posté le 28-10-2005 à 15:41:44  profilanswer
 

ok ok tu le poste sur le forum ou tu me lenvoi par mail?
 
Previens moi

Message cité 1 fois
n°1233705
CNeo
Posté le 28-10-2005 à 16:59:10  profilanswer
 

quicky77 a écrit :

ok ok tu le poste sur le forum ou tu me lenvoi par mail?
 
Previens moi


 
J'ai fini pour ceux qui ont JavaScript (~90% des internautes).

n°1233813
quicky77
Posté le 28-10-2005 à 19:06:42  profilanswer
 

Tu la fini?

Message cité 1 fois
Message édité par quicky77 le 28-10-2005 à 19:09:48
n°1233814
CNeo
Posté le 28-10-2005 à 19:09:29  profilanswer
 

quicky77 a écrit :

D'accord é lé 10% c'est quoi? CSS?


 
J'essaye en effet de le mettre en CSS pour ceux qui n'ont pas JS.
Mais j'ai un problème http://forum.hardware.fr/hardwaref [...] 9296-1.htm


Message édité par CNeo le 28-10-2005 à 19:10:28
n°1233816
quicky77
Posté le 28-10-2005 à 19:12:53  profilanswer
 

ok ok je doi m'absenté un peu je revien au plus vite

n°1233875
quicky77
Posté le 28-10-2005 à 21:31:04  profilanswer
 

Salut CNeo,
 
Le code que tu a fait ci dessous fonction nan???
La seul chose c'est qui est verticale mais je pense qu'il y a qu'une seul fonction a changer pour qu'il devienne horizontal
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>
  3. <head>
  4. <title>Project 6</title>
  5. <script type="text/javascript">
  6. <!--
  7. window.onload=montre;
  8. function montre(id) {
  9.   for(var i = 1; i<=20; i++){
  10.     if (document.getElementById('sm'+i)) {document.getElementById('sm'+i).style.display='none';}
  11.     if (document.getElementById('ssm'+i)) {document.getElementById('ssm'+i).style.display='none';}
  12.   }
  13.   document.getElementById('sm'+id).style.display='block';
  14. }
  15. function montressm(id) {
  16.   for(var i = 1; i<=20; i++){
  17.     if (document.getElementById('ssm'+i)) {document.getElementById('ssm'+i).style.display='none';}
  18.   }
  19.   document.getElementById('ssm'+id).style.display='block';
  20. }
  21. //-->  
  22. </script>
  23. <style type="text/css">
  24. <!--
  25. body {padding: 0; margin: 1px;}
  26. dl, dt, dd, ul, li {margin: 0; padding: 0; list-style-type: none;}
  27. #menu {width: 7em; position: absolute; top: 1px; left: 1px; border: 1px solid blue;}
  28. #menu dt {cursor: pointer; font-weight: bold;}
  30. #menu dd {
  31. width: 8em;
  32. position: absolute;
  33. left: 7em;
  34. margin-top: -2em;
  35. border: 1px solid blue;
  36. display: none;
  37. }
  38. #menu dd a {width: 8em;}
  40. #menu dd ul {position: absolute; left: 8em; border: 1px solid blue; width: 9em; margin-top: -2em;}
  41. #menu li a {height: 2em; width: 9em;}
  42. #menu a {
  43. text-align: center;
  44. color: #000;
  45. text-decoration: none; 
  46. display: block;
  47. height: 2em;
  48. background: #2cd8e0;
  49. width: 7em;
  50. }
  51. #menu a:hover {text-decoration: underline;}
  52. #menu dt:hover dd,
  53. #menu dd a:hover ul {display: block;}
  54. -->
  55. </style>
  56. </head>
  57. <body>
  59. <dl id="menu">
  60.   <dt onmouseover="montre(1)"><a href="#">Menu 1</a></dt>
  61.     <dd id="sm1">
  62.       <a href="#">Sous-Menu 1.1</a>
  63.       <a href="#">Sous-Menu 1.2</a>
  64.       <a href="#">Sous-Menu 1.3</a>
  65.     </dd>
  67.   <dt onmouseover="montre(2)"><a href="#">Menu 2</a></dt>
  68.     <dd id="sm2" onmouseover="montressm(1)">
  69.       <a href="#">Sous-Menu 2.1</a>
  70.         <ul id="ssm1">
  71.           <li><a href="#">Sous-Sous-Menu 1</a></li>
  72.         </ul>
  73.       <a href="#">Sous-Menu 2.2</a>
  74.     </dd>
  76.   <dt onmouseover="montre(3)"><a href="#">Menu 3</a></dt>
  77.     <dd id="sm3">
  78.       <a href="#">Sous-Menu 3.1</a>
  79.       <a href="#">Sous-Menu 3.2</a>
  80.       <a href="#">Sous-Menu 3.3</a>
  81.       <a href="#">Sous-Menu 3.4</a>
  82.       <a href="#">Sous-Menu 3.5</a>
  83.       <a href="#">Sous-Menu 3.6</a>
  84.     </dd>
  86.   <dt onmouseover="montre(4)"><a href="#">Menu 4</a></dt>
  87.     <dd id="sm4">
  88.       <a href="#">Sous-Menu 4.1</a>
  89.       <a href="#">Sous-Menu 4.2</a>
  90.     </dd>
  91. </dl>
  93. </body>
  94. </html>

Message cité 1 fois
n°1233910
CNeo
Posté le 28-10-2005 à 22:28:54  profilanswer
 

quicky77 a écrit :

Salut CNeo,
 
Le code que tu a fait ci dessous fonction nan???
La seul chose c'est qui est verticale mais je pense qu'il y a qu'une seul fonction a changer pour qu'il devienne horizontal
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>
  3. <head>
  4. <title>Project 6</title>
  5. <script type="text/javascript">
  6. <!--
  7. window.onload=montre;
  8. function montre(id) {
  9.   for(var i = 1; i<=20; i++){
  10.     if (document.getElementById('sm'+i)) {document.getElementById('sm'+i).style.display='none';}
  11.     if (document.getElementById('ssm'+i)) {document.getElementById('ssm'+i).style.display='none';}
  12.   }
  13.   document.getElementById('sm'+id).style.display='block';
  14. }
  15. function montressm(id) {
  16.   for(var i = 1; i<=20; i++){
  17.     if (document.getElementById('ssm'+i)) {document.getElementById('ssm'+i).style.display='none';}
  18.   }
  19.   document.getElementById('ssm'+id).style.display='block';
  20. }
  21. //-->  
  22. </script>
  23. <style type="text/css">
  24. <!--
  25. body {padding: 0; margin: 1px;}
  26. dl, dt, dd, ul, li {margin: 0; padding: 0; list-style-type: none;}
  27. #menu {width: 7em; position: absolute; top: 1px; left: 1px; border: 1px solid blue;}
  28. #menu dt {cursor: pointer; font-weight: bold;}
  30. #menu dd {
  31. width: 8em;
  32. position: absolute;
  33. left: 7em;
  34. margin-top: -2em;
  35. border: 1px solid blue;
  36. display: none;
  37. }
  38. #menu dd a {width: 8em;}
  40. #menu dd ul {position: absolute; left: 8em; border: 1px solid blue; width: 9em; margin-top: -2em;}
  41. #menu li a {height: 2em; width: 9em;}
  42. #menu a {
  43. text-align: center;
  44. color: #000;
  45. text-decoration: none; 
  46. display: block;
  47. height: 2em;
  48. background: #2cd8e0;
  49. width: 7em;
  50. }
  51. #menu a:hover {text-decoration: underline;}
  52. #menu dt:hover dd,
  53. #menu dd a:hover ul {display: block;}
  54. -->
  55. </style>
  56. </head>
  57. <body>
  59. <dl id="menu">
  60.   <dt onmouseover="montre(1)"><a href="#">Menu 1</a></dt>
  61.     <dd id="sm1">
  62.       <a href="#">Sous-Menu 1.1</a>
  63.       <a href="#">Sous-Menu 1.2</a>
  64.       <a href="#">Sous-Menu 1.3</a>
  65.     </dd>
  67.   <dt onmouseover="montre(2)"><a href="#">Menu 2</a></dt>
  68.     <dd id="sm2" onmouseover="montressm(1)">
  69.       <a href="#">Sous-Menu 2.1</a>
  70.         <ul id="ssm1">
  71.           <li><a href="#">Sous-Sous-Menu 1</a></li>
  72.         </ul>
  73.       <a href="#">Sous-Menu 2.2</a>
  74.     </dd>
  76.   <dt onmouseover="montre(3)"><a href="#">Menu 3</a></dt>
  77.     <dd id="sm3">
  78.       <a href="#">Sous-Menu 3.1</a>
  79.       <a href="#">Sous-Menu 3.2</a>
  80.       <a href="#">Sous-Menu 3.3</a>
  81.       <a href="#">Sous-Menu 3.4</a>
  82.       <a href="#">Sous-Menu 3.5</a>
  83.       <a href="#">Sous-Menu 3.6</a>
  84.     </dd>
  86.   <dt onmouseover="montre(4)"><a href="#">Menu 4</a></dt>
  87.     <dd id="sm4">
  88.       <a href="#">Sous-Menu 4.1</a>
  89.       <a href="#">Sous-Menu 4.2</a>
  90.     </dd>
  91. </dl>
  93. </body>
  94. </html>



 
 
Ce code ne fonctionne qu'avec du JS et je cherche la solution pour que ce la marche avec que du CSS, bien sûr cela sera un petit peu différent sinon il n'y aurait pas besoin de JS.
 
Je t'explique : en théorie (un bug que je ne m'explique pas m'empêche de le refaire, je fonce vers un autre forum pour demander de l'aide) on peut faire un menu tout en XHTML/CSS ce qui a déjà été fait...
Le JS permet d'empêcher la disparition des sous-menus après la fin du survol...
Je n'ai pas encore essayé de mettre mon menu à l'horizontale mais si c'est ce que tu veux je peux essayer...

n°1234227
quicky77
Posté le 29-10-2005 à 19:28:50  profilanswer
 

D'accord pas de probleme j'attend la confirmation

Message cité 1 fois
n°1234239
CNeo
Posté le 29-10-2005 à 19:45:59  profilanswer
 

quicky77 a écrit :

D'accord pas de probleme j'attend la confirmation


 
J'ai presque fini une serie de menus que je mettre en ligne ici. Surveille ce site !

Message cité 1 fois
n°1234295
CNeo
Posté le 29-10-2005 à 22:56:18  profilanswer
 

CNeo a écrit :

J'ai presque fini une serie de menus que je mettre en ligne ici. Surveille ce site !


 
C'est fait ! Les premiers menus sont en ligne ! Désolé pour le design pitoyable, cela va s'arranger !

n°1234341
quicky77
Posté le 30-10-2005 à 02:19:55  profilanswer
 

ok pas de probleme je vais aller voir ca.
Merci encore pour tout

Message cité 1 fois
n°1234384
CNeo
Posté le 30-10-2005 à 11:03:28  profilanswer
 

quicky77 a écrit :

ok pas de probleme je vais aller voir ca.
Merci encore pour tout


 
Même si tu trouves ton bonheur, continue à passer sur mon site régulièrement (en tous cas jusqu'à mardi, après je suis en cours et mon site sera remis à jour à Noël) car je cherche encore à les améliorer.

n°1234405
quicky77
Posté le 30-10-2005 à 12:07:25  profilanswer
 
n°1234409
CNeo
Posté le 30-10-2005 à 12:16:44  profilanswer
 

quicky77 a écrit :

C'est noté


 
A noter aussi : changement d'url, presque pareil mais bon : http://perso.wanadoo.fr/CNeo/CMenus/menus.htm.

mood
Publicité
Posté le   profilanswer
 


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

  Créer un sous menu au sous menu existant ?

 

Sujets relatifs
probleme de variable dans un menu[VB6][ActiveX] Est-il possible de créer un contrôle ActiveX avec New ?
Comment améliorer mon menuaméliorer mon menu dynamique
Aidez moi à créer un menuAidez moi à créer un formulaire
Comment creer un chat irccréer un userform et créer autant de combobox qu'il y a de feuille
[XHTML, CSS] Menu avec des balises li et ul 
Plus de sujets relatifs à : Créer un sous menu au sous menu existant ?

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

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