Merge pull request #33 from ascribe/fix/menu

Mobile menu fixes

assets/_src/js/ascribe.js

@@ -75,7 +75,32 @@ function stickyNav() {
 
 
 function mobileNav() {
-    $('.hamburger').click(function() {
+
-         $('.mobile-nav').toggleClass('active');
+    var hamburger = $('.hamburger'),
+        popup = $('.mobile-nav');
+
+    hamburger.click(function(e) {
+        e.preventDefault();
+
+        // toggle popup
+        popup.toggleClass('active');
+        hamburger.toggleClass('open');
+
+        // bind the hide controls
+        $(document).bind('click.hidepopup', function() {
+            // hide popup
+            popup.removeClass('active');
+            hamburger.removeClass('open');
+            // unbind the hide controls
+            $(document).unbind('click.hidepopup');
+        });
+
+        // dont close thepop when you click on thepop
+        popup.on('click', function(e) {
+            e.stopPropagation();
+        });
+
+        // and dont close thepop now
+        e.stopPropagation();
     });
 }

assets/_src/less/ascribe.less

@@ -24,6 +24,7 @@
 @import 'ascribe/_footer.less';
 
 @import 'ascribe/_hero.less';
+@import 'ascribe/_hamburger.less';
 @import 'ascribe/_header.less';
 @import 'ascribe/_subtemplates.less';
 @import 'ascribe/_feature-circles.less';

assets/_src/less/ascribe/_hamburger.less

@@ -0,0 +1,69 @@
+//
+// Ascribe
+// -----------------
+// Omnomnom, CSS only hamburger
+//
+
+.hamburger {
+    cursor: pointer;
+    margin: 0 5px;
+    position: relative;
+    z-index: 50;
+    width: 25px;
+    height: 25px;
+    vertical-align: bottom;
+
+    // button reset
+    background: none;
+    box-shadow: none;
+    border: none;
+
+    span {
+        &,
+        &:before,
+        &:after {
+            border-radius: 9px;
+            height: 4px;
+            width: 100%;
+            background: @blueBright;
+            position: absolute;
+            display: block;
+            content: '';
+            transition: .3s ease-out;
+        }
+
+        &:before {
+            top: -8px;
+        }
+
+        &:after {
+            bottom: -8px;
+        }
+
+    }
+
+    // open state
+    &.open {
+        span {
+            background: transparent;
+
+            &:before,
+            &:after {
+                top: 0;
+            }
+
+            &:before {
+                transform: rotate(45deg);
+            }
+
+            &:after {
+                transform: rotate(-45deg);
+            }
+        }
+
+    }
+
+    @media screen and (max-width: @phoneWidth) {
+        display: inline-block;
+    }
+}

assets/_src/less/ascribe/_header.less

@@ -165,8 +165,6 @@
     margin-top: 35px;
     .signInUpText;
     color: @black;
-    position:relative;
-    z-index:3;
 
     a {
         .signInUpText;
@@ -177,35 +175,34 @@
         }
     }
 }
-.hamburger {
-    cursor:pointer;
-    width: 25px;
-    margin-left: 15px;
-    position: relative;
-    top: 2px;
-    z-index:50;
 
-    @media screen and (max-width: @phoneWidth) {
-        display: inline-block;
-    }
-}
 .mobile-nav {
-    display: none;
+    background-color: @blueDeep;
-    background-color: black;
     position: absolute;
     width: 120%;
     left: -10%;
     top: 0;
-    text-align:center;
+    text-align: center;
-    z-index:4;
+    z-index: 4;
+
+    // open/close transition, slide in from top
+    transition: transform .2s ease-out;
+    transform: translate3d(0,-100%,0);
+
+    &.active {
+        transform: translate3d(0,0,0);
+    }
+
+    @media (min-width: @phoneWidth) {
+        display: none;
+    }
 
     ul {
-        padding: 40px 0 20px;
+        padding: 30px 0 20px;
     }
     li {
-        font-weight: 400;
+        font-weight: @font-weight-normal;
-        padding-bottom: 15px;
+        padding-bottom: 5px;
-        font-size: 13px;
 
         a {
             color: @white;
@@ -215,19 +212,12 @@
             }
         }
         &:nth-child(-n+3) {
-            font-size: 16px;
+            &:extend(.large);
-            padding-bottom: 35px;
         }
         &:nth-child(3) {
-            border-bottom:1px solid @white;
+            border-bottom: 1px solid @white;
-            margin-bottom:25px;
+            margin-bottom: 20px;
-        }
+            padding-bottom: 20px;
-    }
-
-    @media screen and (max-width: @phoneWidth) {
-        display:none;
-        &.active {
-            display:block;
         }
     }
 }

