Créer un sous menu au sous menu existant ?

Créer un sous menu au sous menu existant ? - HTML/CSS - Programmation

Marsh Posté le 27-10-2005 à 22:43:53    

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

Reply

Marsh Posté le 27-10-2005 à 22:43:53   

Reply

Marsh Posté le 27-10-2005 à 23:06:52    

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

Reply

Marsh Posté le 27-10-2005 à 23:16:56    

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
Reply

Marsh Posté le 27-10-2005 à 23:20:00    

Reply

Marsh Posté le 28-10-2005 à 09:22:55    

<!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
Reply

Marsh Posté le 28-10-2005 à 09:36:07    

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
Reply

Marsh Posté le 28-10-2005 à 12:29:58    

Ok CNeo pa de pb

Message cité 1 fois
Reply

Marsh Posté le 28-10-2005 à 13:00:53    

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
Reply

Marsh Posté le 28-10-2005 à 14:31:59    

Merci beaucoup pour ton aide

Message cité 1 fois
Reply

Marsh Posté le 28-10-2005 à 15:30:26    

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

Reply

Marsh Posté le 28-10-2005 à 15:30:26   

Reply

Marsh Posté le 28-10-2005 à 15:41:44    

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

Message cité 1 fois
Reply

Marsh Posté le 28-10-2005 à 16:59:10    

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

Reply

Marsh Posté le 28-10-2005 à 19:06:42    

Tu la fini?

Message cité 1 fois
Message édité par quicky77 le 28-10-2005 à 19:09:48
Reply

Marsh Posté le 28-10-2005 à 19:09:29    

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
Reply

Marsh Posté le 28-10-2005 à 19:12:53    

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

Reply

Marsh Posté le 28-10-2005 à 21:31:04    

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
Reply

Marsh Posté le 28-10-2005 à 22:28:54    

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

Reply

Marsh Posté le 29-10-2005 à 19:28:50    

D'accord pas de probleme j'attend la confirmation

Message cité 1 fois
Reply

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

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
Reply

Marsh Posté le 29-10-2005 à 22:56:18    

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 !

Reply

Marsh Posté le 30-10-2005 à 02:19:55    

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

Message cité 1 fois
Reply

Marsh Posté le 30-10-2005 à 11:03:28    

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.

Reply

Marsh Posté le 30-10-2005 à 12:07:25    

Reply

Marsh Posté le 30-10-2005 à 12:16:44    

quicky77 a écrit :

C'est noté


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

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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