28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sous-menu vertical

Bonjour à tous.

Je voudrais réaliser un sous-menu comme ceci :
http://img15.hostingpics.net/pics/763459menu.png
Lorsqu'on passe la souris sur le menu Écriture, son fond change et affiche la boite des sous-menus.
Lorsqu'on clique sur le menu Écriture, cela nous envoie sur la page ecriture.php
Lorsqu'on passe la souris sur le sous-menu Conseillers en écriture, son fond change.
Lorsqu'on clique sur le sous-menu Conseillers en écriture, cela nous renvoie sur la page conseiller.php.

Cela doit fonctionner quelque soit le navigateur, et sans JavaScript. Je suppose que cela doit pouvoir se faire uniquement à partir du CSS ?

<ul>
<li class="menu"><a url="ecriture.php" title=Écriture">Écriture</a>
<li class="sous-menu"><a url="conseiller.php" title="Conseiller en écriture">Conseillers en écriture</a></li>
</li>
</ul>



Bref ! Je sais ce que je veux obtenir, mais je n'ai aucune idée sur la façon d'y parvenir. Smiley biggrin
Modifié par Pyanepsion (10 Nov 2012 - 13:21)
Salut,

Je te suggères de déjà commencer avec une structure HTML valide.
Plutôt qui ressemble à ceci :
<ul>
  <li><a url="ecriture.php" title=Écriture">Écriture</a>
    <ul>
      <li><a url="conseiller.php" title="Conseiller en écriture">Conseillers en écriture</a></li>
    </ul>
  </li>
</ul>

Ensuite, si tu veux mettre des classes, mets-les plutôt sur les listes.
Enfin, une simple recherche Google sur tutoriel, css, menu... donne rapidement quelques pistes intéressantes !!!
Quitte à repasser, quand tu t'arracheras trop les cheveux, avec une petite page HTML/CSS en ligne...

tm
Merci tm™ pour cette réponse qui apportera, on en est sûr, de grandes informations à l'ensemble de la communauté. Smiley lol 

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Menu vertical</title>
	<meta name="description" content="" />
	<meta name="keywords" lang="fr" content="" />
	<meta name="robots" content="noindex, follow" />
	<link rel="stylesheet" media="screen" href="css2.css" title="Style par défaut" />
</head>
<body>
<ul id="nav">
	<li><a href="#">Catégorie</a></li>
	<li><a href="#">Statistiques</a></li>
	<li><a href="#">Partager cette page</a>
		<ul>
			<li><a href="#">Commerce</a>
				<ul>
					<li><a href="#">Boutiques en ligne</a></li>
					<li><a href="#">Code promo</a></li>
				</ul>
				<li><a href="#">Disussion</a></li>
				<li><a href="#">Ésotérisme</a></li>
			</li>
			<li><a href="#">Écriture</a>
				<ul>
					<li><a href="#">Conseillers en écritures</a></li>
					<li><a href="#">Écrivains</a>
						<ul>
							<li><a href="#">Romanciers</a></li>
							<li><a href="#">Nouvellistes</a></li>
						</ul>
					</li>
					<li><a href="#">Éditeurs</a>
						<ul>
							<li><a href="#">Livres numériques</a></li>
							<li><a href="#">Livres traditionnels</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Évènements</a>
				<ul>
					<li><a href="#">Sons et lumières</a></li>
					<li><a href="#">Organisations de mariage/soirées</a></li>
				</ul>
			</li>
			<li><a href="#">Hébergement</a></li>
			<li><a href="#">Immobilier</a></li>
		</ul>
	</li>

</body>
</html>


#nav {
	margin-top: -5px;
	margin-left:2px;
	padding: 7px 6px 0;
	line-height: 80%;
	border: solid 1px #6d6d6d;
}

#nav li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}
/*  menu principal */

#nav a {
	font-weight: bold;
	color: darksalmon;
	text-decoration: none;
	display: block;
	padding:  8px;     
	margin: 0;
}
/* menu principal avec hover */

#nav li:hover > a {
	color: #000;
}
/* sous menu niveau 2 */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: darksalmon; 
}
#nav ul a:hover {
	background: aliceblue !important; 
	color: #000 !important;
}
/* niveau 2 */
#nav ul {
	background: #aliceblue; 
	display: none;
	margin: 0;
	padding: 0;
	width: 150px; /* largeur des sous-menus */
	position: absolute;
	top: 35px;
	left: 0;
	border: solid 1px #b4b4b4;
}
/* dropdown */
#nav li:hover > ul {
	display: block;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav ul a {
	font-weight: normal;
}
/* sous menu niveau 2 */
#nav ul ul {
	left: 130px; /* positionnement des sous-menus de niveau 2 par rapport aux sous-menus de niveau 1  */
	top: -3px;
}

