Jquery CSS fadeOut animation not working when menu close

Jquery CSS fadeOut animation not working when menu close - javascript

This is my simple approach for a dropdown menu. When I click to open a menu, it opens with an amination. But I want to add another animation when It will be closed. I tried in many ways, But not working. Why? Somebody, please assist me. When It closes, it directly disappears. No animation is working. Why?
body {
padding: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-btn {
width: 40px;
height: 40px;
border-radius: 50px;
border: none;
background-color: #f4f4f4;
left: 10px;
font-size: 20px;
}
.dropdown-btn__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.dropdown-menu {
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
display: none;
min-width: 150px;
overflow: hidden;
transform-origin: top right;
animation: dropdown-menu-open 0.3s forwards;
}
.dropdown-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown-menu__list li {
padding: 0px;
}
.dropdown-menu__list a {
text-decoration: none;
color: #000;
font-size: 16px;
display: block;
padding: 8px 16px;
}
#keyframes dropdown-menu-open {
from {
opacity: 0;
transform: scale(0, 0);
}
to {
opacity: 1;
transform: scale(1, 1);
}
}
.dropdown--open .dropdown-menu {
display: block;
}
.dropdown-menu__list {
opacity: 1;
transition: opacity 03s ease;
}
.dropdown-menu__list--hidden {
opacity: 0;
transition: opacity 03s ease;
}
#asma {
float: right! important;
}
<span id="asma">
<div class="dropdown">
<button class="dropdown-btn mi-ripple mi-ripple-dark">
<div class="dropdown-btn__icon"> ≡ </div>
</button>
<div class="dropdown-menu">
<ul class="dropdown-menu__list">
<li class="mi-ripple mi-ripple-dark">Home</li>
<li class="mi-ripple mi-ripple-dark">Dropdown</li>
<li class="mi-ripple mi-ripple-dark">Createanewbjsbsjshsbsticket</li>
</ul>
</div>
</div>
</span>
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
if ($('.dropdown').hasClass('dropdown--open')) {
$('.dropdown-menu').stop(true, true).fadeIn(300);
} else {
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).removeClass('dropdown-menu__list--hidden');
});
}
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).addClass('dropdown-menu__list--hidden');
});
}
});
});
The jquery fadeOut effect not working. What I can do now? How to add it?

You don't actually need to use fadeIn and fadeOut, or even CSS animation at all. Instead, you can achieve the same effect using CSS transition.
Updated script:
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
}
});
});
Updated styles:
.dropdown-menu {
transition: all 0.3s ease-in-out; <--- here is the trick
transform: scale(0); <---
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
min-width: 150px;
overflow: hidden;
transform-origin: top right;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1); <---
}
See https://jsfiddle.net/cheack/kd92r8g0/42/
Update: If you want to apply a different transition when closing, simply add another transition and add a delay to the first one.
.dropdown-menu {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; <--- last 0.3s is a delay for a scaling (to fade out first, then scale down)
transform: scale(0);
opacity: 0;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1);
opacity: 1;
transition: transform 0.3s ease-in-out;
}

Related

JS hover animation

