28172 sujets

CSS et mise en forme, CSS3

Débutant CSS menu déroulant flexbox

bonjour,
Je débute en css.

Je me lance dans la réalisation de page web. Tout d'abord, je souhaite mettre en œuvre un menu déroulant.
Après avoir fouillé sur le net, j'ai trouvé le modèle FLEXBOX, plus appréhendable (à mon sens) au traditionnelle modèle de boite CSS.

Voilà à quoi j'arrive :
upload/60676-menu.jpg
le HTML 
<!DOCTYPE html>

<html>
	<head>
	<meta charset="utf-8">
	<link href="remplir_colonne.css" rel="stylesheet" type="text/css">
	<title>remplir colonne</title>
	</head>
<body>
	<header>
	<div id="titre_menu">MENU</div>
		<nav>
			<ul id="menu">
				<li class="menu_item">Parent 1
					<ul class="sous_menu_item">
						<li><a href="#">enfant 1.1</a></li>
						<li><a href="#">enfant 1.2</a></li>
						<li><a href="#">enfant 1.3</a></li>
						<li><a href="#">enfant 1.4</a></li>
					</ul>
				</li>
				<li class="menu_item" >Parent 2
					<ul class="sous_menu_item">
						<li><a href="#">enfant 2.1</a></li>
						<li><a href="#">enfant 2.2</a></li>
					</ul>
				</li>
				<li class="menu_item" >Parent 3
					<ul class="sous_menu_item">
						<li><a href="#">enfant 3.1</a></li>
						<li><a href="#">enfant 3.2</a></li>
					</ul>
				</li>
				<li class="menu_item" >Parent 4
					<ul class="sous_menu_item">
						<li><a href="#">enfant 4.1</a></li>
						<li><a href="#">enfant 4.2</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>
	<p>essai essai essai</p>
</body>
</html>

le CSS
header{
	height:100px;
	display:flex;
	background:blue;
	/*repartir sur la ligne les enfants avec un espacement égal autour de chacun.*/
	justify-content:space-around;
	/* aligner les enfants sur l'axe vertical */
	align-items:center;
}
div{
}
#menu{
width:600px;
height:50px;
color:fuschia;
padding:0px;
margin:30px 0px 0px 0px;
background:lime;
/* le conteneur principal est une flexbox ,*/
display:none;
/*repartir sur la ligne les enfants avec un espacement égal autour de chacun.*/
justify-content:space-around;
align-items:center;
}

.menu_item{
height:50px;
text-align:center;
width:100px;
padding:0px;
margin:0px 0px 0px 0px;
/* les parents sont des flexbox */
display:flex;
/* les enfants sont en colonnes */
flex-direction:column;
background:yellow;
}

.sous_menu_item{
/* supprimer puce des listes*/
list-style-type:none;
width:inherit;
padding:0px;
margin:30px 0px 0px 0px;
background:aqua;
display:flex;
/* les enfants sont en colonnes */
flex-direction:column;
}
/* supprimer couleur et soulignement liste */
.sous_menu_item a{
text-decoration:none;
}
/* texte couleur #fff et arriere plan en noir au survol de .menu_item*/
.menu_item:hover {
	color:#fff;
	background:black;
}
.sous_menu_item >li :hover{
color:#fff;
background:black;
}
/* affichage de .sous_menu_item au passage sur #menu .menu_item*/
#menu .menu_item:hover > .sous_menu_item{
	display:flex;
}


Je n'arrive pas à aligner <MENU> et les items <MENU_ITEM>.sauf en jouant sur le margins top de #menu.
Pouvez vous me donner une piste et un avis sur le code CSS ?
Merci d'avance
Bonjour,

Le plus facile, pour aligner le titre (Menu) et les éléments du menu, c'est de les traiter de la même manière :
<nav>
<ul>
   <li class="menu_item"><h2>Menu</h2></li>
  <li class="menu_item">
    <a href="#1">Item 1</a>
  </li>
  <li class="menu_item">
    <a href="#2">Item 2</a>
  </li>
</ul>
</nav>

Attention à la sémantique de ton code HTML. Si tu utilises l'id #titre_menu, c'est que tu veux créer un titre. Il y a des balises prévues pour cela: h1, h2, etc.

Pour le code CSS, utiliser flex c'est très bien, mais il ne faut pas en abuser non plus. Tu ne peux pas utiliser flex partout juste parce que tu n'aimes pas le modèle de boîte standard de CSS Smiley smile

Par exemple, pour les sous-menus, les éléments <li> vont naturellement se mettre l'un en-dessous de l'autre, inutile de déclarer 
display: flex;
flex-direction: column;
sur le parent pour ça.

Enfin, afficher ou cacher les sous-menus en utilisant CSS me semble délicat, je me tournerais plutôt vers javascript pour gérer le comportement du menu.
Sujet clos
Aller à