#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
}
html[xmlns]
 #nav {
	display: block;
}

* html #nav {
	height: 1%;
}


Il reste deux soucis.
1. Si l'on passe la souris juste au début du sous-menu à l'endroit du chevauchement, on change de menu.
2. Sous Internet Explorer 9, les menus Écriture et suivants ne se mettent pas au bon endroit.
Modifié par Pyanepsion (10 Nov 2012 - 15:44)
Bonjour,
J'ai récupéré ce code sur internet il y a un petit moment, regarde ce qui t'intéresse et dis moi si tu as un problème;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
body {
	font: normal 100.01% Helvetica, Arial, sans-serif;
	color: black;
}
div#bord {
	width: 47.1em;
	padding: 0.8em;
	border: 1px solid black;
	background-color: silver;
}
* html div#bord {  /* correction pour IE 5.x */
	width: 48.7em;
	w\idth: 47.1em;
}
div#bord div {
	clear: left;
}
ul#menu {
	margin: 0;
	padding: 0;
	text-align: center;
}
ul#menu li {
	list-style: none;
	float: left;  /* sans width - permis d'après CSS 2.1 erlaubt */
	position: relative;
	margin: 0.4em;
	padding: 0;
}
* html ul#menu li {  /* correction pour IE 5 et 6 */
	margin-bottom: -0.4em;
}
*:first-child+html ul#menu li {  /* correction pour IE 7 */
	margin-bottom: -0.1em;
}
ul#menu li ul {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.6em;
	left: -0.4em;
	display: none;  /* cacher le sous-menu */
}
* html ul#menu li ul {  /* correction pour IE 5.x */
	left: -1.5em;
	lef\t: -0.4em;
}
*:first-child+html ul#menu ul {  /* adaptation pour IE 7 */
	background-color:silver;
	padding-bottom:0.4em;
}
ul#menu li:hover ul {
	display: block;  /* afficher le sous-menu par les navigaters modernes */
}
ul#menu li ul li {
	float: none;
	display: block;
	margin-bottom: 0.2em;
}
ul#menu a, ul#menu span {
	display: block;
	width: 6.4em;  /* attribuer la largeur aux éléments contenus dans li */
	padding: 0.2em 1em;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid black;
	border-left-color: white;
	border-top-color: white;
	color: maroon;
	background-color: #ccc;
}
* html ul#menu a, * html ul#menu span {
	width: 8.6em;   /* largeur pour ancien modèle de boîte pour IE 5.x */
	w\idth: 6.4em;  /* largeur correcte pour IE 6 en mode standard */
}
ul#menu a:hover, ul#menu span, li a#actif {
	border-color: white;
	border-left-color: black;
	border-top-color: black;
	color: white;
	background-color: gray;
}
li a#actif {  /* marquer la rubrique active */
	color: maroon;
	background-color: silver;
}
ul#menu li ul span {  /* marquer la sous-page active */
	background-color: maroon;
}
</style>
</head>
<body>
<h1 id="exemple">Menu à plusieurs niveaux</h1>
<ul id="menu">
  <li><a href="#exemple">Page 1</a></li>
  <li><a href="#exemple">Page 2</a>
    <ul>
      <li><a href="#exemple">Page 2a</a></li>
      <li><a href="#exemple">Page 2b</a></li>
      <li><a href="#exemple">Page 2c</a></li>
    </ul>
  </li>
  <li><a href="#exemple">Page 3</a></li>
  <li><a href="#exemple">Page 4</a></li>
</ul>
</body>
</html>

Smiley smile
Merci Rodolpheb pour ton aide. Smiley biggrin

j'ai finalement utilisé cette trame en la remettant verticale pour réaliser le menu. Tu peux la voir en application sur http://corrigeur.fr
Modifié par Pyanepsion (22 Nov 2012 - 10:38)
C'est donc une bonne chose, car dans les métiers de l'écriture, le Mac a encore une belle place. Merci pour ce nouveau retour. Smiley biggrin
Sujet clos
Aller à