Toggle navigation

src/script/main.js

@@ -120,6 +120,14 @@ $(document).ready(function () {
     })
   }
 
+  $('body').click(function (e) {
+    $('#show-menu').prop('checked', false)
+  })
+
+  $('.menu').click(function (e) {
+    e.stopPropagation()
+  })
+
   $('#dialog #close').click(function (e) {
     window.Dialog.close()
   })

src/style/main.styl

@@ -98,8 +98,11 @@ a
         cursor: pointer
         color: green
     
-    .menu:hover > .list
-        max-height: 500px
+    input[type=checkbox]
+        display: none
+
+        &:checked ~ .list
+            max-height: 500px
 
 section
     font-family: "Open Sans"

views/layout.pug

@@ -69,8 +69,9 @@ html
 							.part1 Icy
 							.part2 Network
 				.menu
-					.showButton(for="show-menu")
+					label.showButton(for="show-menu")
 						i.fa.fa-fw.fa-bars
+					input(type="checkbox" id="show-menu")
 					.list
 						ul
 							li