rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add menu toggle component

This commit is contained in:
Ray Elliott 2020-04-02 18:27:20 +00:00
parent 0eec23649d
commit f16d7ee3c0
2 changed files with 36 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/layouts/partials/header.html
View File

@ -5,7 +5,9 @@
<ul class="l-flex-list-row">
<li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
</ul>
<ul class="l-flex-list-row nav__item">
<label class="c-menu-toggle" for="menu-toggle">Menu</label>
<input id="menu-toggle" class="c-menu-toggle__toggle" type="checkbox">
<ul class="l-flex-list-row nav__item c-menu-toggle__menu site-menu">
<li><a class="nav__link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
<li><a class="nav__link nav-link" href="#about">About</a></li>
<li><a class="nav__link nav-link" href="#services">Services</a></li>

33
src/css/imports/components/menu-toggle.scss Normal file
View File

@ -0,0 +1,33 @@
$bp-menu-collpase: $bp-s;
.c-menu-toggle {
cursor: pointer;
}
input.c-menu-toggle__toggle[type="checkbox"],
input.c-menu-toggle__toggle[type="radio"] {
display: none;
}
@media (max-width: $bp-menu-collpase) {
.c-menu-toggle {
opacity: 1;
pointer-events: auto;
}
.c-menu-toggle__menu {
opacity: 0;
pointer-events: none;
}
.c-menu-toggle__toggle:checked ~ .c-menu-toggle__menu {
opacity: 1;
pointer-events: auto;
}
}
@media (min-width: $bp-menu-collpase) {
.c-menu-toggle {
display: none;
}
}