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
</a>
</div>
<div>
<!--<div>
Email : c.pasteuravocate@gmail.com
</div>
</div>-->
</div>
<div class="logo">
<a href="index.html">
<img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
<span>Charline Pasteur, Avocate</span>
</a>
<div class="navigation">
<div class="logo">
<a href="index.html">
<img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
<span>Charline Pasteur, Avocate</span>
</a>
</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">
<!-- 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>
<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>
<div class="banner banner-accueil">
</div>

252
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 {
top: 0;
position: fixed;
@@ -15,186 +35,204 @@
z-index: 100;
font-size: 11px;
}
.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;
.navigation {
display:flex;
width: 100%;
}
li a:hover::after {
width: 100%;
}
li a:hover,
.menu-btn:hover {
background-color: #F9E7DB;
}
.logo {
width:100%
width: 100%;
}
.logo img {
display: inline-block;
max-height: 40px;
padding: 8px 4px 8px 12px;
vertical-align: middle;
display: inline-block;
max-height: 40px;
padding: 8px 4px 8px 12px;
vertical-align: middle;
}
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 {
list-style: none;
padding: 0;
margin: 0;
display: none;
gap: 1rem;
align-items: center;
}
.menu li {
position: relative;
white-space: nowrap;
padding: 0.1rem;
}
/* Sous-menu en hover */
.dropdown {
position: relative;
}
.dropdown .submenu {
display: none;
position: fixed;
right: 0;
top: 6rem;
/* ajuster si nécessaire selon hauteur header */
right: 1rem;
z-index: 10;
display: none;
padding-right: 1rem;
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;
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;
padding: 0.5rem;
display: inline-block;
color: #333;
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 {
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 {
display: flex;
}
}
/* Mobile (burger menu géré ailleurs) */
@media (max-width: 1100px) and (min-width: 750px){
.menu {
clear: none;
float: right;
max-height: none;
@media (max-width: 999px) and (min-width: 850px) {
.logo span {
display: none;
}
#menuS {
display: flex;
}
}
@media (max-width: 749px) {
/* menu sandwish */
@media (max-width: 849px) {
.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
}
display: flex;
}
.menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.menu-icon {
display: inline-block !important;
}
}
/* ---------------------------
/* Menu accordéon
/* --------------------------*/
/* === Menu mobile burger === */
.menu-icon {
cursor: pointer;
display: none;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
cursor: pointer;
display: none;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.menu-icon .navicon:before {
top: 5px;
}
.menu-icon .navicon:after {
top: -5px;
}
.menu-btn {
display: none;
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.menu-btn:checked~nav .menu {
max-height: 240px;
.menu-icon .navicon:before {
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 {
background: transparent;
background: transparent;
}
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
transform: rotate(-45deg);
}
.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:after {
top: 0;
}
top: 0;
}

2
style.css
View File

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