Discussion :

[Suwabara]

Bonjour,

j'ai un petit problème en essayant de faire un menu à plusieurs niveaux.
En fait j'ai un menu déroulant vertical sous cette forme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id='menu' >
             <h1>Navigation</h1>
             <dl>
               <dt id='menu1' onclick="javascript:afficher();"><a href=''>Accueil</a></dt>
               <dt id='menu2' onclick="javascript:afficher('menu2');"><a href='#'>Photos</a></dt>
                   <dd id='smenu2'>
	     	        <ul>
                       <li id='smenu21'><a href='#'>Intro</a></li>
                       <li id='smenu22'><a href='#'>photos1</a></li>
                     </ul>
           	       </dd>
               <dt id='menu3'onclick="javascript:afficher('menu3');"><a href='#'>Programmes</a></dt>
                  <dd id='smenu3'>
      		        <ul>
                       <li id='smenu31'><a href='#'>Intro</a></li>
                       <li id='smenu32'><a href='#'>prog1</a></li>
                       <li id='smenu33'><a href='#'>prog2</a></li>
      	     	   </ul>
                  </dd>
               <dt id='menu4'><a href=''>Forum</a></dt>
               <dt id='menu5'><a href=''>Contact</a></dt>
             </dl>
           </div>

Ce menu utilise une feuille de style externe CSS et un code javascript pour afficher/masquer les sous-menus lorsque l'on clique sur le menu


Mon problème est que j'aimerais qu'au chargement du menu, un des menus soit déjà préselectionné en respectant la feuille de style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#menu li a:hover,#menu li a:focus
{ background-color: lavender;
  color: darkblue;
  border-color: #FFFFFF;
}

J'avais pensé faire un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('menu2').focus();

mais cela ne marche pas.
...

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#menu li a:hover,#menu li a:focus, .defaut
{ background-color: lavender;
  color: darkblue;
  border-color: #FFFFFF;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('menu2').className='defaut';

[Suwabara]

Merci ca marche en partie.

J'ai bien ma couleur d'arrière plan qui est affichée.
Par contre la couleur du texte n'est pas changée.
Je pense que c'est parceque je n'ai pas de texte mais uniquement des liens <a>Lien</a> et ceux ci ne sont pas pris en compte dans cette méthode.

Du coup je en sais pas comment faire (je précise que je suis débutant en css, javascript ...)
j'ai essayé de mettre ".defaut a" au lieu de ".defaut" mais ca ne marche pas

[SpaceFrog]

est tu sur que "darkblue" est accepté par ton browser ? IE ou FFX ?

[Suwabara]

oui il accepte bien darkblue, mais en fait en l'occurence je m'étais planté je parlais plutôt de ce code css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#menu dt a:hover,#menu dt a:focus,.menusel
{ background-color: #8D9299;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

et j'ai mis ce code là dans le javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('menu2').className='menusel';

et donc l'arrière plan est bien changé, mais la couleur du texte non

par contre si je mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<dt id='menu2' onclick="javascript:afficher('menu2');">Texte1<a href='#'>Texte2</a></dt>

là il va afficher Texte1 en blanc et Texte2 en noir



je mets le lien vers ma page web avec le menu

mon menu