iger
/
www.iger.events
9
1
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Add toggleable main menu

This commit is contained in:
Luca 2022-07-02 01:26:23 +02:00
parent dcfe146f99
commit f1495830da
2 changed files with 79 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
assets/style.scss
View File

@ -26,8 +26,19 @@ header, footer {
} }
header { header {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 0.5rem; margin-top: 0.5rem;
pre {
font-family: monospace;
font-size: 0.8rem;
line-height: 1;
user-select: none;
}
nav { nav {
font-size: 1.2rem; font-size: 1.2rem;
} }
@ -54,15 +65,32 @@ nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
:not(:first-child) { &.nav-toggleable {
margin: 0.5rem 0 0 0; flex-basis: 100%;
max-height: 0;
overflow-y: hidden;
transition: max-height 0.5s;
.nav-toggle:checked ~ & {
max-height: calc(var(--num-elements) * 2em);
}
}
a {
line-height: 1.5em;
margin: 0.5em 0 0 0;
} }
@media screen and (min-width: $small) { @media screen and (min-width: $small) {
flex-direction: row; flex-direction: row;
:not(:first-child) { &.nav-toggleable {
margin: 0 0 0 1rem; flex-basis: auto;
max-height: max-content;
}
a {
margin: 0 0 0 1em;
} }
} }
} }
@ -91,3 +119,39 @@ a {
p + p { p + p {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.nav-burger {
cursor: pointer;
display: flex;
flex-direction: column;
height: 1rem;
justify-content: space-between;
width: 1.2rem;
div {
border: 1px solid #aaa;
transition: border-color 0.5s, transform 0.5s;
}
.nav-toggle:checked ~ & div {
border-color: transparent;
&:first-child {
border-color: #aaa;
transform: translateY(0.5rem) translateY(-1px) rotate(45deg) scaleX(141%);
}
&:last-child {
border-color: #aaa;
transform: translateY(-0.5rem) translateY(1px) rotate(-45deg) scaleX(141%);
}
}
@media screen and (min-width: $small) {
display: none;
}
}
.nav-toggle {
display: none;
}

12
layouts/_default/baseof.html
View File

@ -11,7 +11,17 @@
</head> </head>
<body> <body>
<header> <header>
<nav> <pre>TEST
LOGO
PLS
IGNR</pre>
<input class="nav-toggle" id="toggleMainNav" type="checkbox">
<label class="nav-burger" for="toggleMainNav">
<div></div>
<div></div>
<div></div>
</label>
<nav class="nav-toggleable" style="--num-elements: {{ len .Site.Menus.main }}">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<a{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} class="is-active"{{ end }} href="{{ .URL }}"{{ if hasPrefix .URL "https://" }} target="_blank"{{ end }}>{{ .Name }}</a> <a{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} class="is-active"{{ end }} href="{{ .URL }}"{{ if hasPrefix .URL "https://" }} target="_blank"{{ end }}>{{ .Name }}</a>
{{ end }} {{ end }}