Discussion :

[philippef]

Bonjour,
Comme je ne veux pas réinventer la poudre, j'ai récupéré un code pour un menu vertical.
Tout fonctionne correctement. Je voudrai juste faire un "text-decoration:underline" sur le lien(!) qui affiche le sous menu.
page index :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		<ul>
			<li><a href="index.php?page=accueil">Accueil</a></li><br>
			<li><a href="index.php?page=programme">Programme</a></li><br>
			<li><a href="index.php?page=association">L'Association</a><br><br>
			<li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu4'));">Troissy historique</span></li>
			<ul class="sousmenu" id="sousmenu4" style="list-style-type:none; display: none;">
				<li><a href="index.php?page=histoire"><span>L'Histoire de Troissy</a></span></li>
				<li><a href="index.php?page=photos"><span>Cartes anciennes</a></span></li>
				<li><a href="index.php?page=eglise"><span>&Eacute;glise St-Martin</a></span></li>
				<li><a href="index.php?page=crypte"><span>La Crypte</a></span></li>
				<li><a href="index.php?page=temple"><span>Le Temple</a></span></li>
				<li><a href="index.php?page=abbaye"><span>Abbaye de l'Amour-Dieu</a></span></li>
			</ul>
 
....

le code css

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
a{text-decoration:none;color:yellow;}
a:hover{text-decoration:underline;color:yellow}
 
ul {
	padding : 0px;
	margin-left : 1.2em;
	font-family:verdana;
	font-size : 0.8em;
	list-style-type:none;
}
ul.menu,ul.sousmenu{list-style-type:none;margin:0em;padding:0em;}
ul.menu li.titre{margin-bottom:0.1em }
ul.sousmenu li{color:#FFFFFF;margin-left:1em;padding:0em;margin-bottom:0.2em;}
ul.sousmenu li span{color:#FFFFFF;font-size:1.2em;}
.menuli{cursor:pointer;	color:yellow;}

Et s'il y a du code qui vous chagrine, ne vous gênez pas, je suis preneur !!

[JefReb]

Je n'ai pas pu aller bien loin pour essayer car il manque un javascript dans le code.
Mais j'ai eu ce cas que j'avais résolu par:

Code css :

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

1
2
3
4
5
6
 
.menu li:hover > a {
  background:red; 
  text-decoration:underline;
  color:#000;
}

évidemment les couleurs sont à changer.
Si ça peut aider?

[Invité]

Bonjour,

je ne sais pas où tu as trouvé le script, mais même le code HTML est moisi... (<br> ?? <span> ???)

Galerie CSS - Menus verticaux

Sinon, j'ai ça à te proposer : http://codepen.io/jreaux62/pen/dPxKKQ
Pour qu'il soit toujours vertical : supprimer la partie "responsive" du CSS (@media...)

N.B. En HTML5, un menu se met dans une balise <nav> (navigation).

[philippef]

Le script je l'ai trouvé sur le web et j'ai essayé de l'adapter à mes besoins.
Je suis conscient que <br> et <span> n'ont rien à faire là et que je dois gérer ça pas le css. Mais bon ...

Je ne connais pas cette balise <nav>, je vais regarder.
En tout cas merci.

[Invité]

• HTML5 : le guide du débutant

[philippef]

J'ai modifié mon code : plus de <br> et plus de <span>.

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
24
25
26
27
28
 
a{text-decoration:none;color:yellow;}
a:hover{text-decoration:underline;color:yellow}
 
ul { padding:0px; margin-left:1.2em; font-family:verdana; font-size:0.8em; list-style-type:none;}
li { padding-bottom:1.0em;}
ul.menu, ul.sousmenu { list-style-type:none; margin:0em; padding:0em;}
ul.menu li.titre { margin-bottom:0em; }
ul.sousmenu li { margin-left:1em; font-size:1.2em; padding-bottom:0.2em;}
.menuli { cursor:pointer;color:yellow;}
.menuli:hover { text-decoration:underline;}
 
	<nav>
		<ul>
			<li><a href="index.php?page=accueil">Accueil</a></li>
			<li><a href="index.php?page=programme">Programme</a></li>
			<li><a href="index.php?page=association">L'Association</a>
			<li class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu4'));">Troissy historique</li>
			<ul class="sousmenu" id="sousmenu4" style="list-style-type:none; display: none;">
				<li><a href="index.php?page=histoire">L'Histoire de Troissy</a></li>
				<li><a href="index.php?page=photos">Cartes anciennes</a></li>
				<li><a href="index.php?page=eglise">&Eacuteglise St-Martin</a></li>
				<li><a href="index.php?page=crypte">La Crypte</a></li>
				<li><a href="index.php?page=temple">Le Temple</a></li>
				<li><a href="index.php?page=abbaye">Abbaye de l'Amour-Dieu</a></li>
			</ul>
....
</nav>

il mes reste 3 choses que je n'arrive pas à faire :
- mettre les sous menus en blanc
- réduire l'espace entre le titre du menu et le 1er sous-menu
- augmenter l'espace entre le dernier sous-menu et le menu suivant

[philippef]

J'ai réglé le problème de la couleur des sous-menus en ajoutant une classe