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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Comment faire un menu déroulant à 3 niveaux ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Comment faire un menu déroulant à 3 niveaux ?

n°836585
fafane84
Posté le 30-08-2004 à 14:52:10  profilanswer
 

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
mood
Publicité
Posté le 30-08-2004 à 14:52:10  profilanswer
 

n°836628
23samael
Posté le 30-08-2004 à 15:14:44  profilanswer
 

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!

n°836645
fafane84
Posté le 30-08-2004 à 15:24:37  profilanswer
 

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
n°836652
Hermes le ​Messager
Breton Quiétiste
Posté le 30-08-2004 à 15:26:07  profilanswer
 

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

n°836682
23samael
Posté le 30-08-2004 à 15:33:06  profilanswer
 

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!

n°836706
23samael
Posté le 30-08-2004 à 15:37:28  profilanswer
 
n°836726
Hermes le ​Messager
Breton Quiétiste
Posté le 30-08-2004 à 15:49:37  profilanswer
 


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

n°836732
23samael
Posté le 30-08-2004 à 15:54:47  profilanswer
 

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

n°836738
Hermes le ​Messager
Breton Quiétiste
Posté le 30-08-2004 à 15:58:07  profilanswer
 

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

n°836742
Hermes le ​Messager
Breton Quiétiste
Posté le 30-08-2004 à 15:59:05  profilanswer
 

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

mood
Publicité
Posté le 30-08-2004 à 15:59:05  profilanswer
 

n°836745
fafane84
Posté le 30-08-2004 à 16:00:26  profilanswer
 

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
n°836759
Hermes le ​Messager
Breton Quiétiste
Posté le 30-08-2004 à 16:07:31  profilanswer
 

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.
 
 


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

  Comment faire un menu déroulant à 3 niveaux ?

 

Sujets relatifs
Menu dynamique et Frameenvoi automatique d'un formulaire / menu JS vs CSS
Après macro, taper des caractéres renvoie dans le menu (Excel)problème de menu flash avec url +arguments en PHP
recursivité et menu multiniveaux[HTML] Tableaux Menu/Main
[JS] Créer un menu transparent en javascript plutot qu'avec des css[VB] Menu "Projet" - "Références" disparu (???)
un sous sous menuIncompatibilité menu déroulant et menu dynamique ?
Plus de sujets relatifs à : Comment faire un menu déroulant à 3 niveaux ?


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