TEC : Menu Autre

index.html

@@ -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>

navigation.css

@@ -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;