studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add expanded menu

Browse source
This commit is contained in:
isUnknown 2024-08-26 17:03:32 +02:00
parent b1ddfee49c
commit 049f11e011
9 changed files with 155 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

73
assets/css/src/nav.css
View file

@ -1,17 +1,86 @@
/* Nav */
.expanded-nav,
.main-nav {
padding: 1rem;
padding-right: var(--space-m);
}
/* Expanded nav */
.expanded-nav {
position: fixed;
width: 100%;
box-sizing: border-box;
top: -20rem;
z-index: 2;
background-color: var(--color-brown-light);
display: grid;
grid-template-columns: 1fr 4fr 1fr;
transition: top 0.5s var(--curve-quick-slow);
}
.expanded-nav.open {
top: 0rem;
}
.expanded-nav__columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.expanded-nav .close-btn {
position: relative;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
justify-self: end;
}
.expanded-nav .close-btn__line,
.expanded-nav .close-btn__line::before {
content: "";
width: 100%;
height: 3px;
background-color: #000;
position: absolute;
}
.expanded-nav .close-btn__line {
transform: rotate(-45deg);
}
.expanded-nav .close-btn__line::before {
transform: rotate(90deg);
}
.expanded-nav__category {
margin-bottom: 1rem;
}
.expanded-nav__subcategory {
font-size: var(--font-size-s);
}
/* Header */
.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--border);
padding: 1rem;
}
.main-nav__right {
display: flex;
align-items: center;
}
.main-nav__right > *:not(:last-child) {
.main-nav__featured-pages {
display: flex;
}
.main-nav__right > *:not(:last-child),
.main-nav__featured-pages li:not(:last-child) {
margin-right: 2.69rem;
}