Menu multi-niveaux - flex
Bonjour,
je souhaite utiliser un menu qu'a proposé jreaux62.
Mon souci est que mon site est en PHP, or son code fonctionne bien si l'extension est html mais le css n'est plus pris en compte, si je passe l'extension à php. Je teste le PHP avec Wampserver. (Dans ce code, pas de PHP du tout, mais comme je veux l'inclure dans des fichiers PHP, obligé de changer l'extension).
Le code (que du html et du CSS) :
Code:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ----------- MENU ----------- */
nav {
position: relative;
}
nav ul {
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
position: relative;
}
nav a {
position: relative;
display: block;
}
/* ------ MENU niveau 1 ------ */
nav > ul {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
nav > ul > li {
-webkit-flex: 1 1 auto;
flex: 1 1 auto; /* menus qui s'adaptent en largeur*/
/*-webkit-flex:1 1 25%; flex:1 1 25%;*/ /* 4 menus de meme largeur*/
}
/* --- MENU niveaux suivants --- */
nav > ul ul {
position: absolute;
width: 100%;
top: 100%;
z-index: 999;
display: none; /* on masque */
min-width: 120px;
}
/* ----------- hover ----------- */
nav li:hover > ul {
display: block; /* on affiche */
}
nav li:hover {
background: grey;
}
nav li:hover > a {
color: white;
}
/* ----------- DECORATION ----------- */
nav li {
background: #ccc;
}
nav li li {
background: #bbb;
}
nav a {
padding: 10px;
text-decoration: none;
color: #666;
font-family: "Arial", sans-serif;
}
/* ----------- fleche ----------- */
li.hasSub:before {
position: absolute;
content: "\25bc";
color: #999;
bottom: 5px;
right: 5px;
}
li.hasSub:hover:before {
color: #fff;
}
/* --- MENU niveau 2 et suivants --- */
nav > ul ul {
position: absolute;
/*width: 100%;*/
top: 100%; /* sous-menu DESSOUS */
left:0;
z-index: 999;
display: none; /* on masque */
min-width: 120px;
}
/* --- MENU niveaux 3 et suivants --- */
nav > ul ul ul {
position: absolute;
width: 100%;
top: 0;
left:100%; /* sous-menu A DROITE */
}
nav > ul > li:last-child ul ul { /* dernier li du 1er ul */
position: absolute;
width: 20%;
top: 0;
left:-34%; /* sous-menu A GAUCHE */
}
/* ----------- fleche ----------- */
li.hasSub:before {
position: absolute;
content: "\25bc";
color: #999;
bottom: 5px;
right: 5px;
}
li.hasSub:hover:before {
color: #fff;
}
nav > ul > li li.hasSub:before {
content: "\25BA";
bottom: 7px;
}
nav > ul > li:last-child li.hasSub:before {
content: "\25C4";
bottom: 7px;
}
</style>
</head>
<body>
<nav id="menu">
<ul>
<li class="hasSub"><a href="javascript:void(0)">menu 1</a>
<ul>
<li class="hasSub"><a href="javascript:void(0)">menu 1.1</a><ul><li><a href="#">menu 1.1.1</a></li><li><a href="#">menu 1.1.2</a></li></ul></li>
<li><a href="#">menu 1.2</a></li>
<li><a href="#">menu 1.3</a></li>
<li><a href="#">menu 1.4</a></li>
</ul>
</li>
<li class="hasSub"><a href="javascript:void(0)">ceci est le menu 2</a>
<ul>
<li><a href="#">menu 2.1</a></li>
<li class="hasSub"><a href="javascript:void(0)">menu 2.2</a><ul><li><a href="#">menu 2.2.1</a></li><li><a href="#">menu 2.2.2</a></li></ul>
<li><a href="#">menu 2.2.3</a></li></ul</li>
<li><a href="#">menu 2.3</a></li>
</ul>
</li>
<li><a href="#">menu 3 sans sous-menu</a></li>
<li class="hasSub"><a href="javascript:void(0)">enfin, voici un menu 4 un peu plus long</a>
<ul>
<li class="hasSub"><a href="javascript:void(0)">menu 4.1</a><ul><li><a href="#">menu 4.1.1</a></li><li><a href="#">menu 4.1.2</a></li></ul></li>
<li><a href="#">menu 4.2</a></li>
</ul>
</li>
</ul>
</nav>
<div>
<p>bla bla 1</p>
<p>bla bla 2</p>
</div>
</body>
</html> |
Que faire pour que ça fonctionne ?
Pour faire un peu moins court donc...
Citation:
Tu as l'air pas d'accord avec jreaux62 ...
Là tu tires une conclusion hâtive, flex-box apporte son lot de solution rapide de mise en forme comme je l'ai indiqué mais concernant ce menu il existe, pour le même rendu, le modèle de position table.
Attention je ne parle pas de l'élément HTML <table> mais du modèle de rendu display: table-xxx qui est reconnu, unanimement, depuis IE8 soit près de 10 ans.
Le même rendu est obtenu simplement avec le CSS minimaliste suivant
Code:
1 2 3 4
| #menu li {
display: table-cell;
width: 1%;
} |
c'est tout rien de plus si ce n'est que la width force la même largeur un peu comme le fait flex-grow.
Exemple simple :
Code:
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 29 30 31 32 33 34 35 36 37 38 39 40
| <!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu avec table-cell</title>
<meta name="Author" content="NoSmoking">
<style>
#menu {
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
display: table-cell;
width: 1%;
}
#menu li +li {
border-left: 1px solid #abc;
}
#menu a {
display: block;
text-align: center;
line-height: 2em;
}
#menu li:hover {
background: #cde;
}
</style>
</head>
<body>
<h1>Menu avec <code>display:table-cell</code></h1>
<ul id="menu">
<li><a href="#">Menu #1</a></li>
<li><a href="#">Menu #2</a></li>
<li><a href="#">Menu #3</a></li>
<li><a href="#">Menu #4</a></li>
</ul>
</body>
</html> |