Implement pure CSS nav menu
This commit is contained in:
parent
f7f6d5def4
commit
72a11d6751
|
@ -293,6 +293,10 @@ table {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#menu-btn-checkbox {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#mobile-menu {
|
#mobile-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 4.8em;
|
bottom: 4.8em;
|
||||||
|
@ -869,6 +873,18 @@ a.footnote-ref {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label[for=menu-btn-checkbox] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-btn-checkbox:not(:checked) ~ #mobile-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mobile-menu {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.posts-group {
|
.posts-group {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<header id="site-header" class="animated slideInUp">
|
<header id="site-header" class="">
|
||||||
<div class="hdr-wrapper section-inner">
|
<div class="hdr-wrapper section-inner">
|
||||||
<div class="hdr-left">
|
<div class="hdr-left">
|
||||||
<div class="site-branding">
|
<div class="site-branding">
|
||||||
|
@ -18,14 +18,15 @@
|
||||||
{{- with .Site.Params.social -}}
|
{{- with .Site.Params.social -}}
|
||||||
<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
|
<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<button id="menu-btn" class="hdr-btn" title="{{i18n "menu"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
|
<label id="menu-btn" for="menu-btn-checkbox">≣</label>
|
||||||
|
<input id="menu-btn-checkbox" type="checkbox"/>
|
||||||
|
<div id="mobile-menu" class="animated fast">
|
||||||
|
<ul>
|
||||||
|
{{- range .Site.Menus.main }}
|
||||||
|
<li><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
|
||||||
|
{{- end }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div id="mobile-menu" class="animated fast">
|
|
||||||
<ul>
|
|
||||||
{{- range .Site.Menus.main }}
|
|
||||||
<li><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
|
|
||||||
{{- end }}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
Loading…
Reference in New Issue