add menu toggle component
This commit is contained in:
parent
0eec23649d
commit
f16d7ee3c0
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
Reference in New Issue