Responzivní design: Pure CSS hamburger menu

Originální inspirace: https://codepen.io/erikterwan/pen/EVzeRP

Klasický trik se skrytým checkboxem.

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>

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%; }
 }