Improve mobile nav [refs #1]

smartergiving · Apr 22, 2016 · a7d2400 · a7d2400
1 parent b91f003
commit a7d2400
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 5 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -5,7 +5,4 @@
     <h1><em>{{ site.foundation_tagline }}</em></h1>
   {% endif %}
   {% include nav.html %}
-  <div class="scroll-indicator">
-    <a href="#one" class="scrolly"><i class="fa fa-chevron-circle-down fa-3x"></i></a>
-  </div>
 </header>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,4 +1,4 @@
-<nav>
+<nav id="nav">
   <ul>
     <li><a href="{{ site.baseurl }}/" {% if page.url == '/' %} class="active" {% endif %}>Home</a></li>
     <li><a href="{{ site.baseurl }}/mission/" {% if page.url == '/mission/' %} class="active" {% endif %}>Mission</a></li>

diff --git a/assets/css/_sass/skel/_vars.scss b/assets/css/_sass/skel/_vars.scss
@@ -5,11 +5,13 @@
 
 // Duration.
 	$duration: (
+    navPanel:     0.5s,
 		transition:			0.2s
 	);
 
 // Size.
 	$size: (
+    navPanel:     275px,
 		border-radius:		0.35em,
 		element-height:		2.75em,
 		element-margin:		2em
@@ -55,4 +57,4 @@
 			border2:		rgba(255,255,255,0.5),
 			border2-bg:		rgba(255,255,255,0.2)
 		)
-	);
+	);
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -93,6 +93,115 @@ $screen-lg-max:              ($screen-xl-min - 1) !default;
   padding-bottom: 2em;
 }
 
+/* Nav */
+#navPanel, #navButton {
+  display: none;
+}
+
+@media only screen and (max-width: $screen-md-max)  {
+
+  #nav {
+    display: none;
+  }
+
+  /* Off-Canvas Navigation */
+
+  #page-wrapper {
+    @include vendor('backface-visibility', 'hidden');
+    @include vendor('transition', 'transform #{_duration(navPanel)} ease');
+    padding-bottom: 1px;
+  }
+
+  #navButton {
+    @include vendor('backface-visibility', 'hidden');
+    @include vendor('transition', 'transform #{_duration(navPanel)} ease');
+    display: block;
+    height: 44px;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: _misc(z-index-base) + 1;
+
+    .toggle {
+      background: rgba(192,192,192,0.75);
+      border-bottom: none;
+      border-radius: _size(border-radius);
+      color: #fff;
+      display: block;
+      font-size: 16px;
+      height: 2.25em;
+      left: 0.5em;
+      line-height: 2.25em;
+      position: absolute;
+      text-align: center;
+      top: 0.5em;
+      width: 4.5em;
+      &:hover {
+        background-color: rgba(192, 192, 192, 0.85);
+        color: #fff !important;
+      }
+    }
+  }
+
+  #navPanel {
+    @include vendor('backface-visibility', 'hidden');
+    @include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
+    @include vendor('transition', ('transform #{_duration(navPanel)} ease'));
+    display: block;
+    height: 100%;
+    left: 0;
+    overflow-y: auto;
+    position: fixed;
+    top: 0;
+    width: _size(navPanel);
+    z-index: _misc(z-index-base) + 2;
+    background: darken(_palette(accent1, bg), 10);
+    color: _palette(accent1, fg);
+
+    .link {
+      border-bottom: 0;
+      border-top: solid 1px rgba(255,255,255,0.05);
+      color: _palette(accent1, fg);
+      display: block;
+      height: 44px;
+      line-height: 44px;
+      padding: 0 1em 0 1em;
+      text-decoration: none;
+
+      &:first-child {
+        border-top: 0;
+      }
+
+      &.depth-0 {
+        color: _palette(accent1, fg-bold);
+      }
+
+      .indent-1 { display: inline-block; width: 1em; }
+      .indent-2 { display: inline-block; width: 2em; }
+      .indent-3 { display: inline-block; width: 3em; }
+      .indent-4 { display: inline-block; width: 4em; }
+      .indent-5 { display: inline-block; width: 5em; }
+    }
+  }
+
+  body {
+    &.navPanel-visible {
+      #page-wrapper {
+        @include vendor('transform', 'translateX(#{_size(navPanel)})');
+      }
+
+      #navButton {
+        @include vendor('transform', 'translateX(#{_size(navPanel)})');
+      }
+
+      #navPanel {
+        @include vendor('transform', 'translateX(0)');
+      }
+    }
+  }
+}
+
 /* Landing Page */
 #header, #header h1, #header a, #footer {
   //color: rgba(255, 255, 255, 0.5); // Default - good for darker backgrounds

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -64,6 +64,41 @@
 
     // Header.
 
+      // Off-Canvas Navigation.
+
+        // Navigation Button.
+          $(
+            '<div id="navButton">' +
+              '<a href="#navPanel" class="toggle"></a>' +
+            '</div>'
+          )
+            .appendTo($body);
+
+        // Navigation Panel.
+          $(
+            '<div id="navPanel">' +
+              '<nav>' +
+                $('#nav').navList() +
+              '</nav>' +
+            '</div>'
+          )
+            .appendTo($body)
+            .panel({
+              delay: 500,
+              hideOnClick: true,
+              hideOnSwipe: true,
+              resetScroll: true,
+              resetForms: true,
+              side: 'left',
+              target: $body,
+              visibleClass: 'navPanel-visible'
+            });
+
+        // Fix: Remove navPanel transitions on WP<10 (poor/buggy performance).
+          if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
+            $('#navButton, #navPanel, #page-wrapper')
+              .css('transition', 'none');
+
       // Parallax background.
 
         // Disable parallax on IE (smooth scrolling is jerky), and on mobile platforms (= better performance).