From 7ed59ca017059ba8c7d229a8251997989dccf2c3 Mon Sep 17 00:00:00 2001
From: Bill Niblock <bill_niblock@yahoo.com>
Date: Thu, 16 Jul 2015 15:57:06 -0400
Subject: [PATCH] Update menu for extended usability

---
 _layouts/default.html | 45 ++++++++++++++++++++++++++++++++++++++++---
 src/styles.css        | 24 +++++++++++++++++------
 2 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 3c95130..c7acba5 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -31,10 +31,12 @@
      <input type="checkbox" id="toggle-navbar" />
      <div id="bar">
           <section id="header">
-               <ul id="navigation">
+          <input type="radio" name="menu_buttons" id="mb_1" />
+          <div id="menu" name="navigation">
+               <ul id="nav_list">
                <li><a href="http://www.theinternetvagabond.com">
                     Home</a></li>
-               <li>Projects</li>
+               <li><label for="mb_2" id="projs_label">Projects</label></li>
                     <ul id="projects">
                     <li>GitHub Page<br />
                     <div>
@@ -55,7 +57,7 @@
                     </div>
                     </li>
                     </ul>
-               <li>Posts</li>
+               <li><label for="mb_3" id="posts_label"> Posts</label></li>
                     <ul id="posts">
                          {% for post in site.posts limit:3 %}
                          <li>
@@ -65,6 +67,43 @@
                          {% endfor %}
                     </ul>
                </ul>
+          </div>
+          <input type="radio" name="menu_buttons" id="mb_2" />
+          <div id="menu" name="projects_all">
+               <ul id="projects">
+                    <li><label for="mb_1" id="nav_label">Main Menu</label></li>
+                    <li>GitHub Page<br />
+                    <div>
+                         <a href="#">[ Page ]</a>
+                         <a href="https://github.com/VagabondAzulien/VagabondAzulien.github.io">[ Source ]</a>
+                    </div>
+                    </li>
+                    <li>Dot Files<br />
+                    <div>
+                         <a href="#">[ Page ]</a>
+                         <a href="#">[ Source ]</a>
+                    </div>
+                    </li>
+                    <li>Antennae<br />
+                    <div>
+                         <a href="#">[ Page ]</a>
+                         <a href="https://github.com/VagabondAzulien/antennae">[ Source ]</a>
+                    </div>
+                    </li>
+               </ul>
+          </div>
+          <input type="radio" name="menu_buttons" id="mb_3" />
+          <div id="menu" name="posts_all">
+               <ul id="posts">
+                    <li><label for="mb_1" id="nav_label">Main Menu</label></li>
+                    {% for post in site.posts %}
+                    <li>
+                         <a href="{{ post.url }}">
+                              {{ post.title }}</a>
+                    </li>
+                    {% endfor %}
+               </ul>
+          </div>
           </section> 
           <section id="footer">
           <div id="follow">
diff --git a/src/styles.css b/src/styles.css
index 5641714..845298e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -25,7 +25,7 @@ a,a:visited,a:link,a:focus {
 
 header {
      position: fixed; top: 0px; left: 0px; right: 0px;
-     margin: 0px; padding: 10px; z-index: 5;
+     margin: 0px; padding: 10px; z-index: 1;
      background-color: white;
      border-bottom: 1px solid lightgrey;
      box-shadow: 0px 2px 10px -5px blue;
@@ -57,7 +57,7 @@ header {
 
 #navbar {
      position: fixed; top: 0px; right: 0px; bottom: 0px;
-     width: 400px; margin: 0px; padding: 0px; z-index: 10; opacity: 100%
+     width: 400px; margin: 0px; padding: 0px; z-index: 2; opacity: 100%
 }
 
 #navbar #bar {
@@ -73,7 +73,7 @@ header {
 
 #navbar #toggle {
      position: absolute; right: 0px;
-     margin: 0px; padding: 13px 25px; z-index: 11;
+     margin: 0px; padding: 13px 25px; z-index: 3;
      font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      color: darkgrey;  text-shadow: 0px 0px 5px white;
 }
@@ -87,11 +87,15 @@ header {
      width: 100%;
 }
 
-#navigation {
+#menu {
      position: absolute; top: 12%; bottom: 18%; left: 0px; right: 0px;
-     list-style: none;
      margin: 10px;
-     color: darkgrey;
+     z-index: 4;
+     color: darkgrey; background-color: #202020;
+}
+
+#nav_list {
+     list-style: none;
 }
 
 #navigation a:link,a:visited,a:focus {
@@ -134,6 +138,14 @@ header {
      font-style: italic;
 }
 
+[name=menu_buttons] {
+     display: none; }
+
+[name=menu_buttons]:checked + #menu {
+     z-index: 5;
+}
+
+
 #bar #footer {
      position: absolute; bottom: 0px;
      width: 100%;