ascribe
/
wp-theme
mirror of https://github.com/ascribe/wp-theme
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #33 from ascribe/fix/menu 

Mobile menu fixes
This commit is contained in:
Matthias Kretschmann 2016-02-03 12:17:12 +01:00
parent cbe2a38243 3cd64612e0
commit be7ef5ad6b
10 changed files with 131 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/_src/js/ascribe.js
View File

@ -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();
});
}

1
assets/_src/less/ascribe.less
View File

@ -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';

69
assets/_src/less/ascribe/_hamburger.less Normal file
View File

@ -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;
}
}

54
assets/_src/less/ascribe/_header.less
View File

@ -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: black;
background-color: @blueDeep;
position: absolute;
width: 120%;
left: -10%;
top: 0;
text-align:center;
z-index:4;
text-align: center;
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;
padding-bottom: 15px;
font-size: 13px;
font-weight: @font-weight-normal;
padding-bottom: 5px;
a {
color: @white;
@ -215,19 +212,12 @@
}
}
&:nth-child(-n+3) {
font-size: 16px;
padding-bottom: 35px;
&:extend(.large);
}
&:nth-child(3) {
border-bottom:1px solid @white;
margin-bottom:25px;
}
}
@media screen and (max-width: @phoneWidth) {
display:none;
&.active {
display:block;
border-bottom: 1px solid @white;
margin-bottom: 20px;
padding-bottom: 20px;
}
}
}

2
assets/dist/css/ascribe.css vendored
View File

File diff suppressed because one or more lines are too long

2
assets/dist/css/ascribe.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
assets/dist/js/ascribe.js vendored
View File

@ -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()});

2
assets/dist/js/ascribe.min.js vendored
View File

@ -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()});

4
template-header.php
View File

@ -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(

6
template-tour.php
View File

@ -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',