TEC : Mise à jour menu sandwish à droite

This commit is contained in:
Anthony Mahé
2025-05-27 09:52:20 +02:00
parent 6add698310
commit 87691ed685
9 changed files with 83 additions and 69 deletions

View File

@@ -38,16 +38,18 @@
</div>--> </div>-->
</div> </div>
<div class="navigation"> <div class="navigation">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <div class="nav-phone">
<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>
</div>
<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">

View File

@@ -36,16 +36,18 @@
</div>--> </div>-->
</div> </div>
<div class="navigation"> <div class="navigation">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <div class="nav-phone">
<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>
</div>
<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">

View File

@@ -36,16 +36,18 @@
</div>--> </div>-->
</div> </div>
<div class="navigation"> <div class="navigation">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <div class="nav-phone">
<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>
</div>
<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">

View File

@@ -38,16 +38,18 @@
</div>--> </div>-->
</div> </div>
<div class="navigation"> <div class="navigation">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <div class="nav-phone">
<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>
</div>
<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">

View File

@@ -37,16 +37,18 @@
</div>--> </div>-->
</div> </div>
<div class="navigation"> <div class="navigation">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <div class="nav-phone">
<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>
</div>
<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">

View File

@@ -36,16 +36,18 @@
</div>--> </div>-->
</div> </div>
<div class="navigation"> <div class="navigation">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <div class="nav-phone">
<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>
</div>
<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">

View File

@@ -46,11 +46,11 @@
<span>Charline Pasteur, Avocate</span> <span>Charline Pasteur, Avocate</span>
</a> </a>
</div> </div>
</div>
<input class="menu-btn" type="checkbox" id="menu-btn" /> <input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"> <label class="menu-icon" for="menu-btn">
<span class="navicon"></span> <span class="navicon"></span>
</label> </label>
</div>
<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">

View File

@@ -36,16 +36,18 @@
</div>--> </div>-->
</div> </div>
<div class="navigation"> <div class="navigation">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <div class="nav-phone">
<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>
</div>
<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">

View File

@@ -130,7 +130,7 @@ nav {
color: #333; color: #333;
} }
@media (max-width: 1299px) and (min-width: 100px) { @media (max-width: 1299px) and (min-width: 1050px) {
#menuXL { #menuXL {
display: none; display: none;
} }
@@ -141,7 +141,7 @@ nav {
} }
/* Masque le texte après le logo pour écran moyen comme tablette*/ /* Masque le texte après le logo pour écran moyen comme tablette*/
@media (max-width: 999px) and (min-width: 850px) { @media (max-width: 1049px) and (min-width: 850px) {
.logo span { .logo span {
display: none; display: none;
} }