Updated main menu to scroll vertically while allowing the popout menu (using hacks)

2 files changed, 31 insertions, 8 deletions

diff --git a/layouts/partials/main-menu.html b/layouts/partials/main-menu.html
index 1a95690..afdcebe 100644
--- a/layouts/partials/main-menu.html
+++ b/layouts/partials/main-menu.html
@@ -1,12 +1,12 @@
 
-<nav class="main-menu menu-colors">
+<nav class="main-menu">
     <ul class="menu menu-colors no-list-float">
         <li><a href="{{ .Site.BaseURL }}"><i class="fa fa-home fa-2x"></i></a></li>
         <li>
             <a href="#!"><i class="fa fa-bars fa-2x"></i></a>
 
             <!-- NOTE: Only support two levels of menus at the moment! -->
-            <ul class="menu menu-colors no-list-float">
+            <ul class="menu flexible-width menu-colors no-list-float">
                 {{ $currentNode := . }}
                 {{ range .Site.Menus.main }}
                     <li {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }}class="active"{{ end }}>
@@ -17,7 +17,7 @@
                             <span class="drop-right"></span>
                             <!-- <i class="fa fa-caret-right"></i> -->
                         </a>
-                        <ul class="menu menu-colors no-list-float">
+                        <ul class="menu flexible-width menu-colors no-list-float">
                             {{ range .Children }}
                                 <li {{ if $currentNode.IsMenuCurrent "main" . }} class="active" {{ end }}>
                                     <a href="{{ .URL }}">{{ .Name }}</a>
diff --git a/static/css/main.css b/static/css/main.css
index 54650c0..8f83a44 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -32,29 +32,48 @@
 
 /* Represents the main menu that is fixed to the left side of the page. */
 /* Has a high z-index such that children can appear outside of its width. */
+/* Using maximum width to allow hover menus of child to be visible */
+/* Because this navigation is covering the entire page, make it transparent */
+/* NOTE:
+ * Because covering entire page, disable pointer events to allow elements
+ * underneath to receive them
+ */
+/* Set scrolling for vertical part of menu */
 .main-menu {
     display: block;
     position: fixed;
-    width: 70px;
+
+    width: 100%;
     height: 100%;
+
+    background-color: rgba(0, 0, 0, 0);
+
+    pointer-events: none;
+
+    overflow-y: scroll;
+
     top: 0px;
     left: 0px;
     z-index: 999;
     text-align: center;
 }
 
-.menu-vertical-scroll {
-    overflow-y: scroll;
-}
-
 /* Represents the standard foreground/background colors of a menu. */
 .menu-colors {
     background-color: #455A64;
     color: #FFFFFF;
 }
 
+/* NOTE: Renable pointer events since parent disables them (allows hover) */
+/* NOTE: Setting width here to counterbalance 100% of parent */
 ul.menu {
     display: block;
+
+    pointer-events: auto;
+
+    width: 70px;
+    min-height: 100%;
+
     margin: 0px;
     padding: 0px;
     list-style: none;
@@ -62,6 +81,10 @@ ul.menu {
     white-space: nowrap;
 }
 
+ul.menu.flexible-width {
+    width: auto;
+}
+
 span.drop-right {
     display: block;
     box-shadow:inset 2px 0px 0px #90a4ae;