I'm using Pusha to create a menu offcanvas, and with the help of the author in the repo there in github, we can make the offcanvas close when clicked on the link inside it, with the left mouse button and keep open when when right-click for example to open the link in another tab, it works that is a beauty. The code js in the commented line "Menu Click prevent close" accomplishes this work.
Well, I said that it works, it's a beauty, it's just not, it works, the effect happens but not everywhere, in the code pen the link the offcanvas closes and the link opens. In locahost the link does not open and it does not look like the OS editor either. even with target blank.
var menuLeft = new Pusha('.pusha-panel--left', {
onOpen: function() {
},
onClose: function() {
}
});
document.querySelector('.js-open-left-menu').addEventListener('click', menuLeft.open);
// Menu Click prevent close
[].forEach.call(document.querySelectorAll('.primary-nav a'), function(el) {
el.addEventListener('click', menuLeft.close);
});/*! Pusha v1.1.0 | MIT License | https://github.com/slavanga/pusha */
body {
overflow-x: hidden;
}
.pusha-animated,
.pusha-animated body {
overflow: hidden;
}
.pusha-wrapper,
.pusha-push {
transition: transform 0.3s ease;
}
.pusha-wrapper {
position: relative;
z-index: 200;
height: 100%;
background-color: inherit;
}
.pusha-panel {
opacity: 0;
visibility: hidden;
position: fixed;
will-change: transform;
}
.pusha-panel--left {
width: 30%;
height: 100%;
background-color: #FFF;
top: 0;
left: 0;
transform: translateX(-100%);
z-index: 220;
transition: visibility 0s linear 0.3s, opacity 0.05s linear 0.3s, transform 0.3s ease;
}
.pusha-panel--left.pusha-panel--active {
transition: opacity 0.05s, transform 0.3s ease;
}
.pusha-panel--right {
width: 30%;
height: 100%;
background-color: #FFF;
top: 0;
right: 0;
transform: translateX(100%);
z-index: 220;
transition: visibility 0s linear 0.3s, opacity 0.05s linear 0.3s, transform 0.3s ease;
}
.pusha-panel--right.pusha-panel--active {
transition: opacity 0.05s, transform 0.3s ease;
}
.pusha-panel--top {
width: 30%;
height: 100%;
background-color: #FFF;
top: 0;
left: 0;
transform: translateY(-100%);
z-index: 220;
transition: visibility 0s linear 0.3s, opacity 0.05s linear 0.3s, transform 0.3s ease;
}
.pusha-panel--top.pusha-panel--active {
transition: opacity 0.05s, transform 0.3s ease;
}
.pusha-panel--bottom {
width: 30%;
height: 100%;
background-color: #FFF;
bottom: 0;
left: 0;
transform: translateY(100%);
z-index: 220;
transition: visibility 0s linear 0.3s, opacity 0.05s linear 0.3s, transform 0.3s ease;
}
.pusha-panel--bottom.pusha-panel--active {
transition: opacity 0.05s, transform 0.3s ease;
}
.pusha-panel--active {
opacity: 1;
visibility: visible;
transform: none !important;
}
.pusha-panel__content {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
overflow-y: auto;
overscroll-behavior-y: contain;
}
.pusha-panel--active .pusha-panel__content {
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
}
.pusha-blocker {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 210;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: visibility 0s linear 0.3s, transform 0.3s ease, opacity 0.3s ease;
}
.pusha-active .pusha-blocker {
opacity: 1;
visibility: visible;
transition: transform 0.3s ease, opacity 0.3s ease;
}<script src="https://slavanga.github.io/pusha/dist/js/pusha.min.js"></script><divclass="pusha-panel pusha-panel--left">
<div class="pusha-panel__content">
<nav class="primary-nav fixed-enabled">
<ul>
<li class="nav-logo"><a href="https://github.com/slavanga/pusha">Pusha</a></li>
<li><a target="blank" href="https://www.google.com/">Google</a></li>
<li><a href="https://www.bing.com/">Bing</a></li>
<li><a href="https://stackoverflow.com" target="blank">stackoverflow</a></li>
</nav>
<button data-close>Close</button>
</div>
</div>
<header class="header-fixed pusha-push">
<p>Header</p>
<button class="btn pull-left js-open-left-menu" aria-expanded="false">Left Menu</button>
</header>
<div class="pusha-wrapper">
<p>Content</p>
</div>
<style>
nav a {
color:#333;
text-decoration:none;
}
nav a:hover {
color:blue;
}
nav a:active,
nav a:focus{
color:red;
}
</style>