kokimu
5/10/2018 - 11:30 PM
Responsive Nav
Horizontal slide with animating burger icon Ref: https://codepen.io/abottega/pen/zvPmyY/?editors=1010
<!--Responsive Nav-->
<button type="button" class="toggle-menu visible-xs" aria-label="Toggle Mobile Menu">
<span class="burger-lines"></span>
</button>
// Responsive Nav
// set up namespace
var ab = ab || {};
$(function () {
'use strict';
// Mobile menu toggle functionality
ab.mobileMenu = (function () {
'use strict';
var init = function() {
/***
* Run this code when the .toggle-menu link has been tapped
* or clicked
*/
$( '.toggle-menu' ).on( 'touchstart click', function(e) {
e.preventDefault();
$(this).toggleClass("active");
var $body = $( 'body' ),
$page = $( '#content' ),
$menu = $( '.mobile-menu' ),
/* Cross browser support for CSS "transition end" event */
transitionEnd = 'transitionend webkitTransitionEnd otransitionend MSTransitionEnd';
/* When the toggle menu link is clicked, animation starts */
$body.addClass( 'animating' );
/***
* Determine the direction of the animation and
* add the correct direction class depending
* on whether the menu was already visible.
*/
if ( $body.hasClass( 'menu-visible' ) ) {
$body.addClass( 'right' );
} else {
$body.addClass( 'left' );
}
/***
* When the animation (technically a CSS transition)
* has finished, remove all animating classes and
* either add or remove the "menu-visible" class
* depending whether it was visible or not previously.
*/
$page.on( transitionEnd, function() {
$body
.removeClass( 'animating left right' )
.toggleClass( 'menu-visible' );
$page.off( transitionEnd );
} );
} );
}
return {
init: init
};
}());
// initialise modules
ab.mobileMenu.init();
});
/************************
Responsive Nav
*************************/
/************************
MOBILE & REGULAR NAV
*************************/
html,
body {
box-sizing: border-box;
}
body * {
box-sizing: inherit;
}
#container {
background: $menu-bg;
}
#content {
background: $bg-color-light;
position: relative;
// z-index: 2;
transform: translate3d(0, 0, 0); /* X, Y, Z */
-webkit-transform: translate3d(0, 0, 0);
.header {
padding: 20px 30px;
position: relative;
top: 0;
left: 0;
border-bottom: rgba(0, 0, 0, 1);
width: 100%;
height: auto;
background-color: $accent-color;
#logo {
a {color: $menu-txt;}
}
a {
text-decoration: none;
float: left;
}
}
} /* end #content */
ul.nav {
margin-left: 0;
li {
/*
Remember to Keep It Iight!
For mobile, there's no need
to even declare hover styles.
*/
a {
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.2em;
color: $menu-txt;
display: block;
}
&:first-child {}
&:last-child {}
} /* end ul.nav > li */
/* highlight current page */
li.current-menu-item,
li.current_page_item,
li.current_page_ancestor {
a {
// color: lightern($menu-bg, 80%);
// color: $accent-color;
// color: darken($accent-color, 30%);
}
} /* end current highlighters */
} /* end ul.nav */
// end MOBILE & REGULAR NAV
/************************
MOBILE NAV ONLY
*************************/
.mobile-menu {
// display: none;
position: absolute;
top: 0;
right: 0;
width: 240px;
background: $menu-bg;
// z-index: -1; /* Make sure the z-index is lower than the #content */
ul {
list-style-type: none;
margin: 0;
padding-top: 15px;
li {
padding: 0;
margin: 0;
ul {padding-top: 0;}
a {
padding: 16px 30px;
&:hover, &:focus {}
}
}
}
}
#content,
.mobile-menu {
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
overflow: hidden;
}
// end MOBILE NAV ONLY
/************************
REGULAR NAV ONLY
*************************/
.header ul.nav {
display: none;
@include tab-wup {
display: block;
}
}
@include tab-wup {
.header ul.nav {
float: right;
margin: 0;
padding: 0;
li {
float: left;
position: relative;
a {
padding: 0.5em 1em;
// Remember Mobile don't recognize hover!
&:hover, &:focus {
color: $white;
}
&:first-child {}
&:last-child {}
} //end li >a
ul.sub-menu,
ul.children {
background: $menu-bg;
margin-top: 40px;
position: absolute;
visibility: hidden;
z-index: 8999;
li {
&.current-menu-item,
&.current_page_item,
&.current_page_ancestor {
a {}
}
a {
padding-left: 1em;
display: block;
width: 140px;
border-bottom: 1px lighten($menu-bg, 2%) solid;
border-right: 1px lighten($menu-bg, 2%) solid;
&:hover, &:focus {
color: lighten($menu-bg, 40%);
}
&:link {}
}
&:first-child {}
&:last-child {}
ul {
background: $menu-bg;
margin-top: 0;
margin-left: 140px;
position: absolute;
li {
a {
background: $menu-bg;
}
}
}
/* highlight sub-menu current page */
li.current-menu-item,
li.current_page_item,
li.current_page_ancestor {
a {}
}
} // end sub-menu li
} // end sub-menu
/* showing sub-menus */
&:hover > ul {
top: auto;
visibility:visible;
}
} // end .nav li
/* highlight current page */
li.current-menu-item,
li.current_page_item,
li.current_page_ancestor {
a {}
} /* end current highlighters */
} // end @include tab-wup
} // end ul.nav
// end REGULAR NAV ONLY
.inner-content {
padding: 16px 30px;
}
/* Menu animating burger icon */
$button-size: 30px;
$squish-speed: 300ms;
$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
.toggle-menu {
display: block;
@include tab-wup {
display: none;
}
cursor: pointer;
user-select: none;
padding: 30px;
background: none;
border: none;
position: absolute;
top: 0;
right: 0;
&:hover, &:focus {
outline: 0;
.burger-lines {
background-color: $menu-txt;
&:before,
&:after {
background-color: $menu-txt;
}
}
}
&.active {
.burger-lines {
background: transparent; // fade away the middle line
&:before,
&:after {
transition: top $squish-speed $ease-out-quart,
transform $squish-speed $squish-speed $ease-out-quart;
top: 0;
width: $button-size;
}
&:before {
transform: rotate3d(0, 0, 1, 45deg) scale(1.1);
}
&:after {
transform: rotate3d(0, 0, 1, -45deg) scale(1.1);
}
}
}
}
.burger-lines {
display: inline-block;
cursor: pointer;
user-select: none;
transition: all $squish-speed ease;
width: $button-size;
height: 2px;
background-color: $menu-txt;
position: relative;
top: -2px;
&:before,
&:after {
content: "";
display: inline-block;
width: $button-size;
height: 2px;
background-color: $menu-txt;
position: absolute;
left: 0;
transform-origin: 50% 50%;
transition: top $squish-speed $squish-speed $ease-out-quart,
transform $squish-speed $ease-out-quart,
background-color $squish-speed $ease-out-quart;
}
&:before {
top: 11px;
}
&:after {
top: -11px;
}
}
/* Animating mobile menu */
/* Show the menu when animating or visible */
.animating .mobile-menu,
.menu-visible .mobile-menu {
display: block;
}
/***
* If the animating class is present then apply
* the CSS transition to #content over 250ms.
*/
.animating #content {
transition: transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.25s ease-in-out;
}
/***
* If the left class is present then transform
* the #content element 240px to the left.
*/
.animating.left #content {
transform: translate3d(-240px, 0, 0);
-webkit-transform: translate3d(-240px, 0, 0);
}
/***
* If the right class is present then transform
* the #content element 240px to the right.
*/
.animating.right #content {
transform: translate3d(240px, 0, 0);
-webkit-transform: translate3d(240px, 0, 0);
}
/***
* If the menu-visible class is present then
* shift the #content 240px from the right edge
* via position: absolute to keep it in the
* open position. When .animating, .left and
* .right classes are not present the CSS
* transform does not apply to #content.
*/
.menu-visible #content {
right: 240px;
}
// end RESPONSIVE NAVIGATION MENU