I implemented a sidebar menu for mobile that opens when you click on the hamburger icon, with a dark overlay covering the body. The issue I encountered is that on mobile devices, the visibility of the menu does not change when clicked outside of it. It works perfectly fine on desktop and newer devices like iPhone 10, but on testing with iPhone 8 and older models, the mobile menus remain active. Below is the code snippet; I believe I may have overlooked some CSS properties.
Here is an excerpt from the sidebar snippet used 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>
This is the toggle button 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>
And here's the HTML markup within 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>
The CSS provided below works well for desktop sites, but encounters issues on mobile Safari or Chrome IOS versions below 8:
#aside_main {
/* CSS code here */
}
/* More CSS styles... */
body.show-sidebar-main:before {
/* CSS code here */
}
And here is the JavaScript code responsible for controlling classes:
//Mobile menu
$(function() {
'use strict';
$('.js-menu-toggle-home').click(function(e) {
// JS code for toggling menu
});
// Clicking outside offcanvas
$(document).mouseup(function(e) {
// JS code for handling click outside behavior
});
});