Comment faire un menu déroulant à 3 niveaux ?

Comment faire un menu déroulant à 3 niveaux ? - HTML/CSS - Programmation

Marsh Posté le 30-08-2004 à 14:52:10    

Salut à tous  :hello:  
 
J'ai créé 1 menu déroulant selon la méthode de l'excellent site  alsacreations.
 
Seulement voilà, je voudrais faire un menu déroulant à 3 niveaux :
- menu
- sous-menu
- sous-sous-menu
 
mais je ne connais pas le javascript  :(  
De plus quelles balises HTML utiliser ?
 
Quelqu'un pourrait-il m'aider ?
 
le code JS :

Citation :

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


le code XHTML :

Citation :

<dl id="menu">
<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
<dt onclick="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>
</ul>
</dd>  
<dt onclick="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.1</a></li>
</ul>
</dd>
<dt onclick="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.1</a></li>
</ul>
</dd>
</dl>
</div>


 
Merci d'avance
 [:fafane84]


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 30-08-2004 à 14:52:10   

Reply

Marsh Posté le 30-08-2004 à 15:14:44    

menu=new Array();
var nb_ad=-1;  
var nb_port=0;
var cpt=0;
var nom="";
var nb_result=tabjs1.length;
while (cpt<nb_result)
 {
    {
     nb_port=0;
   nb_ad++;
   nom=tabjs1[cpt];
 
menu[nb_ad]=new Array();
for (i=0;i<tabjs[nb_ad].length;i++)
menu[nb_ad][i]=new Option(tabjs[nb_ad][i],tabjs[nb_ad][i])
 
    }
    {
    }
  cpt++;
 }
 
 
 
// liste des fonctions JS
function changeSousTheme(numeroMenu){
 for (i=document.menuDeroulant.sousTheme.options.length-1;i>0;i--){
  document.menuDeroulant.sousTheme.options[i]=null
  }
   
 for (i=0;i<menu[numeroMenu].length;i++){
  document.menuDeroulant.sousTheme.options[i]=new Option(menu[numeroMenu][i].text,menu[numeroMenu][i].value)
  }
   
 document.menuDeroulant.sousTheme.selectedIndex=0
 }
 
function selectmenu(theme_prin){
 if (theme_prin.theme.options[theme_prin.theme.selectedIndex].value == "null" ){
  alert('selectionnez d\'abord une adresse IP');
  }
 else{
  window.top.location.href = theme_prin.theme.options[theme_prin.theme.selectedIndex].value;
  }
 }
 
function destination(){
 var destination = document.menuDeroulant.sousTheme.options[document.menuDeroulant.sousTheme.selectedIndex].value;
 
 if(destination=="null" ){
  alert('Veuillez saisir une destination valide!');
 }
 else{
  window.top.location.href = destination;
  }
 }
 
 
voici un double menu refait la même chose une fois de plus et ça marche!

Reply

Marsh Posté le 30-08-2004 à 15:24:37    

Ouh la la  :ouch:  :ouch:  :ouch:  
 
Merci de ta réponse ultra-rapide 23samael
 
mais je n'y comprends rien.
 
Je vais peut-être abandonner cette idée  :(


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 30-08-2004 à 15:26:07    

fafane84 a écrit :

Ouh la la  :ouch:  :ouch:  :ouch:  
 
Merci de ta réponse ultra-rapide 23samael
 
mais je n'y comprends rien.
 
Je vais peut-être abandonner cette idée  :(


 
Exact. Utiliser des codes auxquels on ne comprend rien n'a pas de sens. :)
 
Soit tu te mets un minimum au JS, soit tu te contentes de choses plus faciles (et parfois tout autant fonctionnelles).

Reply

Marsh Posté le 30-08-2004 à 15:33:06    

c pas très dur :
- tu crées un menu : menu=new Array();
- tu le remplies : menu[nb_ad][i]=new Option(tabjs[nb_ad][i],tabjs[nb_ad][i])  
 
nb_ad correspond au nombre de choix du menu 1
i correpond au nombre de choix correspondant à l'option du menu 1
 
les fonctions en dessous servent pour l'affichage automatique lors de la sélection des choix!

Reply

Marsh Posté le 30-08-2004 à 15:37:28    

Reply

Marsh Posté le 30-08-2004 à 15:49:37    


 
Moi quand je vois <script language="javascript">, je zappe...
 
Merde on est en 2004...

Reply

Marsh Posté le 30-08-2004 à 15:54:47    

qu'est ce que tu veux à la place alors!

Reply

Marsh Posté le 30-08-2004 à 15:58:07    

<script type="text/javascript">
 
:/

Reply

Marsh Posté le 30-08-2004 à 15:59:05    

Et c'est sans parler de la non-utilisation du DOM et des names à la place des id... :/

Reply

Marsh Posté le 30-08-2004 à 15:59:05   

Reply

Marsh Posté le 30-08-2004 à 16:00:26    

Hermes le Messager a écrit :

Moi quand je vois <script language="javascript">, je zappe...
 
Merde on est en 2004...


 
Oui mais alors comment faire un menu sans javascript ?
 
Car j'ai lu çà >>ici<<:

Citation :

Des menus déroulants grâce aux CSS
Objectif : réaliser un menu déroulant XHTML + CSS (sans javascript) avec fonds transparents.
Inconvénients : seuls quelques navigateurs récents (Mozilla/Firebird, Safari) seront capables de rendre ce menu correctement.
En contre-partie, comme IE Windows n'affichera pas les sous-menu, il y a possibilité d'utiliser des PNG avec transparence alpha.


 
Et çà (dans le tutos du 1er post) :

Citation :

Comme vous le remarquez dans le code Javascript ci-dessous, le script appelle la fonction "montre()" au chargement de
la page. Cet appel ("montre" vide) a pour effet de cacher tous les sous-menus dès le chargement du document.
Il aurait été plus simple de masquer ces sous-menus en définissant simplement leur CSS à "display:none" (c'était
d'ailleurs le cas dans la première version du tutoriel), alors pourquoi avoir préféré utiliser un appel javascript pour obtenir
le même effet ?
L'intérêt est une question d'Accessibilité, ou plutôt d'interopérabilité : il existe une part non négligeable d'internautes
pour qui Javascript est désactivé.
Pour ces utilisateurs, le menu doit rester utillisable, ce qui n'aurait pas été le cas si les sous-menus avaient été cachés par
CSS, car ils le resteraient.
Dans notre cas, les menus sont effacés au chargement, mais uniquement si javascript est actif. Dans les autres cas, le
menu reste navigable même si aucun comportement au survol ne sera déclenché.


 
Alors que faire ?
 


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 30-08-2004 à 16:07:31    

fafane84 a écrit :

Oui mais alors comment faire un menu sans javascript ?


 
Si tu veux que le menu fonctionne également avec IE, l'utilisation du JS est obligatoire.
 
 

Citation :

Et çà (dans le tutos du 1er post) :

Citation :

Comme vous le remarquez dans le code Javascript ci-dessous, le script appelle la fonction "montre()" au chargement de
la page. Cet appel ("montre" vide) a pour effet de cacher tous les sous-menus dès le chargement du document.
Il aurait été plus simple de masquer ces sous-menus en définissant simplement leur CSS à "display:none" (c'était
d'ailleurs le cas dans la première version du tutoriel), alors pourquoi avoir préféré utiliser un appel javascript pour obtenir
le même effet ?
L'intérêt est une question d'Accessibilité, ou plutôt d'interopérabilité : il existe une part non négligeable d'internautes
pour qui Javascript est désactivé.
Pour ces utilisateurs, le menu doit rester utillisable, ce qui n'aurait pas été le cas si les sous-menus avaient été cachés par
CSS, car ils le resteraient.
Dans notre cas, les menus sont effacés au chargement, mais uniquement si javascript est actif. Dans les autres cas, le
menu reste navigable même si aucun comportement au survol ne sera déclenché.


 
Alors que faire ?


 
Un menu en JS + CSS (le JS servant à masquer ou à montrer les sous-menus en réalité composés de div ou autre balise avec un id) qui ne fonctionne pas sans JS, mais qui permet à l'utilisateur d'avoir accès au sous-menu en cliquant sur le titre de chaque menu à l'aide d'un bête lien en HTML.
 
 

Reply

Sujets relatifs:

Leave a Replay

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