CSS : simplification media et css
This commit is contained in:
Anthony Mahé
12
index.html
12
index.html
@@ -38,14 +38,16 @@
|
||||
Email : c.pasteuravocate@gmail.com
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.html" class="logo">
|
||||
<div class="logo">
|
||||
<a href="index.html">
|
||||
<img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
|
||||
Charline Pasteur, Avocate
|
||||
<span>Charline Pasteur, Avocate</span>
|
||||
</a>
|
||||
<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">
|
||||
<ul class="menu" id="menuXL">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
@@ -64,7 +66,7 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -78,7 +80,7 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -92,7 +94,7 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
204
navigation.css
204
navigation.css
@@ -15,37 +15,14 @@
|
||||
z-index: 100;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #F9E7DB;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
align-items: center;
|
||||
display: block;
|
||||
display : flex;
|
||||
}
|
||||
|
||||
.header ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.header li {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
border-right: 1px solid #F9E7DB;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.header li a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding-bottom: 4px; /* pour éviter que la ligne touche le texte */
|
||||
}
|
||||
|
||||
.header li a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -56,73 +33,58 @@
|
||||
background-color: #CC4331;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.header li a:hover::after {
|
||||
li a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header li a:hover,
|
||||
.header .menu-btn:hover {
|
||||
li a:hover,
|
||||
.menu-btn:hover {
|
||||
background-color: #F9E7DB;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
max-width: 380px;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
.logo {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.header .logo img {
|
||||
.logo img {
|
||||
display: inline-block;
|
||||
max-height: 40px;
|
||||
padding: 8px 4px 8px 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header nav {
|
||||
nav {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* menu caché par défaut*/
|
||||
nav .menu {
|
||||
/* menu caché par défaut, on affiche ensuite en fonction de la taille du média*/
|
||||
.menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav .menu li {
|
||||
.menu li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Sous-menu caché par défaut */
|
||||
|
||||
/* Cacher le sous-menu par défaut */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown .submenu {
|
||||
position: absolute;
|
||||
top: 100%; /* place le sous-menu juste sous le bouton "Autre" */
|
||||
left: 0; /* aligne à gauche du bouton "Autre" */
|
||||
transform: translateX(-100%); /* décale le menu vers la gauche du bouton */
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
padding: 0;
|
||||
list-style: 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: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Style du label 'Autre' */
|
||||
.dropdown label {
|
||||
cursor: pointer;
|
||||
@@ -131,92 +93,63 @@ nav .menu li {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Style des items du sous-menu */
|
||||
.submenu li a {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.submenu li a:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* Grand écran : menu complet */
|
||||
@media (min-width: 1500px) {
|
||||
#menuXL {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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: 700px){
|
||||
@media (max-width: 1100px) and (min-width: 750px){
|
||||
.menu {
|
||||
clear: none;
|
||||
float: right;
|
||||
max-height: none;
|
||||
}
|
||||
#menuS {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cacher la case à cocher */
|
||||
.toggle-submenu {
|
||||
display: none;
|
||||
@media (max-width: 749px) {
|
||||
.header {
|
||||
display:flex
|
||||
}
|
||||
|
||||
|
||||
/* Afficher le sous-menu si activé */
|
||||
.toggle-submenu:checked + label + .submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Styles généraux */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown label {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Pour que le sous-menu ne s'affiche que sous 'Autre' */
|
||||
.dropdown .submenu li {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* menu */
|
||||
.header .menu {
|
||||
.menu {
|
||||
clear: both;
|
||||
max-height: 0;
|
||||
transition: max-height .2s ease-out;
|
||||
}
|
||||
.menu-icon {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* menu icon */
|
||||
.header .menu-icon {
|
||||
|
||||
/* ---------------------------
|
||||
/* Menu accordéon
|
||||
/* --------------------------*/
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
display: none;
|
||||
float: right;
|
||||
padding: 28px 20px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.header .menu-icon .navicon {
|
||||
.menu-icon .navicon {
|
||||
background: #333;
|
||||
display: block;
|
||||
height: 2px;
|
||||
@@ -224,9 +157,8 @@ nav .menu li {
|
||||
transition: background .2s ease-out;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.header .menu-icon .navicon:before,
|
||||
.header .menu-icon .navicon:after {
|
||||
.menu-icon .navicon:before,
|
||||
.menu-icon .navicon:after {
|
||||
background: #333;
|
||||
content: '';
|
||||
display: block;
|
||||
@@ -235,62 +167,34 @@ nav .menu li {
|
||||
transition: all .2s ease-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header .menu-icon .navicon:before {
|
||||
.menu-icon .navicon:before {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.header .menu-icon .navicon:after {
|
||||
.menu-icon .navicon:after {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
/* menu btn */
|
||||
.header .menu-btn {
|
||||
.menu-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~nav .menu {
|
||||
.menu-btn:checked~nav .menu {
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~.menu-icon .navicon {
|
||||
.menu-btn:checked~.menu-icon .navicon {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~.menu-icon .navicon:before {
|
||||
.menu-btn:checked~.menu-icon .navicon:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~.menu-icon .navicon:after {
|
||||
.menu-btn:checked~.menu-icon .navicon:after {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
|
||||
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
|
||||
.menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
|
||||
.menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Styles pour les écrans plus grand (hors téléphones) */
|
||||
@media (min-width: 48em) {
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
}
|
||||
.header li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header li a {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.header .menu {
|
||||
clear: none;
|
||||
float: right;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.header .menu-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
14
style.css
14
style.css
@@ -7,42 +7,40 @@ body {
|
||||
background-color: #F9E7DB;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
text-decoration: none;
|
||||
float: left;
|
||||
}
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #bf9000;
|
||||
vertical-align: baseline;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #CC4331;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-indent: 10px;
|
||||
}
|
||||
|
||||
p span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #CC4331;
|
||||
padding: 0.7rem 1rem;
|
||||
|
||||
Reference in New Issue
Block a user