assets/dist/js/ascribe.js

@@ -8,4 +8,4 @@
  ** 
  ** https://github.com/ascribe/wp-theme.git 
  **/
-function stickyNav(){var e=$(".sticky");$(window).on("load resize scroll",function(){$(window).width()>768&&($(window).scrollTop()>100?e.addClass("stuck"):e.removeClass("stuck"))})}function mobileNav(){$(".hamburger").click(function(){$(".mobile-nav").toggleClass("active")})}$(document).ready(function(){function e(){$("body").hasClass("page-template-template-tour")&&$(".tour-switcher .menu").prepend($(".tour-switcher .current-menu-item")),$(".current-menu-item a").click(function(e){e.preventDefault(),$("#menu-landing-page-menu").toggleClass("active")})}function t(){$(".case-study:gt(0)").addClass("hidden"),$(".slider-action").click(function(){var e=$(this).attr("id");"back"===e?($(".case-study").addClass("hidden"),$(".case-study").last().prependTo(".slide-container").removeClass("hidden")):(displayed=$(".case-study").first(),displayed.addClass("hidden"),$(".case-study").eq(1).removeClass("hidden"),displayed.appendTo(".slide-container"))})}function a(){$(".featured-faqs dt").click(function(){$(this).next("dd").toggleClass("open")})}function s(){$(".top-tab").click(function(){$(".top-tab").removeClass("active"),$(this).addClass("active");var e=$(this).data("tab");$(".marketplace-info").removeClass("active"),$("#"+e).addClass("active")})}t(),a(),s(),e(),mobileNav(),stickyNav()});
+function stickyNav(){var e=$(".sticky");$(window).on("load resize scroll",function(){$(window).width()>768&&($(window).scrollTop()>100?e.addClass("stuck"):e.removeClass("stuck"))})}function mobileNav(){var e=$(".hamburger"),t=$(".mobile-nav");e.click(function(a){a.preventDefault(),t.toggleClass("active"),e.toggleClass("open"),$(document).bind("click.hidepopup",function(){t.removeClass("active"),e.removeClass("open"),$(document).unbind("click.hidepopup")}),t.on("click",function(e){e.stopPropagation()}),a.stopPropagation()})}$(document).ready(function(){function e(){$("body").hasClass("page-template-template-tour")&&$(".tour-switcher .menu").prepend($(".tour-switcher .current-menu-item")),$(".current-menu-item a").click(function(e){e.preventDefault(),$("#menu-landing-page-menu").toggleClass("active")})}function t(){$(".case-study:gt(0)").addClass("hidden"),$(".slider-action").click(function(){var e=$(this).attr("id");"back"===e?($(".case-study").addClass("hidden"),$(".case-study").last().prependTo(".slide-container").removeClass("hidden")):(displayed=$(".case-study").first(),displayed.addClass("hidden"),$(".case-study").eq(1).removeClass("hidden"),displayed.appendTo(".slide-container"))})}function a(){$(".featured-faqs dt").click(function(){$(this).next("dd").toggleClass("open")})}function i(){$(".top-tab").click(function(){$(".top-tab").removeClass("active"),$(this).addClass("active");var e=$(this).data("tab");$(".marketplace-info").removeClass("active"),$("#"+e).addClass("active")})}t(),a(),i(),e(),mobileNav(),stickyNav()});

