anthony/avocate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MENU Burger : Transition et toute la hauteur

Browse Source
This commit is contained in:
Anthony Mahe
2025-05-23 13:30:31 +02:00
parent a7835e2f76
commit 1cfbb7babd
2 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -39,16 +39,16 @@
</div>--> </div>-->
</div> </div>
<div class="navigation"> <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"> <div class="logo">
<a href="index.html"> <a href="index.html">
<img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate"> <img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
<span>Charline Pasteur, Avocate</span> <span>Charline Pasteur, Avocate</span>
</a> </a>
</div> </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"> <nav class="nav-wrapper" aria-label="Menu principal">
<!-- Grand écran : aucun sous-menu --> <!-- Grand écran : aucun sous-menu -->
<ul class="menu" id="menuXL"> <ul class="menu" id="menuXL">

31
navigation.css
View File

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