From 854bde3095c195a3c628be878fc776e16f4bd424 Mon Sep 17 00:00:00 2001 From: polo Date: Mon, 10 Nov 2025 03:51:59 +0100 Subject: menu responsive !! --- public/css/head.css | 22 ++----- public/css/nav.css | 184 +++++++++++++++++++++++++++++++++++----------------- public/js/main.js | 16 +++-- 3 files changed, 141 insertions(+), 81 deletions(-) (limited to 'public') 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