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

FIX : 2 taille écran + sandwish en mobile

Browse Source
This commit is contained in:
Anthony Mahe
2025-05-22 12:07:49 +02:00
parent abce374f53
commit a7835e2f76
3 changed files with 183 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
index.html
View File

@@ -34,76 +34,49 @@
Rendez vous en ligne Rendez vous en ligne
</a> </a>
</div> </div>
<div> <!--<div>
Email : c.pasteuravocate@gmail.com Email : c.pasteuravocate@gmail.com
</div> </div>-->
</div> </div>
<div class="logo"> <div class="navigation">
<a href="index.html"> <div class="logo">
<img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate"> <a href="index.html">
<span>Charline Pasteur, Avocate</span> <img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
</a> <span>Charline Pasteur, Avocate</span>
</a>
</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>
<nav class="nav-wrapper" aria-label="Menu principal">
<!-- Grand écran : aucun sous-menu -->
<ul class="menu" id="menuXL">
<li><a href="index.html"><span>Accueil</span></a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Tablette -->
<ul class="menu" id="menuM">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li class="dropdown">
<span class="dropdown-label">Autre ⏷</span>
<ul class="submenu">
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</div> </div>
<nav class="nav-wrapper" aria-label="Menu principal">
<ul class="menu" id="menuXL">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="menu" id="menuL">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li class="dropdown">
<input type="checkbox" id="toggle-more-L" class="toggle-submenu">
<label for="toggle-more-L">Autre ⏷</label>
<ul class="submenu">
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
<ul class="menu" id="menuM">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li class="dropdown">
<input type="checkbox" id="toggle-more-M" class="toggle-submenu">
<label for="toggle-more-M">Autre ⏷</label>
<ul class="submenu">
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
<ul class="menu" id="menuS">
<li><a href="index.html">Accueil</a></li>
<li><a href="assistance_educative.html">Assistance éducative</a></li>
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
<li class="dropdown">
<input type="checkbox" id="toggle-more-S" class="toggle-submenu">
<label for="toggle-more-S">Autre ⏷</label>
<ul class="submenu">
<li><a href="droit_education.html">Droit de l'éducation</a></li>
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
<li><a href="honoraires.html">Honoraires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</header> </header>
<div class="banner banner-accueil"> <div class="banner banner-accueil">
</div> </div>

250
navigation.css
View File

