anthony/avocate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TEC : Menu Autre

Browse Source
This commit is contained in:
Anthony Mahe
2025-05-19 23:08:16 +02:00
parent 23f9b448b4
commit 23c753d902
2 changed files with 162 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@@ -47,13 +47,59 @@
<span class="navicon"></span>
</label>
<nav class="nav-wrapper" aria-label="Menu principal">
<ul class="menu">
<ul class="menu" id="menuXL">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="menu" id="menuL">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li class="dropdown">
<input type="checkbox" id="toggle-more-L" class="toggle-submenu">
<label for="toggle-more-L">Autre ▼</label>
<ul class="submenu">
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
<ul class="menu" id="menuM">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li class="dropdown">
<input type="checkbox" id="toggle-more-M" class="toggle-submenu">
<label for="toggle-more-M">Autre ▼</label>
<ul class="submenu">
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
<ul class="menu" id="menuS">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li class="dropdown">
<input type="checkbox" id="toggle-more-S" class="toggle-submenu">
<label for="toggle-more-S">Autre ▼</label>
<ul class="submenu">
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</header>

116
navigation.css
View File

@@ -29,7 +29,6 @@
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li {
@@ -85,6 +84,121 @@
margin-left: auto;
}
/* menu caché par défaut*/
nav .menu {
list-style: none;
padding: 0;
margin: 0;
display: none;
gap: 1rem;
}
nav .menu li {
position: relative;
white-space: nowrap;
}
/* Sous-menu caché par défaut */
/* Cacher le sous-menu par défaut */
.dropdown {
position: relative;
}
.dropdown .submenu {
position: absolute;
top: 100%; /* place le sous-menu juste sous le bouton "Autre" */
left: 0; /* aligne à gauche du bouton "Autre" */
transform: translateX(-100%); /* décale le menu vers la gauche du bouton */
background-color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
z-index: 10;
display: none;
padding: 0;
list-style: none;
}
/* Afficher le sous-menu si l’input est coché */
.toggle-submenu:checked + label + .submenu {
display: block;
}
/* Style du label 'Autre' */
.dropdown label {
cursor: pointer;
padding: 0.5rem;
display: inline-block;
color: #333;
background-color: transparent;
}
/* Style des items du sous-menu */
.submenu li a {
display: block;
padding: 0.5rem;
text-decoration: none;
color: #333;
}
.submenu li a:hover {
background-color: #f2f2f2;
}
/* Grand écran : menu complet */
@media (min-width: 1500px) {
#menuXL {
display: flex;
}
}
/* Moyen écran */
@media (max-width: 1499px) and (min-width: 1300px) {
#menuL {
display: flex;
}
}
/* Petit écran */
@media (max-width: 1299px) and (min-width: 1099px) {
#menuM {
display: flex;
}
}
/* Mobile (burger menu géré ailleurs) */
@media (max-width: 1100px) and (min-width: 700px){
#menuS {
display: flex;
}
}
/* Cacher la case à cocher */
.toggle-submenu {
display: none;
}
/* Afficher le sous-menu si activé */
.toggle-submenu:checked + label + .submenu {
display: block;
}
/* Styles généraux */
.dropdown {
position: relative;
}
.dropdown label {
cursor: pointer;
display: block;
padding: 0.5rem;
}
/* Pour que le sous-menu ne s'affiche que sous 'Autre' */
.dropdown .submenu li {
padding: 0.5rem;
}
/* menu */
.header .menu {
clear: both;