MENU Burger : Transition et toute la hauteur

index.html

@@ -39,16 +39,16 @@
             </div>-->
         </div>
         <div class="navigation">
+            <input class="menu-btn" type="checkbox" id="menu-btn" />
+            <label class="menu-icon" for="menu-btn">
+                <span class="navicon"></span>
+            </label>
             <div class="logo">
                 <a href="index.html">
                     <img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
                     <span>Charline Pasteur, Avocate</span>
                 </a>
             </div>
-            <input class="menu-btn" type="checkbox" id="menu-btn" />
-            <label class="menu-icon" for="menu-btn">
-                <span class="navicon"></span>
-            </label>
             <nav class="nav-wrapper" aria-label="Menu principal">
                 <!-- Grand écran : aucun sous-menu -->
                 <ul class="menu" id="menuXL">

navigation.css

@@ -1,4 +1,3 @@
-
 .header {
   background-color: #F9E7DB;
   position: fixed;
@@ -37,7 +36,7 @@
 }
 
 .navigation {
-  display:flex;
+  display: flex;
   width: 100%;
 }
 
@@ -93,7 +92,6 @@ nav {
   display: none;
   position: fixed;
   top: 6rem;
-  /* ajuster si nécessaire selon hauteur header */
   right: 1rem;
   z-index: 10;
   background-color: #F9E7DB;
@@ -128,11 +126,13 @@ nav {
   #menuXL {
     display: none;
   }
+
   #menuM {
     display: flex;
   }
 }
 
+/* Masque le texte après le logo pour écran moyen comme tablette*/
 @media (max-width: 999px) and (min-width: 850px) {
   .logo span {
     display: none;
@@ -146,12 +146,19 @@ nav {
   }
 
   #menuXL {
+    transform: translateX(-100%);
+    opacity: 0;
+    transition: transform 0.3s ease, opacity 0.3s ease;
     max-height: 0;
     max-width: 0;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    transition: max-height 0.3s ease;
+    position: fixed;
+    background-color: #F9E7DB;
+    top: 3.5rem;
+    left: 0;
+    box-shadow: 15px 0px 10px rgba(51, 51, 51, 0.15);
   }
 
   #menuM {
@@ -162,12 +169,6 @@ nav {
     display: flex;
   }
 
-  .menu {
-    clear: both;
-    max-height: 0;
-    transition: max-height .2s ease-out;
-  }
-
   .menu-icon {
     display: inline-block !important;
   }
@@ -177,10 +178,10 @@ nav {
 .menu-icon {
   cursor: pointer;
   display: none;
-  float: right;
   padding: 28px 20px;
   position: relative;
   user-select: none;
+  z-index: 100;
 }
 
 .menu-icon .navicon {
@@ -216,8 +217,12 @@ nav {
 }
 
 .menu-btn:checked~nav #menuXL {
-  max-height: 300px;
-  max-width: 100%;
+  max-height: 100vh;
+  max-width: 300px;
+  width: 300px;
+  height: 100%;
+  transform: translateX(0);
+  opacity: 1;
 }
 
 .menu-btn:checked~.menu-icon .navicon {