studio-variable/botascopia-webiste-static
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

menu

Browse source
This commit is contained in:
Julie Blanc 2026-02-27 20:33:56 +01:00
parent 25cdb3bd0b
commit 31e1b729f3
28 changed files with 925 additions and 426 deletions
Download patch file Download diff file Expand all files Collapse all files

290
assets/css/_site-nav.scss
View file

@ -1,6 +1,9 @@
@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;
#site-nav{
z-index: var(--header-z);
position: relative;
z-index: calc(var(--header-z) - 10);
}
@ -12,6 +15,9 @@
#site-nav li{
font-weight: 500;
color: var(--color-txt);
input[type="radio"]{
display: none;
}
}
.arrow{
@ -35,17 +41,281 @@
}
#site-nav .nav-level-1_ul{
display: flex;
gap: calc(var(--padding-inner)*2);
label[for="menu-toggle"]{
cursor: pointer;
.menu__icon{
@include icon(26px);
}
}
#menu-toggle{ display: none; }
#menu-toggle ~ label[for="menu-toggle"] {
.menu__icon--open{ display: flex; }
.menu__icon--close{ display: none; }
}
#menu-toggle:checked ~ label[for="menu-toggle"] {
.menu__icon--open{ display: none; }
.menu__icon--close{ display: flex; }
}
@media #{$medium}{
#menu-toggle ~ #site-nav{
top: -100vh;
}
#menu-toggle:checked ~ #site-nav{
top: var(--header-h);
}
#site-nav{
position: fixed;
background-color: white;
transition: top .5s ease-in-out;
// top: var(--header-h);
left: 0px;
max-height: calc(100vh - var(--header-h) + 2px);
width: 100vw;
padding: calc(var(--padding-body)*1);
border-bottom: 2px solid var(--color-txt);
// overflow-y: scroll;
overflow: hidden;
.img-menu{
position: absolute;
top: 25vw;
margin-top: -20vw;
right: -20vh;
width: auto;
height: calc(400px + 25vw);
z-index: 10;
float: right;
background-color: var(--color-txt);
display: flex;
img{
mix-blend-mode: screen;
}
}
#btn__connexion,
.nav-level-1_ul{
position: relative;
z-index: 20;
}
#btn__connexion{
display: block;
// margin-inline: auto;
margin-top: calc(var(--spacing)*2);
// margin-bottom: calc(var(--spacing)*1);
}
.nav-level-1_ul{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-gap: var(--padding-inner);
max-width: 580px;
margin-right: 35vw;
max-height: calc(100% - var(--spacing)*4);
overflow-y: scroll;
}
.nav-level-1_li:first-of-type{
grid-row: 1/3;
}
.nav-level-1_link{
display: block;
font-size: var(--fs-small);
font-family: var(--font-title);
padding-top: calc(var(--spacing)*1.5);
padding-bottom: calc(var(--spacing)*1);
text-decoration: underline 2px;
text-underline-offset: 3px;
text-transform: uppercase;
padding-left: 1.4ch;
cursor: auto;
.arrow{
display: none;
}
// a{
// pointer-events: none;
// cursor: auto;
// }
}
.nav-level-2_li{
font-size: var(--fs-normal);
max-width: 20ch;
a{
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: calc(var(--spacing)*0.35) 1ch;
}
&:hover{
background-color: var(--color-x-light);
}
}
}
}
@media screen and (max-width: 780px){
#site-nav{
height: calc(100vh - var(--header-h) + 10px);
.nav-level-1_ul{
margin-right: 10vw;
}
.img-menu{
top: auto;
bottom: -60px;
height: 400px;
}
}
}
@media #{$x-small}{
#site-nav{
.nav-level-2_ul{
max-height: 0;
transition: max-height .3s ease-in, opacity .2s ease-in;
overflow: hidden;
opacity: 0;
}
.nav-level-1_ul{
display: block;
width: calc(100% + var(--padding-body));
overflow: hidden;
input:checked + label .arrow svg{
transform: rotate(90deg);
}
input:checked ~ .nav-level-2_ul{
max-height: 300px;
padding-top: calc(var(--spacing)*0.5);
padding-bottom: calc(var(--spacing)*2);
opacity: 1;
}
}
.nav-level-1_link{
cursor: pointer;
}
#btn__connexion{
margin-inline: 0px;
position: absolute;
bottom: calc(var(--spacing)*1.5);
}
.img-menu{
// display: none;
bottom: -80px;
}
.nav-level-1_link{
padding-top: calc(var(--spacing) * 0.5);
padding-bottom: calc(var(--spacing) * 0.5);
text-decoration: none;
display: flex;
justify-content: space-between;
max-width: 26ch;
.arrow{
display: block;
padding-left: 2ch;
position: relative;
top: 1px;
}
}
}
}
@media #{$medium-up}{
#menu-toggle,
label[for="menu-toggle"]{
display: none;
}
#site-nav{
display: flex;
gap: calc(var(--padding-inner)*1);
align-items: center;
}
#site-nav .nav-level-1_ul{
display: flex;
// gap: calc(var(--padding-inner)*0);
}
#site-nav .nav-level-1_li {
display: block;
/* float: left; */
padding: var(--padding-inner);
position: relative;
text-decoration: none;
white-space: nowrap;
&:hover{
color: var(--color-green);
@ -95,6 +365,16 @@
}
.img-menu{
display: none;
}
}