Actually, i just changed $(document).mouseup(function(e) { } to $(document).bind(“mouseup touchend”, function(e) {} and seems to work.
Solution 1 :
Problem :
I have a sidebar menu for mobile that opens when you click on the hamburger menu with a dark overlay on the body. The problem is, on mobile the visibility does not change when clicked outside of the menu. It works find for desktop and newer devices iPhone 10, but when testing on iPhone 8 <, mobile menus when clicked stay active. Here is the code below; im sure i have overlooked some CSS property.
Here is a extract of the sidebar snippet being using in the theme.liquid file
<body id="{{ page_title | handle }} menu" class="template-{{ template.name | handle }}">
<div id="whileyApp" class="whiley-theme"></div>
<div id="aside_main" class="sidebar-menu">
{%- include 'sidebar-menu' -%}
</div>
</body>
Here is the toggile for the hamburger menu
<div class="toggle">
<a href="#" class="burger js-menu-toggle-home" data-toggle="collapse" data-target="#main-navbar">
<span></span>
</a>
</div>
Here is the HTML markup in the sidebar-menu snippet
<div class="side-inner">
<div class="profile">
<a href="{{shop.url}}" title="{{ shop.name | escape }}">
{%- assign mobile_logo = "logo.png" | asset_img_url: 'master' -%}
{%- if settings.main_logo != blank -%}
{%- assign mobile_logo = settings.main_logo | img_url: 'master' -%}
{%- endif -%}
<img src="{{ mobile_logo }}"{{' '}}{%-if settings.mobile_logo_max_width != blank -%}style="max-width:{{settings.mobile_logo_max_width}}px;"{%-endif-%}{{' '}}title="{{ shop.name | escape }}" alt="{{ shop.name | escape }}" class="img-fluid"/>
</a>
</div>
{% for link in linklists[settings.mobile_linklist].links %}
{% if link.links != blank %}
<div class="nav-menu">
<ul id="accordion">
<li class="accordion">
<span><a aria-controls="collapseOne"
aria-expanded="false"
class="collapsible"
data-target="#collapse{{forloop.index}}"
data-toggle="collapse"
href="#">{{ link.title }}
</a></span>
<div aria-labelledby="headingOne" class="collapse" id="collapse{{forloop.index}}">
<ul>
{% for childlink in link.links %}
<li>
<a href="{{childlink.url}}">{{childlink.title}}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}
<div class="nav-menu">
<ul id="static-pages">
<li class="accordion"><a href="/account">
{%- if customer -%}
Hi, {{ customer.first_name }}
{%- else -%}{{ 'customer.account.title' | t }}</a></li>
{% endif %}
</ul>
</div>
</div>
Here is the CSS – working for desktop sites, not on mobile Safari or Chrom IOS <8
#aside_main {
width: 300px;
height:100vh;
left: 0;
z-index: 1001;
position: fixed;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
background-color: #fff;
-webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}
.show-sidebar-main #aside_main {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
#aside_main .toggle {
padding-left: 30px;
padding-top: 30px;
position: absolute;
right: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.show-sidebar-main #aside_main .toggle .burger:before, .show-sidebar-main #aside_main .toggle .burger span, .show-sidebar-main #aside_main .toggle .burger:after {
background: #000;
}
#aside_main .side-inner {
padding: 10px 0;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#aside_main .side-inner .profile {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 1px solid #efefef;
}
#aside_main .side-inner .profile img {
width: 180px;
margin: 0 auto;
border-radius: 50%;
}
#aside_main .side-inner .profile .name {
font-size: 18px;
margin-bottom: 0;
}
#aside_main .side-inner .profile .country {
font-size: 14px;
color: #cfcfcf;
}
#aside_main .side-inner .counter {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #efefef;
text-align: center;
}
#aside_main .side-inner .counter div .number {
display: block;
font-size: 20px;
color: #000;
}
#aside_main .side-inner .counter div .number-label {
color: #cfcfcf;
}
#aside_main .side-inner .nav-menu ul, #aside_main .side-inner .nav-menu ul li {
padding: 0;
margin: 0px;
list-style: none;
}
#aside_main .side-inner .nav-menu ul li a {
display: block;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
color: {{settings.body_font_text}};
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
font-size: 12px;
position: relative;
-webkit-transition: .3s padding-left ease;
-o-transition: .3s padding-left ease;
transition: .3s padding-left ease;
}
#aside_main .side-inner .nav-menu ul li a:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0px;
background-color: #000;
opacity: 0;
visibility: hidden;
-webkit-transition: .3s opacity ease, .3s visibility ease, .3s width ease;
-o-transition: .3s opacity ease, .3s visibility ease, .3s width ease;
transition: .3s opacity ease, .3s visibility ease, .3s width ease;
}
#aside_main .side-inner .nav-menu ul li a:active, #aside_main .side-inner .nav-menu ul li a:focus, #aside_main .side-inner .nav-menu ul li a:hover {
outline: none;
}
#aside_main .side-inner .nav-menu ul li a:hover {
background: #fcfcfc;
color: #000;
}
#aside_main .side-inner .nav-menu ul li a:hover:before {
width: 4px;
opacity: 1;
visibility: visible;
}
#aside_main .side-inner .nav-menu ul li.active a {
background: #fcfcfc;
color: #000;
}
#aside_main .side-inner .nav-menu ul li.active a:before {
opacity: 1;
visibility: visible;
width: 4px;
}
#aside_main .side-inner .nav-menu ul li .collapsible {
position: relative;
}
#aside_main .side-inner .nav-menu ul li .collapsible:after {
font-size: 18px;
position: absolute;
top: 15px;
right: 30px;
width: 10px;
height: 10px;
font-family: 'Font Awesome 5 Free';
content: " ";
background: url("data:image/svg+xml,%3Csvg class='Icon Icon--select-arrow' role='presentation' viewBox='0 0 19 12'%3E%3Cpolyline fill='none' stroke='currentColor' points='17 2 9.5 10 2 2' fill-rule='evenodd' stroke-width='2' stroke-linecap='square'%3E%3C/polyline%3E%3C/svg%3E") no-repeat;
color: #5c5c5c;
font-weight: 700;
line-height: 20px;
-webkit-transition: .3s transform ease;
-o-transition: .3s transform ease;
transition: .3s transform ease;
}
#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"] {
background: #fcfcfc;
color: #000;
}
#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"]:before {
opacity: 1;
visibility: visible;
width: 4px;
}
#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"]:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
top: 15px;
}
body.show-sidebar-main:before {
opacity: 1;
visibility: visible;
background-color:rgba(0,0,0,0.7);
// z-index:1001;
}
Here is the JS code controlling classes
//Mobile menu
$(function() {
'use strict';
$('.js-menu-toggle-home').click(function(e) {
var $this = $(this);
if ( $('body').hasClass('show-sidebar-main') ) {
$('body').removeClass('show-sidebar-main');
$this.removeClass('active');
} else {
$('body').addClass('show-sidebar-main');
$this.addClass('active');
}
e.preventDefault();
});
// click outisde offcanvas
$(document).mouseup(function(e) {
var container = $(".sidebar-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('body').hasClass('show-sidebar-main') ) {
$('body').removeClass('show-sidebar-main');
$('body').find('.js-menu-toggle-home').removeClass('active');
}
}
});
});