fermer le menu ferme les sous-menus

3 files changed, 28 insertions, 21 deletions

diff --git a/public/css/nav.css b/public/css/nav.css
index a913da0..a9bddf2 100644
--- a/public/css/nav.css
+++ b/public/css/nav.css
@@ -28,9 +28,6 @@
         .nav_main ul{
                 padding-left: 0;
         }
-        .nav_main li{
-                padding: 5px;
-        }
         .sub-menu{
                 border-top: 3px solid #13aff0;
         }
@@ -91,19 +88,20 @@
         .nav_button, .nav_main
         {
                 position: fixed;
-                left: 50%; /* technique pour centrer un élément positionné */
-                transform: translateX(-50%);
+                /* technique pour centrer un élément positionné */
+                /*left: 50%;
+                transform: translateX(-50%);*/
         }
         .nav_button{
                 display: block;
-                margin-top: 5px;
+                margin: 5px;
                 position: fixed;
         }
         .nav_main{
                 display: none;
                 background-color: white;
                 text-align: left;
-                margin: 5px 0;
+                margin: 5px;
                 top: 31px; /* = taille bouton et de sa marge */
                 
         }
@@ -111,9 +109,6 @@
                 display: block;
         }
         /*.nav_main > ul{}*/
-        .nav_main li{
-                padding: 5px;
-        }
         .drop-down{
                 width: min-content;
         }
@@ -121,15 +116,15 @@
                 margin-top: 5px;
         }
         .nav_main ul{
-                padding-left: 20px;
-                padding-right: 20px;
+                padding-left: 25px;
+                padding-right: 5px;
         }
 
         /*nav > ul > li > ul{
                 margin-left: 0;
         }*/
         @media (pointer: fine){
-                .nav_main li > a:hover{
+                .nav_main > ul > li:hover{
                         background-color: yellow;
                 }
                 .drop-right > a > p:after{
@@ -151,16 +146,16 @@ ul{
         margin: 0;
 }
 
-.nav_main li
-{
-        list-style: none;
-}
 .nav_main p
 {
         display: inline-block; /* à cause du bouton sub-menu-toggle */
         margin: 0;
         /*background-color: #ffffffe1;*/ /* b3 = 179 = 0.7 (x 256) */
 }
+.nav_main li{
+        padding: 5px;
+        list-style: none;
+}
 
 .current/* > a > p*/
 {
diff --git a/public/js/main.js b/public/js/main.js
index 28a62ae..7020971 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -48,10 +48,19 @@ function controlURL(input){
         input.value = 'https://' + url; // Cas par défaut
 }
 
+function toggleTouchMenu(){
+        const nav = document.getElementById('nav_zone').querySelector('.nav_main');
+        const open_state = nav.classList.toggle('show'); // interrupteur
+
+        if(!open_state){
+                nav.querySelectorAll('li').forEach(li => {
+                        li.classList.remove('open'); // fermer les sous-menus à la fermeture
+                });
+        }
+}
+
 // exécuté à la fin du chargement de la page
 document.addEventListener('DOMContentLoaded', () => {
-        navHeight(); // hauteur de <nav> en fonction de celle du menu en position fixe
-        insertLocalDates();
 
         // ouvrir/fermer les sous-menus avec écran tactile
         document.querySelectorAll('.sub-menu-toggle').forEach(button => {
@@ -70,13 +79,16 @@ document.addEventListener('DOMContentLoaded', () => {
                                 }
                         });
 
-                        if(!li.classList.toggle('open')){ // fermer sous-menu
+                        if(!li.classList.toggle('open')){ // ouvrir ou fermer ce sous-menu
                                 li.querySelectorAll('.drop-right').forEach(desc => {
                                         desc.classList.remove('open'); // fermer sous-menus enfants
                                 });
                         }
                 });
         });
+
+        navHeight(); // hauteur de <nav> en fonction de celle du menu en position fixe
+        insertLocalDates();
 });
 
 function navHeight(){
diff --git a/src/view/templates/header.php b/src/view/templates/header.php
index 9d2f071..b39bdd5 100644
--- a/src/view/templates/header.php
+++ b/src/view/templates/header.php
@@ -4,7 +4,7 @@
            <header style="background-image: url('<?= $header_background ?? '' ?>');">
             <div id="nav_zone">
                 <div class="nav_button">
-                    <button onclick="document.getElementById('nav_zone').querySelector('.nav_main').classList.toggle('show');">MENU</button>
+                    <button onclick="toggleTouchMenu()">MENU</button>
                 </div>
                 <?= $nav ?>
             </div>