menu responsive !!

4 files changed, 145 insertions, 85 deletions

diff --git a/public/css/head.css b/public/css/head.css
index 1b805fe..4df68ba 100644
--- a/public/css/head.css
+++ b/public/css/head.css
@@ -1,38 +1,28 @@
 header
 {
         text-align: center;
-        /*padding-top: 5px;*/
-        /*padding-bottom: 10px;*/
         background-size: cover; /* largeur du bloc_page  */
         background-position: center;
 }
-#nav_zone
-{
-        /*margin: auto;*/
-        /*max-width: 1200px;*/
-        display: flex;
-        /*align-items: center;*/ /* conflit possible avec .social align-self */
-        justify-content: center;
-}
-.nav_button{
-        display: none;
-}
 
 .background_button
 {
         max-height: 24px;
 }
-.header_additional_inputs
+.header_above
 {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;
         align-items: center;
-        margin-top: 10px;
+}
+.header_above > div > *
+{
+        margin: 10px 0;
 }
 .header_content
 {
-        margin-top: 10px;
+        /*margin-top: 10px;*/
         padding-bottom: 20px;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
diff --git a/public/css/nav.css b/public/css/nav.css
index 72aaf4b..165af71 100644
--- a/public/css/nav.css
+++ b/public/css/nav.css
@@ -1,45 +1,145 @@
 /*-- menu principal --*/
-#nav_zone
-{
-        /*height: 33px;*/
-        /*width: 100%;*/
+
+/* version horizontale */
+@media screen and (min-width: 601px){
+        .nav_button{
+                display: none;
+        }
+        #nav_zone
+        {
+                /*margin: auto;*/
+                /*max-width: 1200px;*/
+                display: flex;
+                /*align-items: center;*/ /* conflit possible avec .social align-self */
+                justify-content: center;
+        }
+        .nav_main{
+                display: block;
+                background-color: #ffffffe1; /* b3 = 179 = 0.7 (x 256) */
+                text-align: center;
+                position: fixed;
+        }
+        .nav_main > ul{
+                display: flex;
+                justify-content: center;
+                flex-wrap: wrap;
+        }
+        .nav_main ul{
+                padding-left: 0;
+        }
+        .nav_main li{
+                padding: 5px;
+        }
+        .sub-menu{
+                border-top: 3px solid #13aff0;
+        }
+        /* élément du menu survolé, le positionnement relatif en fait la référence du positionnement suivant */
+        .drop-right .sub-menu
+        {
+                position: absolute; /* positionnement par rapport au précédent "position" en CSS */
+                left: 100%;
+                top: -3px; /* la bordure bleue fait 3px */
+        }
+        /* 1er sous-menu, poitionnement pour ne pas aggrandir l'élément parent */
+        nav > ul > li > ul
+        {
+                position: absolute; /* retire du flux, positionnement par rapport à la fenêtre */
+                margin-top: 5px;
+                margin-left: -5px;
+        }
+        
+        @media (pointer: fine){
+                .nav_main > ul > li:hover
+                {
+                        background-color: white;
+                }
+                .drop-right > a > p:after{
+                        content: " ▶";
+                }
+        }
+}
+
+@media screen and (min-width: 1000px){
+                nav > ul > li > ul{
+                        margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
+                        margin-top: 7px;
+                }
+                .nav_main li{
+                        padding: 7px;
+                }
+}
+
+/* version petits écrans */
+@media screen and (max-width: 600px){
+        #nav_zone{
+                padding-top: 5px;
+        }
+        .nav_button{
+                display: block;
+        }
+        .nav_main{
+                display: none;
+                margin: 10px;
+                background-color: white;
+                text-align: left;
+        }
+        .nav_main.show{
+                display: block;
+        }
+        /*.nav_main > ul{}*/
+        .nav_main li{
+                padding: 5px;
+        }
+        .drop-down{
+                width: min-content;
+        }
+        .sub-menu{
+                margin-top: 5px;
+        }
+        .nav_main ul{
+                padding-left: 20px;
+                padding-right: 20px;
+        }
+
+        /*nav > ul > li > ul{
+                margin-left: 0;
+        }*/
+        @media (pointer: fine){
+                .nav_main li > a:hover{
+                        background-color: yellow;
+                }
+                .drop-right > a > p:after{
+                        content: ' ▼';
+                }
+        }
 }
+
+
 .nav_main
 {
-        position: fixed;
-        /*box-shadow: 3px 3px 5px #13aff0;*/
+        /*position: fixed;*/
         border: 2px solid #13aff0;
         top: -2px;
-}
-.nav_main
-{
         /*font-size: 90%;*/
-        /*margin-top: 10px;*/
-        /*margin-bottom: 10px;*/
         text-wrap: nowrap;
-        background-color: #ffffffe1; /* b3 = 179 = 0.7 (x 256) */
+        /*max-width: 90%;*/
 }
-.nav_main > ul
-{
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        flex-wrap: wrap;
+.sub-menu{
+        box-shadow: 1px 1px 3px black;
 }
-ul
-{
+ul{
         margin: 0;
 }
 
 .nav_main ul
 {
-        list-style: none;
-        padding-left: 0;
+        /*list-style: none;*/
+        /*padding-left: 0;*/
 }
 .nav_main li
 {
         list-style: none;
-        padding: 7px;
+        
 }
 .nav_main p
 {
@@ -59,14 +159,11 @@ li:not(.current){
 }
 
 
+
 /* sous-menus avec PC + souris
 mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :hover, cassant le JS utilisé ici */
 @media (pointer: fine) /* fine => précision de la souris */
 {
-        .nav_main > ul > li:hover
-        {
-                background-color: white;
-        }
         .drop-down:hover > .sub-menu,
         .drop-right:hover > .sub-menu
         {
@@ -84,7 +181,6 @@ mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :h
         }
         .drop-right > a > p:after
         {
-                content: " ▶";
                 font-size: x-small;
         }
 }
@@ -113,46 +209,19 @@ mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :h
                 display: block;
         }
 }
-
-
 .sub-menu
 {
         display: none;
         background-color: white;
-        border-top: 3px solid #13aff0;
-        box-shadow: 1px 1px 3px black;
         font-size: 95%;
 }
 
-
-/* 1er sous-menu, poitionnement pour ne pas aggrandir l'élément parent */
-nav > ul > li > ul
-{
-        position: absolute; /* retire du flux, positionnement par rapport à la fenêtre */
-        margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
-        margin-top: 7px;
-}
-/* élément du menu survolé, le positionnement relatif en fait la référence du positionnement suivant */
-.drop-right
-{
-        /*position: relative;*/
-}
-.drop-right .sub-menu
-{
-        position: absolute; /* positionnement par rapport au précédent "position" en CSS */
-        left: 100%;
-        top: -3px; /* la bordure bleue fait 3px */
-}
-
 @media screen and (max-width: 1000px){
         #nav_zone
         {
                 /*height: 29px;*/
         }
-        .nav_main li
-        {
-                padding: 5px;
-        }
+        
         .nav_main p
         {
                 /*font-size: smaller;*/
@@ -160,8 +229,7 @@ nav > ul > li > ul
         }
         nav > ul > li > ul
         {
-                margin-left: -5px;
-                margin-top: 5px;
+                /*margin-top: 5px;*/
         }
 }
 @media screen and (max-width: 450px){
diff --git a/public/js/main.js b/public/js/main.js
index 5bab6ed..fa02ddb 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -50,7 +50,7 @@ function controlURL(input){
 
 // 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
@@ -77,20 +77,22 @@ document.addEventListener('DOMContentLoaded', () => {
                         }
                 });
         });
+});
 
