From 5ec4ccb0b6ed893a9896f229d6977c48e1d5be02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Setni=C4=8Dka?= <setnicka@seznam.cz>
Date: Tue, 5 Sep 2023 19:21:54 +0200
Subject: [PATCH] =?UTF-8?q?Responzivn=C3=AD=20design:=20Pure=20CSS=20hambu?=
=?UTF-8?q?rger=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Originální inspirace: https://codepen.io/erikterwan/pen/EVzeRP
Klasický trik se skrytým checkboxem.
---
mo/web/templates/base.html | 6 +++
static/mo.css | 86 ++++++++++++++++++++++++++++++++++++++
2 files changed, 92 insertions(+)
diff --git a/mo/web/templates/base.html b/mo/web/templates/base.html
index 782a7d7f..183467a2 100644
--- a/mo/web/templates/base.html
+++ b/mo/web/templates/base.html
@@ -20,6 +20,12 @@
</div>
</header>
<div id="nav-wrapper">
+ <!-- A fake / hidden checkbox is used as click receiver -->
+ <input class="hamburger" type="checkbox" />
+ <span></span>
+ <span></span>
+ <span></span>
+
<nav id="main-menu" class="content">
{% for item in get_menu() %}
<a {% if item.classes %}class="{{ " ".join(item.classes) }}"{% endif %} href="{{ item.url }}">{{ item.name }}</a>
diff --git a/static/mo.css b/static/mo.css
index 3c0c7d96..8d394880 100644
--- a/static/mo.css
+++ b/static/mo.css
@@ -46,6 +46,7 @@ header h1 { margin: auto 20px 0px; color: #222; }
border: 1px #222 solid;
z-index: 10;
}
+#nav-wrapper input.hamburger { display: none; }
footer {
margin-top: auto;
@@ -563,4 +564,89 @@ table.data input.form-control {
header h1 {
font-size: 18px;
}
+
+ /* Hamburger responsive menu (original source: https://codepen.io/erikterwan/pen/EVzeRP) */
+ #nav-wrapper {
+ background-color: rgba(255, 255, 255, 0.8);
+ border: none;
+ z-index: 1;
+ padding-top: 10px;
+ user-select: none;
+ }
+ #nav-wrapper input.hamburger {
+ display: block;
+ margin-left: 10px;
+ width: 40px;
+ height: 32px;
+ position: absolute;
+ top: -2px;
+ left: -7px;
+
+ cursor: pointer;
+
+ opacity: 0; /* hide this */
+ z-index: 2; /* and place it over the hamburger */
+ -webkit-touch-callout: none;
+ }
+
+ /* Hamburger symbol */
+ #nav-wrapper span {
+ display: block;
+ width: 33px;
+ height: 4px;
+ margin-left: 10px;
+ margin-bottom: 5px;
+ position: relative;
+
+ background: #222;
+ border-radius: 3px;
+
+ z-index: 1;
+
+ transform-origin: 4px 0px;
+
+ transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+ background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+ opacity 0.55s ease;
+ }
+ #nav-wrapper span:first-child { transform-origin: 0% 0%; }
+ #nav-wrapper span:nth-last-child(2) { transform-origin: 0% 100%; }
+
+ /* Hamburger crossmark symbol */
+ #nav-wrapper input.hamburger:checked ~ span {
+ background-color: #fff;
+ opacity: 1;
+ transform: rotate(45deg) translate(-2px, -1px);
+ }
+ #nav-wrapper input.hamburger:checked ~ span:nth-last-child(3) {
+ opacity: 0;
+ transform: rotate(0deg) scale(0.2, 0.2);
+ }
+ #nav-wrapper input.hamburger:checked ~ span:nth-last-child(2) {
+ transform: rotate(-45deg) translate(0, -1px);
+ }
+
+ nav#main-menu {
+ position: absolute;
+ max-width: 300px;
+ max-height: 100vh;
+ top: 0px;
+ padding-top: 35px;
+
+ flex-direction: column;
+ flex-wrap: nowrap;
+
+ background: #222;
+ -webkit-font-smoothing: antialiased;
+ /* to stop flickering of text in safari */
+
+ transform: translate(-120%, 0);
+
+ transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+ overflow-y: scroll;
+ }
+ #nav-wrapper input.hamburger:checked ~ nav#main-menu { transform: none; }
+
+ nav#main-menu > .right { margin-left: 0px; }
+ nav#main-menu > form > input { width: 100%; }
}
--
GitLab