Related
I've adapted the code from Simply-Nav (great lightweight mobile nav – thanks obscuredetour) so that the background semi-transparent overlay fades in as opposed to sliding in with the nav.
Got that working fine, but what I've lost now is the ability to click/tap the semi-transparent overlay (on the right hand side) to close the whole nav.
The event listener is still there – pageOverlay.addEventListener('click', toggleNav); – but it's not firing pageOverlay.classList.remove('-open');.
The overlay div is no longer a child of the parent <ul class="nav-list">, so I don't know if that has something to do with it.
I've tried creating a transparent overlay over the overlay div, and add an eventlistener to that, but that hasn't worked.
Here's the code, if anyone has any ideas, I'd be really grateful for any help. I'm still a novice, so no doubt it's something obvious. Thanks so much.
/*
simply-nav.js - v1.2.1
https://github.com/obscuredetour/simply-nav
Licensed MIT © Jeffrey Summers
*/
// This anonymous function can be inserted anywhere
// (eg. within a <script> tag or anywhere in an existing .js file)
(simplyNavDuty => {
const sideNav = document.querySelector('.nav-list'),
toggleNavBtn = document.querySelector('.toggle-nav'),
burger = document.querySelector('.burger'),
pageOverlay = document.querySelector('.overlay'),
navLinks = document.querySelectorAll(".link"),
body = document.querySelector('body'),
html = document.querySelector('html');
// Disable page scroll
function disablePageScroll() {
if (sideNav.classList.contains('-open')) {
body.classList.add('_disableScroll');
html.classList.add('_disableScroll');
} else {
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
};
// Nav funtion (toggle)
function toggleNav() {
sideNav.classList.toggle('-open');
pageOverlay.classList.toggle('-open');
burger.classList.toggle('open');
disablePageScroll();
};
// To default
toDefaults = () => {
// Close nav menu
sideNav.classList.remove('-open');
pageOverlay.classList.remove('-open');
burger.classList.remove('open');
// Make sure scrolling is enabled
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
// Event listeners
toggleNavBtn.addEventListener('click', toggleNav);
pageOverlay.addEventListener('click', toggleNav);
// (on mobile) close nav menu when link is clicked
// this is useful on mobile when clicking an anchor tag on the current page (eg. index.html#last-section)
navLinks.forEach(el => {
el.addEventListener('click', (event) => {
toDefaults();
});
});
// when browser is resized (past breakpoint) reset to defaults
(function() {
window.addEventListener("resize", resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
// Window resized width
let width = window.innerWidth;
// If resized greater than BREAKPOINT (default: 800px), then reset nav functions
if (width >= 800) {
toDefaults();
}
}
}());
})();
/*******HAMBURGER TOGGLE*******/
.toggle-nav {
background-color: transparent;
cursor: pointer;
box-shadow: none;
border: 0;
outline: none;
margin: 0;
padding: 3vh;
}
.logo-link {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
.logo-link>.logo {
max-width: 60px;
width: 100%;
height: auto;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transition: max-height 0.2s ease-in-out;
-webkit-transition: max-height 0.2s ease-in-out;
}
/*******HAMBURGER TOGGLE*******/
.nav-list {
background-color: transparent;
list-style: none;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 10vh;
bottom: 0;
left: -50rem;
width: 60%;
min-height: 100vh;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
z-index: 6;
}
.nav-list.-open {
width: 100%;
left: 0;
padding-bottom: 4.5rem;
}
.nav-list.-open>.list.-left {
overflow-y: auto;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-list>.list.-left {
background: rgba(50, 31, 101, 0.95);
position: relative;
width: 60%;
height: 100%;
}
.overlay {
margin: 0;
padding: 0;
display: block;
min-height: 100vh;
background: rgb(0 0 0 / 65%);
position: absolute;
bottom: 0;
width: 100%;
top: 10vh;
cursor: pointer;
z-index: 5;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
}
.toggle-overlay {}
.overlay.-open {
visibility: visible;
opacity: 1;
}
/****** LIST ITEMS ******/
.nav-list>.list>.item {
display: flex;
padding: 0;
border-bottom: 1px solid rgba(176, 176, 176, 0.5);
}
.nav-list>.list>.item:last-child {
border-bottom: 0;
}
.nav-list>.list>.item>.link {
border-color: transparent;
text-decoration: none;
padding: 1.5rem 1rem 1.5rem 1rem;
flex-basis: 100%;
display: block;
background: transparent;
font-size: 1.5rem;
padding-left: 1.5rem;
color: #e0e0e0;
transition: all 0.3s ease-in-out;
}
.nav-list>.list>.item>.link:hover,
.nav-list>.list>.item>.link.-active {
color: #e90052;
}
._disableScroll {
overflow-y: hidden !important;
}
/***********BURGER BUTTON STYLES***********/
.burger {
height: 3em;
width: 3em;
position: relative;
font-size: 10px;
cursor: pointer;
-webkit-transition: .2s all;
-o-transition: .2s all;
transition: .2s all;
}
.burger:after {
content: '';
display: block;
position: absolute;
height: 150%;
width: 150%;
top: -25%;
left: -25%;
}
.burger>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger>.burger-lines:before {
left: 0;
top: 1em;
}
.burger>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-offset>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines,
.burger.-squeeze .burger-lines:before,
.burger.-squeeze .burger-lines:after {
-webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
-o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset .burger-lines:before,
.burger.-squeeze.-offset .burger-lines:after {
width: 2em;
}
.burger.-squeeze.-offset .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset .burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open .burger-lines,
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
-webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
-o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open .burger-lines {
background-color: transparent;
}
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open .burger-lines:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.burger.-squeeze.open .burger-lines:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.burger-lines,
.burger-lines:after,
.burger-lines:before {
pointer-events: none;
display: block;
content: '';
width: 100%;
border-radius: 0.25em;
background-color: #e0e0e0;
height: 0.25em;
position: absolute;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.burger.-squeeze>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-squeeze>.burger-lines,
.burger.-squeeze>.burger-lines:after,
.burger.-squeeze>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze>.burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset>.burger-lines,
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open>.burger-lines,
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.open>.burger-lines {
background-color: transparent;
}
.burger.-squeeze.open>.burger-lines:before,
.burger.-squeeze.open>.burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open>.burger-lines:before {
transform: rotate(-45deg);
}
.burger.-squeeze.open>.burger-lines:after {
transform: rotate(45deg);
}
<header>
<button class="toggle-nav" type="button">
<div class="burger -squeeze -offset" type="button">
<span class="burger-lines"></span>
</div>
</button>
<ul class="nav-list" role="navigation">
<div class="list -left">
<li class="item">
<a class="link" href="#">Menu item 1</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 2</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 3</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 4</a>
</li>
</div>
</ul>
<div class="overlay"></div>
</header>
That actually looks like a css problem. The tag <ul class="nav-list -open"> has a width of 100%, and for that reason it fills up the whole screen, not allowing the mouse click to get to the overlay element. You should:
remove width: 100% on the -open class (the source of the problems)
remove width: 60% on the .list.-left (The child of the nav doesn't fill it, it doesn't make too much sense...)
set left: -80rem instead of 50rem in .nav-list (to fully hide it)
That would make it work.
In the code below when I hover on the gray button [the parent]
it perform some style on the child div bar
and that is what I need, I don't want child to be hovered itself
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>
I guess you want the end user hover on the horizontal area (div.foo) to have the vertical area (div.baz div.bar) change but don't want the area change if the div.baz itself being hover?
Would this fix your issue?
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .baz:not(:hover) .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>
This is probably not the answer you're looking for (like many, I prefer to solve CSS problems with pure CSS solutions as often as possible), but you did tag your question with javascript, so I think it's a legitimate approach to solve the issue you're facing with 3 lines of javascript:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
This works because the events mouseover and mouseout events are explicitly added to foo, rather than to its grandchild bar (and bar never visibly overlaps foo).
Working Example:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.foo.hovered .bar {
transform: scaleX(1);
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>
There is space between the .navigation & .navpromo when viewed in opera or chrome browsers. I have tried several tips including making sure there are no spaces in the markup but I can't seem to figure out the solution to make this cross compatible
http://jsfiddle.net/b7kn5bcL/#&togetherjs=Dk6IRzq6Sf
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
CSS:
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
jQuery:
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>
I'm not sure of the technical terms as I haven't looked it up, but an element with margin spacing will extend out from the content box of its parent element unless either padding, or overflow is set.
A quick fix for this is to give #navpromo the overflow: hidden; property.
Sidenote: I love that menu icon animation! :D
I have the below code which is working fine, however I need it to close the nav when clicked on the outside of the nav (so not the button)
I have tried this but it doesnt work
$("body").click(function (e) {
$('#navwrapper').removeClass('is-visible');
});
any help would be appreciated
many thanks
var offset = 0;
var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');
checkMenu();
$(window).scroll(function(){
checkMenu();
});
$('.cd-nav-trigger').click(function(){
$('.content').toggleClass('static');
})
$('.cd-nav-trigger').on('click', function(){
$(this).toggleClass('menu-is-open');
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
});
function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
} else if ($(window).scrollTop() <= offset) {
//check if the menu is open when scrolling up
if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
//close the menu with animation
mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the menu to be closed and do the rest
mainNavigation.removeClass('is-visible is-hidden has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
});
//check if the menu is open when scrolling up - fallback if transitions are not supported
} else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
mainNavigation.removeClass('is-visible has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
//scrolling up with menu closed
} else {
navigationContainer.removeClass('is-fixed');
mainNavigation.removeClass('has-transitions');
}
}
}
#cd-nav {
outline: 0px;
z-index: 1002;
position: absolute;
display: block;
}
#cd-nav ul {
position: fixed;
width: 90%;
right: 5%;
bottom: 80px;
padding-bottom:20px;
box-shadow: 0 0 10px rgba(0, 0,0, 0.4);
background: white;
visibility: hidden;
overflow: hidden;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #ffffff;
width: 90%;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 5%;
border-bottom: 1px solid rgb(235, 235, 235);
}
#cd-nav ul.is-visible {
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
transition: transform 0.3s, visibility 0s 0s;
max-height: 70%;
overflow: scroll;
}
#cd-nav ul.is-visible::-webkit-scrollbar {
-webkit-appearance: none;
}
#cd-nav ul.is-visible::-webkit-scrollbar:vertical {
width: 12px;
}
#cd-nav ul.is-visible::-webkit-scrollbar:horizontal {
height: 12px;
}
#cd-nav ul.is-visible::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
#cd-nav ul.is-visible::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
#cd-nav li a {
display: block;
text-decoration: none;
color: #57585b;
overflow: hidden;
width: 95%;
}
.cd-nav-trigger {
position: fixed;
bottom: 40px;
right: 5%;
width: 45%;
height: 45px;
background: #ecb75f;
white-space: nowrap;
z-index: 2;
color: #000000 !important;
line-height: 45px;
text-decoration: none;
text-align: center;
border-right: 1px solid #57585b;
border-top: 1px solid #57585b;
border-bottom: 1px solid #57585b;
}
span.Icontext {
float: left;
width: 66px;
white-space: normal;
line-height: 17px;
padding-left: 28px;
padding-top: 4px;
}
.cd-nav-left { position: fixed;
bottom: 40px;
left: 5%;
width: 45%;
height: 45px;
background: #fafafb;
white-space: nowrap;
z-index: 2;
color: #57585b;
line-height: 45px;
text-decoration: none;
text-align: center;
border-left: 1px solid #57585b;
border-top: 1px solid #57585b;
border-bottom: 1px solid #57585b;
}
.navIcon {font-size: 26px; vertical-align: middle;}
.rotate{
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline-block;
}
.rotate.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-nav">
<span class="Icontext">subnav</span><span class="rotate ha ha-th navIcon"></span>
Compare park
<nav id="cd-main-nav">
<ul id="navwrapper">
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
</div>
The code works fine, there are only two minor tweaks to make it work completely:
Attach the click event listener to the document and not to the body.
$(document).on("click", function() {
$('#navwrapper').removeClass('is-visible');
});
Right now you only have one element (#cd-nav) in the body, and it has position:absolute; That means that it is taken out of the regular flow of the document, "emptying" the body, that will have a height of 0 and you will never be able to click on it. So attach the event handler to the document instead of the body.
Note: This many not be necessary on the real page, as I guess that you will have more content that will occupy the window, but it applies for the demo that you posted in the question.
Stop propagation of events when the element that opens the menu is clicked.
$('.cd-nav-trigger').on('click', function(e){
e.preventDefault();
e.stopPropagation();
The click event will bubble to the body and the document, so even if the trigger displays it, then the event will bubble up and the click event handler of the document will hide it. You want to stop the propagation to avoid that.
You can see it working in this code (find the changes by looking for the comment // AM below):
var offset = 0;
var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');
checkMenu();
// AM: add the listener to the document
$(document).on("click", function() {
$('#navwrapper').removeClass('is-visible')
});
$(window).scroll(function(){
checkMenu();
});
$('.cd-nav-trigger').click(function(){
$('.content').toggleClass('static');
})
$('.cd-nav-trigger').on('click', function(e){
// AM: prevent the default behavior
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('menu-is-open');
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
});
function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
} else if ($(window).scrollTop() <= offset) {
//check if the menu is open when scrolling up
if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
//close the menu with animation
mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the menu to be closed and do the rest
mainNavigation.removeClass('is-visible is-hidden has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
});
//check if the menu is open when scrolling up - fallback if transitions are not supported
} else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
mainNavigation.removeClass('is-visible has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
//scrolling up with menu closed
} else {
navigationContainer.removeClass('is-fixed');
mainNavigation.removeClass('has-transitions');
}
}
}
#cd-nav {
outline: 0px;
z-index: 1002;
position: absolute;
display: block;
}
#cd-nav ul {
position: fixed;
width: 90%;
right: 5%;
bottom: 80px;
padding-bottom:20px;
box-shadow: 0 0 10px rgba(0, 0,0, 0.4);
background: white;
visibility: hidden;
overflow: hidden;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #ffffff;
width: 90%;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 5%;
border-bottom: 1px solid rgb(235, 235, 235);
}
#cd-nav ul.is-visible {
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
transition: transform 0.3s, visibility 0s 0s;
max-height: 70%;
overflow: scroll;
}
#cd-nav ul.is-visible::-webkit-scrollbar {
-webkit-appearance: none;
}
#cd-nav ul.is-visible::-webkit-scrollbar:vertical {
width: 12px;
}
#cd-nav ul.is-visible::-webkit-scrollbar:horizontal {
height: 12px;
}
#cd-nav ul.is-visible::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
#cd-nav ul.is-visible::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
#cd-nav li a {
display: block;
text-decoration: none;
color: #57585b;
overflow: hidden;
width: 95%;
}
.cd-nav-trigger {
position: fixed;
bottom: 40px;
right: 5%;
width: 45%;
height: 45px;
background: #ecb75f;
white-space: nowrap;
z-index: 2;
color: #000000 !important;
line-height: 45px;
text-decoration: none;
text-align: center;
border-right: 1px solid #57585b;
border-top: 1px solid #57585b;
border-bottom: 1px solid #57585b;
}
span.Icontext {
float: left;
width: 66px;
white-space: normal;
line-height: 17px;
padding-left: 28px;
padding-top: 4px;
}
.cd-nav-left { position: fixed;
bottom: 40px;
left: 5%;
width: 45%;
height: 45px;
background: #fafafb;
white-space: nowrap;
z-index: 2;
color: #57585b;
line-height: 45px;
text-decoration: none;
text-align: center;
border-left: 1px solid #57585b;
border-top: 1px solid #57585b;
border-bottom: 1px solid #57585b;
}
.navIcon {font-size: 26px; vertical-align: middle;}
.rotate{
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline-block;
}
.rotate.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-nav">
<span class="Icontext">subnav</span><span class="rotate ha ha-th navIcon"></span>
Compare park
<nav id="cd-main-nav">
<ul id="navwrapper">
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
</div>
I have a responsive navigation menu, it works as follows: when you resize the window the 'hamburger' (three lines) an icon appears. Clicking this icon makes the menu appear and the icon becomes an 'X' icon by transforming. Clicking the 'X' makes the menu disappear and the icon become three lines again.
It works perfectly in Safari and Firefox, however it doesn't in Chrome.
It makes the transformation of three lines to 'X' and viceversa but the menu never appears.
Why is that?
Here's the code:
HTML:
<nav>
<label for="show-menu" class="show-menu">
<button class="show-menu button-toggle-navigation">
<span>Toggle Navigation</span>
</button>
</label>
<input type="checkbox" id="show-menu" role="button">
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
[...]
<script type="text/javascript">
$('button').on('click', function() {
$(this).toggleClass('isActive');
});
</script>
CSS:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
float: right;
width: 0;
height: 0;
text-align: right;
display: none;
margin-right: 15%;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ ul{
border-top-color: black;
float: right;
text-align: center;
display: block;
padding-top: 15%;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.25em solid black;
border-top: 0.25em solid black;
font-size: 13px;
cursor: pointer;
height: 1.5em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.25em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.button-toggle-navigation span {
color: transparent;
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
Thanks a lot for your help!
P.S: If you could tell me a better way to do this responsive menu, I'd appreciate it! Thanks! :)
Sure!
This is how I solved the problem:
HTML
<nav>
<label for="show-menu"xs class="show-menu">
<button id="pull" class="show-menu button-toggle-navigation"></button>
</label>
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
JS
<script type="text/javascript">
var menu = $("nav ul");
$('#pull').on('click', function() {
$(this).toggleClass('isActive');
menu.slideToggle(200);
});
</script>
CSS
/*Style 'show menu' label button and hide it by default*/
.show-menu {
margin-top: 7%;
float: right;
display: block;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.16em solid black;
border-top: 0.16em solid black;
font-size: 1em;
cursor: pointer;
height: 1.2em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.16em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
if you non't hide your button with CSS, the code is working perfectly:
.show-menu {
float: right;
text-align: right;
margin-right: 15%;
}
http://jsfiddle.net/4towu13r/
better if you use the -webkit-, -moz, -o- transition prefixes to.
UPDATE:
explanation: somehow chrome unable to activate <button> inside the <label>, if you click only on <label> the checkbox is checked and do the job. Here is a jQuery workaround to do the job:
checkbox=$('input[role=button]');
checkbox.prop('checked', !checkbox.prop('checked'));
working code: http://jsfiddle.net/eapo/4towu13r/3/