Added support for a cross-browser, accessible, responsive menu modal …

…with a clean SVG hamburger icon! Fixes #6
curiositry · Oct 28, 2014 · 059d888 · 059d888
1 parent 5c044c4
commit 059d888
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 36 deletions.
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -1,13 +1,12 @@
 /**
  * Main JS file for Casper behaviours
- */
+*/
 
 /*globals jQuery, document */
 (function ($) {
  "use strict";
 
  $(document).ready(function(){
-
  $(".post-content").fitVids();
 
  function casperFullImg() {
@@ -55,7 +54,7 @@
  timeout = setTimeout(delayed, threshold || 100);
  };
  }
- // smartresize 
+ // smartresize
  jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
 })(jQuery,'smartresize');
@@ -71,10 +70,10 @@
  };
  var options = $.extend(defaults, options);
 
- options.elem.click(function(event){ 
+ options.elem.click(function(event){
  event.preventDefault();
  var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
- position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false; 
+ position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;
  if (offset) {
  var toMove = parseInt(offset);
  $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
@@ -87,4 +86,4 @@
  });
 
  };
-})(jQuery);
+})(jQuery);
diff --git a/partials/menu.hbs b/partials/menu.hbs
@@ -1,7 +1,5 @@
 <style>
-/*
- Modal Overlay
-*/
+
 .modal-overlay {
  background: slategray;
  height: 100%;
@@ -28,6 +26,7 @@
  z-index: 3;
 }
 
+
 /*
  Modal Content Area
 */
@@ -51,19 +50,13 @@
  transform: scale(1);
 }
 
-/*
- General Modal Content
-*/
 #modal_title {
  margin-top: 0;
  font-weight: 900;
  text-transform: uppercase;
  color:#BBC7CC;
 }
 
-/*
- Close Modal Button
-*/
 .btn-close {
  color:#fdfdfd;
  background: none;
@@ -81,7 +74,6 @@
 
 
 /* Hamburger Menu Icon */
-
 .open-menu,
 .open-menu:hover,
 .btn-close,
@@ -98,20 +90,6 @@
  padding: 0;
 }
 
-/*
- @media screen and (max-width:900px){
- .post-template .open-menu{
- top:1em;
- }
- }
-*/
-
- @media screen and (max-width:500px){
- .open-menu{
-/* top:1em;*/
- }
- }
-
 .post-template .open-menu,
 .author-template .open-menu{
  top:.5rem;
@@ -185,7 +163,8 @@
  <div class="modal-content flex-container flex-container--center" id="modal_holder" role="document">
 
  <div class="flex-child">
- <h1 class="beta" id="modal_title">Menu</h1>***
+ <h1 class="beta" id="modal_title">Menu</h1>
+ ***
 
  <nav role="navigation" class="beta">
  <li><a href="{{@blog.url}}">Home</a></li>
@@ -216,7 +195,6 @@ function swap () {
 
 swap();
 
-
 // modal window
 (function() {
 
@@ -232,7 +210,6 @@ swap();
  lastFocus,
  i;
 
-
  // Let's cut down on what we need to type to get an ID
  function getId ( id ) {
  return document.getElementById(id);
@@ -247,7 +224,6 @@ swap();
  modal.focus();
  }
 
-
  // binds to both the button click and the escape key to close the modal window
  // but only if modalOpen is set to true
  function modalClose ( event ) {
@@ -259,7 +235,6 @@ swap();
  }
  }
 
-
  // Restrict focus to the modal window when it's open.
  // Tabbing will just loop through the whole modal.
  // Shift + Tab will allow backup to the top of the modal,
@@ -271,7 +246,6 @@ swap();
  }
  }
 
-
  // Close modal window by clicking on the overlay
  mOverlay.addEventListener('click', function( e ) {
  if (e.target == modal.parentNode) {