diff options
| author | Xavier Del Campo Romero <xavi.dcr@tutanota.com> | 2023-01-03 04:15:41 +0100 |
|---|---|---|
| committer | Xavier Del Campo Romero <xavi.dcr@tutanota.com> | 2023-01-03 04:15:41 +0100 |
| commit | 72a11d6751f6b66dd292139ff877bc4275953701 (patch) | |
| tree | 972632849f294e1dce84edc484f9608440173385 | |
| parent | f7f6d5def4bd571bf4d73ea14079b4a66b1da1a8 (diff) | |
Implement pure CSS nav menu
| -rw-r--r-- | assets/scss/style.scss | 16 | ||||
| -rw-r--r-- | layouts/partials/header.html | 19 |
2 files changed, 26 insertions, 9 deletions
diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 1a0f9a8..32ba2ae 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -293,6 +293,10 @@ table { cursor: pointer; } +#menu-btn-checkbox { + display: none; +} + #mobile-menu { position: fixed; bottom: 4.8em; @@ -869,6 +873,18 @@ a.footnote-ref { 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 { display: block; diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 473f597..ec776db 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -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-left"> <div class="site-branding"> @@ -18,14 +18,15 @@ {{- with .Site.Params.social -}} <span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span> {{- 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> </header> - <div id="mobile-menu" class="animated fast"> - <ul> - {{- range .Site.Menus.main }} - <li><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li> - {{- end }} - </ul> - </div> |