Sesalos
4/25/2019 - 10:47 AM
Mobile Wordpress Menu
Mobile Wordpress Menu
<div class="topbar">
<div class="navClick"><span></span> <span></span> <span></span> <span></span> <span></span> <span></span></div>
</div>
<header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">
<nav class="main-menu" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="inner">
<?php wp_nav_menu( array( 'menu' => 'Main Menu' ) ); ?>
</div>
</nav>
</header>let isMobile = false;
$(window).on('load resize', function () {
isMobile = window.matchMedia('(max-width : 767px)').matches;
// console.log(isMobile);
});
/************************************************************************************************************
* This checks to see if a parent has children, and if it does it will not go to the parent page on first click and will open the sub menu, then if "touched" again, will go through to parent page.
***********************************************************************************************************/
$(document).ready(function() {
$("ul.sub-menu li > a").on("click touchend", function(e) {
var el = $(this);
var link = el.attr("href");
window.location = link;
});
});
/**********************************************************************************************************
* If the nav is clicked, I want you to give the navClick class a new class of "open" as well as toggle it.
***********************************************************************************************************/
$('.navClick').click(function () {
$(this).toggleClass('open');
$('header.header').toggleClass('open');
});
/************************************************************************************************************
* All of the below is used to check if there are children elements, and if they have children then to show them on first touch of the parent.
***********************************************************************************************************/
/************************************************************************************************************
* ----------------------------------------------------------------------------------------------------------
***********************************************************************************************************/
/************************************************************************************************************
* Add the "top-menu" class to the top level ul...
***********************************************************************************************************/
let left, width, newLeft;
$('.mobile-menu').children('ul').addClass('top-menu');
/************************************************************************************************************
* Add buttons to items that have submenus...
***********************************************************************************************************/
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
/************************************************************************************************************
* Mobile menu toggle functionality
***********************************************************************************************************/
$('.menu-toggle').on('click', function () {
display = $('.mobile-menu').css("display");
if (display === 'none') {
/************************************************************************************************************
* Display the menu...
***********************************************************************************************************/
$('.mobile-menu').css("display", "block");
} else {
/************************************************************************************************************
* Hide the mobile menu...
***********************************************************************************************************/
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
/************************************************************************************************************
* The .current-menu will no longer be current, so remove that class...
***********************************************************************************************************/
$('.arrow').on('click', function () {
//
$('.current-menu').removeClass('current-menu');
/************************************************************************************************************
* Turn on the display property of the child menu
***********************************************************************************************************/
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
/************************************************************************************************************
* Slide the new menu leftwards (into the .mobile viewport)...
***********************************************************************************************************/
newLeft = left - width;
$('.top-menu').css("left", newLeft);
/************************************************************************************************************
*Also display the "back button" (if it is hidden)...
***********************************************************************************************************/
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});.navClick {
display: none;
width: 50px;
height: 45px;
transform: rotate(0deg) scale(0.75);
transition: .5s ease-in-out;
cursor: pointer;
@media ( $bpPrefix : $bp3 ) {
position: absolute;
top: 35%;
right: 35px;
display: block;
}
span {
position: absolute;
display: block;
height: 5px;
width: 50%;
background: $c-primary;
opacity: 1;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
span:nth-child(even) {
left: 50%;
}
span:nth-child(odd) {
left: 0;
}
span:nth-child(1), span:nth-child(2) {
top: 0;
}
span:nth-child(3), span:nth-child(4) {
top: 14px;
}
span:nth-child(5), span:nth-child(6) {
top: 28px;
}
&.open span:nth-child(1),&.open span:nth-child(6) {
transform: rotate(45deg);
}
&.open span:nth-child(2),&.open span:nth-child(5) {
transform: rotate(-45deg);
}
&.open span:nth-child(1) {
left: 4px;
top: 8px;
}
&.open span:nth-child(2) {
left: calc(50% - 4px);
top: 8px;
}
&.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
&.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
&.open span:nth-child(5) {
left: 3px;
top: 26px;
}
&.open span:nth-child(6) {
left: calc(50% - 3px);
top: 26px;
}
}
nav.main-menu {
@extend .container;
@media ( $bpPrefix : $bp3 ) {
width: 100%;
max-width: none;
}
li.menu-item-has-children > a {
@media ( $bpPrefix : $bp3 ) {
&:after {
content: '';
position: absolute;
left: 90%;
top: 50%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ffffff;
clear: both;
}
}
}
.inner {
@include make-row();
.menu-main-menu-container {
@include make-col-ready();
@include make-col(11);
@include make-col-offset(1);
@media ( $bpPrefix : $bp2 ) {
@include make-col(12);
@include make-col-offset(0);
}
@media ( $bpPrefix : $bp3 ) {
padding: 0;
}
li.apply {
background: $c-primary;
}
> ul {
position: relative;
padding-left: 30px;
margin: 0;
@media ( $bpPrefix : $bp2 ) {
padding-left: 0;
}
@media ( $bpPrefix : $bp3 ) {
width: 100%;
}
}
ul.sub-menu {
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 300px;
padding: 10px 15px;
background: $c-primary;
transition: opacity 0.35s ease;
@media ( $bpPrefix : $bp3 ) {
position: static;
display: block;
width: 100%;
padding: 5px 0 5px 30px;
border-top: 1px solid $c-primary;
opacity: 1;
background: none;
pointer-events: all;
}
&:after {
content: '';
position: absolute;
}
li {
display: block;
float: left;
width: 50%;
@media ( $bpPrefix : $bp3 ) {
width: 100%;
float: none;
border-bottom: none;
text-transform: none;
}
a {
padding: 10px;
line-height: 1;
@media ( $bpPrefix : $bp3 ) {
font-size: 1.25em;
}
}
a:hover {
text-decoration: underline;
background: $c-primary;
}
}
li:nth-of-type(odd) {
clear: left;
}
li:nth-of-type(even) {
clear: right;
}
}
ul li {
position: relative;
display: inline-block;
//background: rgba($c-primary, 0);
transition: background .35s ease;
font-family: $ff-menu;
text-transform: uppercase;
@media ( $bpPrefix : $bp3 ) {
display: block;
border-bottom: 1px solid $c-primary;
.sub-menu {
display: none;
}
&:last-of-type {
border-bottom: none;
}
}
&.current-menu-item {
background: transparent;
@media ($bpPrefix : $bp3) {
background: transparent;
&.menu-item-has-children {
> ul.sub-menu {
opacity: 1;
background: #2f313e;
pointer-events: all;
}
}
//&:after {
// content: '';
//}
}
&:after {
content: '';
}
//&:after {
// content: '';
// position: absolute;
// height: 7px;
// width: 100%;
// bottom: 0;
// left: 0;
// z-index: 1;
// background-color: $c-primary;
//}
}
&.menu-item-has-children:hover {
> ul.sub-menu {
opacity: 1;
pointer-events: all;
}
}
&:hover, &.current-menu-item {
&:after {
@media ($bpPrefix : $bp3) {
display: none;
}
}
a {
text-decoration: none;
}
}
}
ul li a {
position: relative;
z-index: 1;
display: inline-block;
padding: 6px 15px 4px;
//padding: 7px 15px;
color: #fff;
font-size: 1.15em;
line-height: 30px;
@media ( $bpPrefix : $bp1 ) {
font-size: 1em;
}
@media ( $bpPrefix : $bp2 ) {
padding: 5px 10px 3px;
font-size: 0.95em;
}
@media ( $bpPrefix : $bp3 ) {
display: block;
padding: 10px 25px 8px;
font-size: 1.15rem;
}
}
}
}
}