assets/dist/js/ascribe.min.js

@@ -8,4 +8,4 @@
  ** 
  ** https://github.com/ascribe/wp-theme.git 
  **/
-function stickyNav(){var e=$(".sticky");$(window).on("load resize scroll",function(){$(window).width()>768&&($(window).scrollTop()>100?e.addClass("stuck"):e.removeClass("stuck"))})}function mobileNav(){$(".hamburger").click(function(){$(".mobile-nav").toggleClass("active")})}$(document).ready(function(){function e(){$("body").hasClass("page-template-template-tour")&&$(".tour-switcher .menu").prepend($(".tour-switcher .current-menu-item")),$(".current-menu-item a").click(function(e){e.preventDefault(),$("#menu-landing-page-menu").toggleClass("active")})}function t(){$(".case-study:gt(0)").addClass("hidden"),$(".slider-action").click(function(){var e=$(this).attr("id");"back"===e?($(".case-study").addClass("hidden"),$(".case-study").last().prependTo(".slide-container").removeClass("hidden")):(displayed=$(".case-study").first(),displayed.addClass("hidden"),$(".case-study").eq(1).removeClass("hidden"),displayed.appendTo(".slide-container"))})}function a(){$(".featured-faqs dt").click(function(){$(this).next("dd").toggleClass("open")})}function s(){$(".top-tab").click(function(){$(".top-tab").removeClass("active"),$(this).addClass("active");var e=$(this).data("tab");$(".marketplace-info").removeClass("active"),$("#"+e).addClass("active")})}t(),a(),s(),e(),mobileNav(),stickyNav()});
+function stickyNav(){var e=$(".sticky");$(window).on("load resize scroll",function(){$(window).width()>768&&($(window).scrollTop()>100?e.addClass("stuck"):e.removeClass("stuck"))})}function mobileNav(){var e=$(".hamburger"),t=$(".mobile-nav");e.click(function(a){a.preventDefault(),t.toggleClass("active"),e.toggleClass("open"),$(document).bind("click.hidepopup",function(){t.removeClass("active"),e.removeClass("open"),$(document).unbind("click.hidepopup")}),t.on("click",function(e){e.stopPropagation()}),a.stopPropagation()})}$(document).ready(function(){function e(){$("body").hasClass("page-template-template-tour")&&$(".tour-switcher .menu").prepend($(".tour-switcher .current-menu-item")),$(".current-menu-item a").click(function(e){e.preventDefault(),$("#menu-landing-page-menu").toggleClass("active")})}function t(){$(".case-study:gt(0)").addClass("hidden"),$(".slider-action").click(function(){var e=$(this).attr("id");"back"===e?($(".case-study").addClass("hidden"),$(".case-study").last().prependTo(".slide-container").removeClass("hidden")):(displayed=$(".case-study").first(),displayed.addClass("hidden"),$(".case-study").eq(1).removeClass("hidden"),displayed.appendTo(".slide-container"))})}function a(){$(".featured-faqs dt").click(function(){$(this).next("dd").toggleClass("open")})}function i(){$(".top-tab").click(function(){$(".top-tab").removeClass("active"),$(this).addClass("active");var e=$(this).data("tab");$(".marketplace-info").removeClass("active"),$("#"+e).addClass("active")})}t(),a(),i(),e(),mobileNav(),stickyNav()});

template-header.php

@@ -17,7 +17,9 @@ require 'controller/init.php';
             <div class="app-links">
                 <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
 
-                <img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
+                <button class="hamburger phone-only">
+                    <span></span>
+                </button>
 
             </div>
             <nav class="tour-switcher"><?php wp_nav_menu( array(

template-tour.php

@@ -20,7 +20,11 @@ $controller     = new Controller();
             <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>
             <div class="app-links">
                 <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
-                <img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
+
+                <button class="hamburger phone-only">
+                    <span></span>
+                </button>
+
             </div>
             <nav class="tour-switcher"><?php wp_nav_menu( array(
                     'theme_location' => 'landing-menu',