@@ -1,4 +1,24 @@
/* Style pour le header */
.header {
background-color: #F9E7DB;
position: fixed;
width: 100%;
z-index: 3;
align-items: center;
display: flex;
}
.header li a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 2px;
background-color: #CC4331;
transition: width 0.3s ease;
}
.contact { .contact {
top: 0; top: 0;
position: fixed; position: fixed;
@@ -15,186 +35,204 @@
z-index: 100; z-index: 100;
font-size: 11px; font-size: 11px;
} }
.header {
background-color: #F9E7DB; .navigation {
position: fixed; display:flex;
width: 100%; width: 100%;
z-index: 3;
align-items: center;
display : flex;
}
.header li a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 2px;
background-color: #CC4331;
transition: width 0.3s ease;
} }
li a:hover::after { li a:hover::after {
width: 100%; width: 100%;
} }
li a:hover,
.menu-btn:hover {
background-color: #F9E7DB;
}
.logo { .logo {
width:100% width: 100%;
} }
.logo img { .logo img {
display: inline-block; display: inline-block;
max-height: 40px; max-height: 40px;
padding: 8px 4px 8px 12px; padding: 8px 4px 8px 12px;
vertical-align: middle; vertical-align: middle;
} }
nav { nav {
margin-left: auto; margin-left: auto;
} }
/* menu caché par défaut, on affiche ensuite en fonction de la taille du média*/
/* === Menus === */
#menuXL {
display: inline-block;
}
/* === Menus === */
#menuM {
display: none;
}
.menu { .menu {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
display: none;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
} }
.menu li { .menu li {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
padding: 0.1rem;
} }
/* Sous-menu en hover */
.dropdown { .dropdown {
position: relative; position: relative;
} }
.dropdown .submenu { .dropdown .submenu {
display: none;
position: fixed; position: fixed;
right: 0; top: 6rem;
/* ajuster si nécessaire selon hauteur header */
right: 1rem;
z-index: 10; z-index: 10;
display: none;
padding-right: 1rem;
background-color: #F9E7DB; background-color: #F9E7DB;
}
/* Cacher la case à cocher */
.toggle-submenu {
display: none;
}
/* Afficher le sous-menu si l’input est coché */
.toggle-submenu:checked + label + .submenu {
display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
padding: 0.5rem;
min-width: 180px;
} }
/* Style du label 'Autre' */
.dropdown label { .dropdown:hover .submenu {
display: flex;
}
/* Style du bouton 'Autre' */
.dropdown-label {
cursor: pointer; cursor: pointer;
padding: 0.5rem; padding: 0.5rem;
display: inline-block; display: inline-block;
color: #333; color: #333;
background-color: transparent; background-color: transparent;
} }
/* Grand écran : menu complet */
@media (min-width: 1500px) { /* Sous-menu items */
.submenu li a {
display: block;
padding: 0.5rem;
text-decoration: none;
color: #333;
}
@media (max-width: 1299px) and (min-width: 100px) {
#menuXL { #menuXL {
display: flex; display: none;
} }
}
/* Moyen écran */
@media (max-width: 1499px) and (min-width: 1300px) {
#menuL {
display: flex;
}
}
/* Petit écran */
@media (max-width: 1299px) and (min-width: 1099px) {
#menuM { #menuM {
display: flex; display: flex;
} }
} }
/* Mobile (burger menu géré ailleurs) */
@media (max-width: 1100px) and (min-width: 750px){ @media (max-width: 999px) and (min-width: 850px) {
.menu { .logo span {
clear: none; display: none;
float: right;
max-height: none;
}
#menuS {
display: flex;
} }
} }
@media (max-width: 749px) { /* menu sandwish */
.header { @media (max-width: 849px) {
display:flex .logo span {
display: inline-flex;
} }
#menuXL {
max-height: 0;
max-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
transition: max-height 0.3s ease;
}
#menuM {
display: none;
}
.header {
display: flex;
}
.menu { .menu {
clear: both; clear: both;
max-height: 0; max-height: 0;
transition: max-height .2s ease-out; transition: max-height .2s ease-out;
} }
.menu-icon { .menu-icon {
display: inline-block !important; display: inline-block !important;
} }
} }
/* === Menu mobile burger === */
/* ---------------------------
/* Menu accordéon
/* --------------------------*/
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
display: none; display: none;
float: right; float: right;
padding: 28px 20px; padding: 28px 20px;
position: relative; position: relative;
user-select: none; user-select: none;
} }
.menu-icon .navicon { .menu-icon .navicon {
background: #333; background: #333;
display: block; display: block;
height: 2px; height: 2px;
position: relative; position: relative;
transition: background .2s ease-out; transition: background .2s ease-out;
width: 18px; width: 18px;
} }
.menu-icon .navicon:before, .menu-icon .navicon:before,
.menu-icon .navicon:after { .menu-icon .navicon:after {
background: #333; background: #333;
content: ''; content: '';
display: block; display: block;
height: 100%; height: 100%;
position: absolute; position: absolute;
transition: all .2s ease-out; transition: all .2s ease-out;
width: 100%; width: 100%;
}
.menu-icon .navicon:before {
top: 5px;
}
.menu-icon .navicon:after {
top: -5px;
}
.menu-btn {
display: none;
} }
.menu-btn:checked~nav .menu { .menu-icon .navicon:before {
max-height: 240px; top: 5px;
}
.menu-icon .navicon:after {
top: -5px;
}
.menu-btn {
display: none;
}
.menu-btn:checked~nav #menuXL {
max-height: 300px;
max-width: 100%;
} }
.menu-btn:checked~.menu-icon .navicon { .menu-btn:checked~.menu-icon .navicon {
background: transparent; background: transparent;
} }
.menu-btn:checked~.menu-icon .navicon:before { .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.menu-btn:checked~.menu-icon .navicon:after { .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg); transform: rotate(45deg);
} }
.menu-btn:checked~.menu-icon:not(.steps) .navicon:before, .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.menu-btn:checked~.menu-icon:not(.steps) .navicon:after { .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0; top: 0;
} }

2
style.css
View File

@@ -6,10 +6,12 @@ body {
padding: 0; padding: 0;
background-color: #F9E7DB; background-color: #F9E7DB;
color: #333; color: #333;
font-family: Times New Roman;
} }
main { main {
padding: 0 1rem; padding: 0 1rem;
margin: 0 auto; margin: 0 auto;
max-width: 1280px;
} }
section { section {
margin-bottom: 2rem; margin-bottom: 2rem;