Make the hamburger work with pure CSS again

* See also jekyll/minima#111
pixyzehn · Sep 16, 2017 · 88b18f2 · 88b18f2
1 parent e86a45c
commit 88b18f2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 17 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,15 +1,18 @@
 <header class="site-header">
-  <div class="wrapper">
-    <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
-    <nav class="site-nav">
-      {% include menu_icon.html %}
-      <div class="trigger">
-        <a class="page-link" href="/">About</a>
-        <a class="page-link" href="/portfolio">Portfolio</a>
-        <a class="page-link" href="/blog">Blog</a>
-        <a class="page-link" href="/archives">Archives</a>
-        <a class="page-link" href="/tags">Tags</a>
-      </div>
-    </nav>
-  </div>
+    <div class="wrapper">
+        <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
+        <nav class="site-nav">
+            <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+            <label for="nav-trigger">
+                {% include menu_icon.html %}
+            </label>
+            <div class="trigger">
+                <a class="page-link" href="/">About</a>
+                <a class="page-link" href="/portfolio">Portfolio</a>
+                <a class="page-link" href="/blog">Blog</a>
+                <a class="page-link" href="/archives">Archives</a>
+                <a class="page-link" href="/tags">Tags</a>
+            </div>
+        </nav>
+    </div>
 </header>
diff --git a/_includes/menu_icon.html b/_includes/menu_icon.html
@@ -1,7 +1,7 @@
-<a href="#" class="menu-icon">
+<span class="menu-icon">
     <svg viewBox="0 0 18 15">
         <path fill="#aaa" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
         <path fill="#aaa" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
         <path fill="#aaa" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
     </svg>
-</a>
+</span>
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -31,6 +31,14 @@
     float: right;
     line-height: 56px;
 
+    .nav-trigger {
+        display: none;
+    }
+
+    .trigger {
+        float: right;
+    }
+
     .menu-icon {
         display: none;
     }
@@ -56,6 +64,15 @@
         border-radius: 5px;
         text-align: right;
 
+        label[for="nav-trigger"] {
+            display: block;
+            float: right;
+            width: 36px;
+            height: 36px;
+            z-index: 2;
+            cursor: pointer;
+        }
+
         .menu-icon {
             display: block;
             float: right;
@@ -76,12 +93,12 @@
             }
         }
 
-        .trigger {
+        input ~ .trigger {
             clear: both;
             display: none;
         }
 
-        &:hover .trigger {
+        input:checked ~ .trigger {
             display: block;
             padding-bottom: 5px;
         }