First of all i checked all duplicates below. But i still couldnt figure out how to.
make animation hover like transition hover
JS hover-like animation Hover animation with js not working
My problem is
I have
<a class="tooltip animated fadeIn" href="#" style="margin-left: 30px; font-size: 1.6em; font-family: 'Open Sans Condensed'; -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */ animation-delay: 1s; ">
<i class="fa fa-info helper" ></i>
<span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner"> If you require access to programs, <br /> please contact to your system administrator </span></span></span>
</a>
And i can use hoover functionality with css like below
#import url(http://fonts.googleapis.com/css?family=Satisfy);
.tooltip {
display: inline;
position: relative;
z-index: 999;
font-size: 1.2em;
color: #D93742;
}
/* Gap filler */
.tooltip::after {
content: '';
position: absolute;
width: 100%;
height: 20px;
bottom: 100%;
left: 50%;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip:hover::after {
pointer-events: auto;
}
/* Tooltip */
.tooltip-content {
position: absolute;
z-index: 9999;
width: 400px;
left: 50%;
bottom: 100%;
font-size: 18px;
line-height: 1.4;
text-align: center;
font-weight: 400;
color: #D93742; /* #fffaf0; */
background: transparent;
opacity: 0;
margin: 0 0 5px -200px;
cursor: default;
pointer-events: none;
font-family: inherit; /* 'Satisfy', cursive; */
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
}
.tooltip:hover .tooltip-content {
opacity: 1;
pointer-events: auto;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.tooltip-content span {
display: block;
}
.tooltip-text {
border-bottom: 10px solid #D93742; /* #fffaf0; */
overflow: hidden;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.tooltip:hover .tooltip-text {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.tooltip-inner {
background: rgba(85,61,61,0.95);
padding: 5px;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
color: white;
}
.tooltip:hover .tooltip-inner {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Arrow */
.tooltip-content::after {
content: '';
bottom: -20px;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #D93742; /* #fffaf0; */
border-width: 10px;
margin-left: -10px;
}
I would like to do same thing with javascript mouseover(hover) and mouseout.
First my div mustn't show. I have table which has headers like 'th'. If a user hoover on that header i want to show tooltip with my javascript closure like how css way does. Css codes only opening in certain positions. But my js tooltip one must open for specific table headers. I can show tooltip in js way like below but i cant add animate functionality and css changes to this one. How can i do that ?
<div id="toolTipContainer"
style="z-index:100; font-size: 1.2em; color: #D93742; border-style: solid; border-width: 2px; width: 200px; height: 80px; position:absolute; display:none;">
<span class="tooltiptable-content"><span class="tooltiptable-text"><span class="tooltiptable-inner"> If you require access to modules, <br/> please contact to your system administrator </span></span></span>
</div>
my script :
<script>
$(document).ready(function () {
$('th').mouseover(function () {
if ($(this).index() === 0) {
return;
} else {
const top = $(this).offset().top - 82;
// var left = $(this).offset().left;
const left = $(this).offset().left;
$('#toolTipContainer').css({'top': top, 'left': left, 'width': $(this).width()});
$('.tooltiptable-content').css({'width': $(this).width()});
//show tool tips
$('#toolTipContainer').show();
}
});
$('th').mouseout(function () {
$("#toolTipContainer").hide();
});
$('#toolTipContainer').mouseover(function () {
$('#toolTipContainer').show();
});
$('#toolTipContainer').mouseout(function () {
$('#toolTipContainer').hide();
});
});
</script>

I can show tooltip in js way like below but i cant add animate functionality and css changes to this one. How can i do that ?
You can use the jQuery fadeIn() method instead of show() and fadeOut() instead of hide() to add transitions. If you need more control over the animation there's animate().
Docs:
http://api.jquery.com/fadein/
http://api.jquery.com/animate/

Event listener not firing for some reason

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.

How to reset hamburger menu icon back to unopened after link inside of menu is clicked?

So I decided to animate my hamburger menu, which was previously unanimated, so this problem was irrelevant to begin with.
The animation starts as a standard hamburger style menu which has several links to different areas of the homepage. When clicked, I animated the menu to turn from a hamburger to an x, indicating to visitors that they can close the menu by clicking on the x. I ran into a problem though, after clicking on a link within the hamburger menu, the icon does not reset from an x back to the hamburger, and that messes up how the menu is opened on the second time. If a visitor were to open it again, the x would turn into the hamburger when the x is clicked on, and it wouldn't make any sense.
Anyways, I'm just wondering if there's a way I could make it so that when a link in the menu gets clicked on, the x returns to its unopened hamburger form. Here's my code:
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
$(document).ready(function(){
$('.icon').click(function(){
$(this).toggleClass('open');
});
});
.header {
position: absolute;
top: 0px;
left: 0px;
width: 327px;
height: 70px;
line-height: 70px;
padding-left: 15px;
font-family: 'Burbank', 'Alegreya Sans SC', 'Alegreya Sans SC Black', sans-serif;
font-size: 40px;
color: #ffffff;
z-index: 2;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.heading {
position: absolute;
top: 0px;
left: 0px;
width: 327px;
height: 67px;
padding-left: 15px;
z-index: 3;
}
.nav {
position: absolute;
top: 0px;
height: 70px;
background-color: #223861;
box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
-webkit-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
-moz-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
text-align: right;
z-index: 1;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.icon {
position: relative;
float: right;
width: 100px;
height: 70px;
padding-left: 13px;
cursor: pointer;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.icon span {
position: absolute;
left: 0;
display: block;
height: 5px;
width: 45px;
margin-left: 75px;
margin-top: 18px;
background: #ffffff;
border-radius: 4px;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.icon span:nth-child(1) {
top: 0px;
}
.icon span:nth-child(2) {
top: 12px;
}
.icon span:nth-child(3) {
top: 24px;
}
.icon.open span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.icon.open span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.header {
width: 90%;
}
.icon {
display: block;
padding-right: 22px;
cursor: pointer;
}
.menu {
max-height: 0px;
transition: max-height .5s ease-in-out;
opacity: 0;
overflow: hidden;
}
.menu a {
display: block;
height: 8vh;
line-height: 8vh;
margin: 0px;
padding: 0px 0px;
border-bottom: 1px solid #eaeaeb;
}
#toggle {
display: none;
}
#toggle:checked + .menu {
max-height: 800px;
opacity: 1;
}
#toggle:not(checked) + .menu {
max-height: 0px;
opacity: 1;
}
<label class="nav" for="toggle" style="z-index:999;">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
Assault Rifles
Submachine Guns
Shotguns
Sniper Rifles
Pistols
Explosives
Other
Vaulted
</div>
</label>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

Simply add this click handler inside of the $(document).ready() function to remove the open CSS class from the hamburger icon when one of the menu links is clicked:
$('.menu a').click(function() {
$('.icon').removeClass('open');
});

You can do this by PURE CSS also
.navigation__checkbox {
display: none
}
.navigation__button {
height: 7rem;
width: 7rem;
position: fixed;
top: 1rem;
left: 1rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer
}
.navigation__icon {
position: relative;
margin-top: 3.5rem;
user-select: none;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
width: 3rem;
height: 2px;
background-color: #333;
display: inline-block
}
.navigation__icon::before,
.navigation__icon::after {
content: "";
position: absolute;
left: 0;
transition: all .2s
}
.navigation__icon::before {
top: -.8rem
}
.navigation__icon::after {
top: .8rem
}
.navigation__button:hover .navigation__icon::before {
top: -1rem
}
.navigation__button:hover .navigation__icon::after {
top: 1rem
}
.navigation__checkbox:checked+.navigation__button .navigation__icon {
background-color: transparent
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
top: 0;
transform: rotate(135deg)
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
top: 0;
transform: rotate(-135deg)
}
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
</div>

HTML/CSS/Javascript: Open/Close Menu when Clicking Button

I've got a hamburger icon for my page that should open/close a dropdown menu when clicked on. I pulled the code for the hamburger icon from Jonathan Suh's github page and am trying to implement a open/close dropdown menu with it (here's the page for your reference https://github.com/jonsuh/hamburgers).
The problem is that when I click on it, the dropdown menu will appear, but when I click on it again it won't disappear. I've tried a few things, such as setting a boolean variable to false and making it true when clicked on, but the code doesn't execute the way I imagine it would. Here's the Code:
//declarations
var hamburger = document.querySelector(".hamburger");
function dropDown() {
document.querySelector(".dropdown-content").style.display = "block";
}
hamburger.addEventListener("click", function() {
hamburger.classList.toggle("is-active");
dropDown();
});
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
/*!
* Hamburgers
* #description Tasty CSS-animated hamburgers
* #author Jonathan Suh #jonsuh
* #site https://jonsuh.com/hamburgers
* #link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/*
* Spring
*/
.hamburger--spring .hamburger-inner {
top: 2px;
transition: background-color 0s 0.13s linear;
}
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.22s;
background-color: transparent;
}
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg);
}
<div class="dropDown">
<button onclick="dropDown()" class="hamburger hamburger--spring" type="button">
<span class = "hamburger-box">
<span class="hamburger-inner"></span>
</span>
<div id="myDropDown" class="dropdown-content">
Home
Work
Resume
Life
</div>
</button>
</div>
While I know there is probably a solution you can use in jQuery, I have no experience with that. So please, keep it in JavaScript. I am completely new to it, but have a basic understanding of how it works.

No need for dropDown() or any additional JS for that matter. Your current click event handler will do just fine. Just add a descendant selector in your CSS that targets dropdown-content when .hamburger also has the class of .is-active (which is already being handled through your class toggle):
.hamburger.is-active .dropdown-content {
display: block;
}

Try this:
function dropDown() {
var dropDown = document.querySelector(".dropdown-content");
if (dropDown.style.display === 'block') {
dropDown.style.display = "none";
} else {
dropDown.style.display = 'block'
}
}

Try to do some css like the one in my website
I use the code to monitor the attribute. You can use JS to change the attribute of the dropdown-content element.
So, put the following into your CSS
.dropdown-content[show='true']{
position: absolute;
margin-top: 50px;
display: block;
}
Then change your JavaScript function to this:
function dropDown(){
var drop=document.getElementById("myDropdown");
if(drop.getAttribute("show")=="true"){
drop.setAttribute("show","false");
}else{
drop.setAttribute("show","true");
}
}
For security, I suggest you to add show="false" to your dropdown-content element. You can also refer my website code to understand them more.

Click outside nav to close

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>

Develop Reference

JavaScript is the programming language of the Web.

Jquery CSS fadeOut animation not working when menu close - javascript

Related

JS hover animation

Event listener not firing for some reason

How to reset hamburger menu icon back to unopened after link inside of menu is clicked?

HTML/CSS/Javascript: Open/Close Menu when Clicking Button

Click outside nav to close

Categories

Resources