-        // hauteur de <nav> en fonction de celle du menu en position fixe
-        const nav = document.querySelector('nav');
+function navHeight(){
+        const nav = document.querySelector('nav'); // détection
         const nav_zone = document.getElementById('nav_zone');
-        const resize_observer = new ResizeObserver(entries => {
+        const resize_observer = new ResizeObserver(entries => { // param de type tableau
+        let nav_button_height = window.innerWidth <= 600 ? 26 : 0; // 26 = taille du bouton
+        nav_button_height += nav.classList.contains('show') ? 15 : 0;
                 for(const entry of entries){
-                        nav_zone.style.height = entry.contentRect.height + 'px';
+                        nav_zone.style.height = (entry.contentRect.height + nav_button_height) + 'px';
                 }
         });
         if(nav){
                 resize_observer.observe(nav);
         }
-});
-
+}
 
 function fetchArticles(bloc_id){
         const parent = document.getElementById(bloc_id);
diff --git a/src/view/templates/header.php b/src/view/templates/header.php
index ba17dcd..9d2f071 100644
--- a/src/view/templates/header.php
+++ b/src/view/templates/header.php
@@ -3,9 +3,12 @@
     <div>
            <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>
+                </div>
                 <?= $nav ?>
             </div>
-            <div class="header_additional_inputs">
+            <div class="header_above">
                 <div id="head_favicon">
                     <?= $admin_head_favicon ?>
                 </div>
@@ -20,9 +23,6 @@
                         <?= $admin_header_logo ?>
                     </div>
                 </div>
-                <div class="nav_button">
-                    <button>MENU</button>
-                </div>
                 <div class="header_center_col">
                     <h1 id="header_title">
                         <a id="header_title_content" href="<?= new URL ?>"><?= htmlspecialchars($title ?? '') ?></a>