How to to toggle a menu container when clicked on menu item

How to to toggle a menu container when clicked on menu item - javascript

I am a beginner in JS.
I found a mobile menu on codepen but I need to edit it to make it right for what i need.
Basically, the mobile menu I need to create contains few links that have anchors and redirect users to sections in the page.
The codepen example I found doesn't close the menu once a link is clicked. I tried to modify the code myself but it doesn't work.
Here the link to the original codepen: https://codepen.io/Gatsby/pen/YdWGgW
And this is the version I did but not working.
(function () {
let header = document.querySelector('.header');
let icon = document.querySelector('.icon-container');
let all = document.querySelectorAll('.menu-item');
icon.onclick = function () {
header.classList.toggle('menu-open');
}
all.onclick = function () {
header.classList.toggle('menu-open');
}
}());
Any help would be greatly appreciated. Thank you.

You can do it this way :
Basically, you get all of the menu classes, and add an event listener on them to close the menu on each click on any of them
(function() {
let header = document.querySelector('.header');
let icon = document.querySelector('.icon-container');
let menu_item = document.getElementsByClassName('menu-item');
icon.onclick = function() {
header.classList.toggle('menu-open');
}
var close = function() {
header.classList.toggle('menu-open');
};
for (var i = 0; i < menu_item.length; i++) {
menu_item[i].addEventListener('click', close, false);
}
}());
#import url(https://fonts.googleapis.com/css?family=Nobile);
/* Just container/placeholder rulesets - remove once in production */
body {
font-family: "Nobile";
margin: 0 auto;
line-height: 1.5;
background: #e0e0e0;
}
.container {
background: #f0f0f0;
position: relative;
overflow: hidden;
width: 375px;
height: 600px;
margin: 50px auto 0;
box-shadow: 0 0 50px 10px #aaa;
}
.container .header {
position: absolute;
display: block;
top: 0;
left: 0;
}
.content {
padding: 40px 5% 20px;
text-align: justify;
max-height: 100%;
color: #333;
overflow-y: scroll;
}
.content img {
width: 100%;
position: relative;
display: block;
margin: 40px auto 30px;
}
#media (max-width: 480px) {
.container {
margin: 0 auto;
width: 100%;
height: 100%;
box-shadow: none;
}
.container .header {
position: fixed;
}
.content {
overflow-y: hidden;
}
}
/* End container/placeholder */
/* Menu Header */
.header {
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
height: 55px;
width: 100%;
z-index: 1;
position: fixed;
transition: all 0.4s ease-out, background 1s ease-out;
}
.header.menu-open {
height: 100%;
background: #111;
transition: all 0.45s ease-out, background 0.8s ease-out;
}
/* Menu List items */
.mobile-menu {
clear: both;
}
.header ul.menu {
position: relative;
display: block;
padding: 0px 40px 0;
list-style: none;
}
.header ul.menu li.menu-item a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
font-size: 18px;
line-height: 2.8;
width: 100%;
-webkit-tap-highlight-color: transparent;
}
.header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.header ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.35s;
}
.header ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.3s;
}
.header ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.25s;
}
.header ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.header ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.15s;
}
.header ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.1s;
}
.header ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.05s;
}
.header.menu-open ul.menu li.menu-item {
opacity: 1;
}
.header.menu-open ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.05s;
}
.header.menu-open ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.1s;
}
.header.menu-open ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.15s;
}
.header.menu-open ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.header.menu-open ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.25s;
}
.header.menu-open ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.3s;
}
.header.menu-open ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.35s;
}
/* Menu Icon */
.icon-container {
position: relative;
display: inline-block;
z-index: 2;
float: right;
/* Simply change property to float left to switch icon side :) */
height: 55px;
width: 55px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.icon-container #menuicon {
width: 20px;
height: 10px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
#menuicon .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#menuicon .bar.bar1 {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
#menuicon .bar.bar2 {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.menu-open .icon-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-open .icon-container #menuicon .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.1s;
}
.menu-open .icon-container #menuicon .bar.bar1 {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.menu-open .icon-container #menuicon .bar.bar2 {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}
<div class="container">
<div class="header">
<div class="icon-container">
<div id="menuicon">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
</div>
</div>
<div class="mobile-menu">
<ul class="menu">
<li class="menu-item">Mac
</li>
<li class="menu-item">iPad
</li>
<li class="menu-item">iPhone
</li>
<li class="menu-item">Watch
</li>
<li class="menu-item">TV
</li>
<li class="menu-item">Music
</li>
<li class="menu-item">Support
</li>
</ul>
</div>
</div>
<div class="content">
<img src="https://images.apple.com/v/iphone/home/y/images/overview/hero-iphone-xr_large.jpg" alt="" />
<p>“With so many trees in the city, you could see the spring coming each day until a night of warm wind would bring it suddenly in one morning. Sometimes the heavy cold rains would beat it back so that it would seem that it would never come and that
you were losing a season out of your life. This was the only truly sad time in Paris because it was unnatural. You expected to be sad in the fall. Part of you died each year when the leaves fell from the trees and their branches were bare against
the wind and the cold, wintry light."</p>
<p><em>- Ernest Hemingway, A Moveable Feast</em></p>
<img src="https://images.apple.com/v/iphone/home/y/images/overview/film_large.jpg" alt="" />
<p>"On under the heavy trees of the small town that are a part of your heart if it is your town and you have walked under them, but that are only too heavy, that shut out the sun and dampen the houses for a stranger; out past the last house and on to
the highway that rose and fell straight away ahead with banks of red dirt sliced cleanly away and the second growth timber on both sides. It was not his country but it was the middle of fall and all of this country was good to drive through and
to see. "</p>
<p><em>- Ernest Hemingway, "Fathers and Sons"</em></p>
</div>
</div>
Here I am using document.getElementsByClassName but you could also use document.querySelectorAll which is more useful if you want to use more complex selectors

Related

CSS Transitions not working after converting from jQuery to Vanilla JS

I recently decided to convert the old code in my <head> from jQuery to Vanilla JS.
Basically, when you click the hamburger, the mobile menu is displayed fading-in and all the links transition should start. I tried to "replace" the fadeToggle() function adding the class mob-menu-show with a simple opacity transition but it doesn't work, same for all the links traslate transitions previously working with jQuery. With jQuery I had no issues at all, the transitions used to run everytime I opened the mobile menu. I think this is something related to the JS code that in a certain way does not execute the transitions, because the class mobile-menu-animations it is actually triggered since I can see the right opacity. Thank you for any help and sorry if the code is messy, I just started now.
HTML
<button class="hamburger hamburger--3dxy" type="button" aria-label="Menu" aria-controls="navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="nav-fullscreen" class="mobile-menu mobile-menu-controls">
<div id="mobile-menu-container">
<div id="mobile-menu-content">
<div id="logo-menu">
<div id="logo-mobile-menu"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.5 8.57" class="logo">...</svg> </div>
</div>
<div id="nav-items">
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div id="menu-mobile-button-cont"><a id="button-mobile-menu" href="#">Buy Now</a></div>
</div>
</div>
</div>
CSS
.mobile-menu {
display: none;
opacity: 0;
transition: opacity 0.2s;
}
.mob-menu-show {
display: block !important;
opacity: 1;
transition: 0.2s opacity;
}
.mobile-menu-controls {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 15;
}
#mobile-menu-container {
flex-direction: column;
display: flex;
width: 100%;
height: 100vh;
align-items: stretch;
top: 0;
text-align: left;
overflow-x: hidden;
overflow-y: scroll;
}
#mobile-menu-content {
width: 100%;
flex-direction: column;
display: flex;
align-items: stretch;
max-width: 1280px;
}
#nav-items {
flex-direction: unset;
margin-top: 7rem;
}
#menu-mobile-button-cont {
margin-left: 20px;
margin-bottom: 26px;
margin-right: 20px;
text-align: left;
flex-direction: unset;
display: flex;
width: 100%;
margin-top: 8rem;
}
/* Transitions */
#button-mobile-menu {
opacity: 0;
margin-left: 40px;
transform: translateX(0px);
transition: transform .2s,opacity .2s;
}
#logo-mobile-menu {
opacity: 0;
padding-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-controls li {
opacity: 0;
padding-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
#button-mobile-menu {
opacity: 0;
margin-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-animations #logo-mobile-menu {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
transition-delay: 0.1s;
}
.mobile-menu-animations li {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
}
.mobile-menu-animations li:nth-child(1) {
transition-delay: 0.2s;
}
.mobile-menu-animations li:nth-child(2) {
transition-delay: 0.3s;
}
.mobile-menu-animations li:nth-child(3) {
transition-delay: 0.4s;
}
.mobile-menu-animations li:nth-child(4) {
transition-delay: 0.5s;
}
.mobile-menu-animations #button-mobile-menu {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
transition-delay: 0.6s;
}
/* Prevent body scroll */
.prevent-scroll {
overflow: hidden;
}
Old jQuery code
$(document).ready(function() {
$('.hamburger').click(function() {
$('.hamburger').toggleClass('is-active');
$('.mobile-menu').fadeToggle(350);
$('.mobile-menu-controls').toggleClass('mobile-menu-animations');
$('body').toggleClass("prevent-scroll");
});
});
Converted JS
document.addEventListener("DOMContentLoaded", function(event) {
let hamb = document.querySelector('.hamburger')
let mobmenu = document.querySelector('.mobile-menu')
let mobanim = document.querySelector('.mobile-menu-controls')
let bdy = document.querySelector('body')
hamb.addEventListener('click', function(e) {
this.classList.toggle('is-active');
mobmenu.classList.toggle('mob-menu-show');
mobanim.classList.toggle('mobile-menu-animations');
bdy.classList.toggle('prevent-scroll');
});
});

As others have mentioned, transitions with a display css attribute kind of sucks. You can use keyframes and animations to get around this though. You will want to update the other transitions to use keyframes as well as I'm only animating to opacity in this example.
let hamb = document.querySelector('.hamburger')
let mobmenu = document.querySelector('.mobile-menu')
let mobanim = document.querySelector('.mobile-menu-controls')
let bdy = document.querySelector('body')
hamb.addEventListener('click', function() {
hamb.classList.toggle('is-active');
bdy.classList.toggle('prevent-scroll');
mobmenu.classList.toggle('mob-menu-show');
mobanim.classList.toggle('mobile-menu-animations');
});
#keyframes fade {
0% {
opacity: 0;
}
}
.mobile-menu {
display: none;
}
.mob-menu-show {
opacity: 1;
display: block;
animation: fade .250s both;
}
.mobile-menu-controls {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
}
#mobile-menu-container {
flex-direction: column;
display: flex;
width: 100%;
height: 100vh;
align-items: stretch;
top: 0;
text-align: left;
overflow-x: hidden;
overflow-y: scroll;
}
#mobile-menu-content {
width: 100%;
flex-direction: column;
display: flex;
align-items: stretch;
max-width: 1280px;
}
#nav-items {
flex-direction: unset;
margin-top: 7rem;
}
#menu-mobile-button-cont {
margin-left: 20px;
margin-bottom: 26px;
margin-right: 20px;
text-align: left;
flex-direction: unset;
display: flex;
width: 100%;
margin-top: 8rem;
}
/* Transitions */
#button-mobile-menu {
opacity: 0;
margin-left: 40px;
transform: translateX(0px);
transition: transform .2s, opacity .2s;
}
#logo-mobile-menu {
opacity: 0;
padding-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-controls li {
opacity: 0;
padding-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
#button-mobile-menu {
opacity: 0;
margin-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-animations #logo-mobile-menu {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
transition-delay: 0.1s;
}
.mobile-menu-animations li {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
}
.mobile-menu-animations li:nth-child(1) {
transition-delay: 0.2s;
}
.mobile-menu-animations li:nth-child(2) {
transition-delay: 0.3s;
}
.mobile-menu-animations li:nth-child(3) {
transition-delay: 0.4s;
}
.mobile-menu-animations li:nth-child(4) {
transition-delay: 0.5s;
}
.mobile-menu-animations #button-mobile-menu {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
transition-delay: 0.6s;
}
/* Prevent body scroll */
.prevent-scroll {
overflow: hidden;
}
<button class="hamburger hamburger--3dxy" type="button" aria-label="Menu" aria-controls="navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="nav-fullscreen" class="mobile-menu mobile-menu-controls">
<div id="mobile-menu-container">
<div id="mobile-menu-content">
<div id="logo-menu">
<div id="logo-mobile-menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.5 8.57" class="logo">...</svg>
</div>
</div>
<div id="nav-items">
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div id="menu-mobile-button-cont"><a id="button-mobile-menu" href="#">Buy Now</a></div>
</div>
</div>
</div>
If you dont want to keyframe out all your transitions, you can use javascript to kind of do the same thing using this method.
On click, manually set the display attribute to block.
Use setTimeout to wait on our styles to be flushed to the DOM.
Add our classnames.
let hamb = document.querySelector('.hamburger')
let mobmenu = document.querySelector('.mobile-menu')
let mobanim = document.querySelector('.mobile-menu-controls')
let bdy = document.querySelector('body')
hamb.addEventListener('click', function() {
hamb.classList.toggle('is-active');
bdy.classList.toggle('prevent-scroll');
mobmenu.style.display = "block";
setTimeout(() => {
mobmenu.classList.toggle('mob-menu-show');
mobanim.classList.toggle('mobile-menu-animations');
});
});
.mobile-menu {
display: none;
opacity: 0;
transition: opacity .250ms;
}
.mob-menu-show {
opacity: 1;
}
.mobile-menu-controls {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
}
#mobile-menu-container {
flex-direction: column;
display: flex;
width: 100%;
height: 100vh;
align-items: stretch;
top: 0;
text-align: left;
overflow-x: hidden;
overflow-y: scroll;
}
#mobile-menu-content {
width: 100%;
flex-direction: column;
display: flex;
align-items: stretch;
max-width: 1280px;
}
#nav-items {
flex-direction: unset;
margin-top: 7rem;
}
#menu-mobile-button-cont {
margin-left: 20px;
margin-bottom: 26px;
margin-right: 20px;
text-align: left;
flex-direction: unset;
display: flex;
width: 100%;
margin-top: 8rem;
}
/* Transitions */
#button-mobile-menu {
opacity: 0;
margin-left: 40px;
transform: translateX(0px);
transition: transform .2s, opacity .2s;
}
#logo-mobile-menu {
opacity: 0;
padding-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-controls li {
opacity: 0;
padding-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
#button-mobile-menu {
opacity: 0;
margin-left: 40px;
transform: translateX(0px);
transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-animations #logo-mobile-menu {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
transition-delay: 0.1s;
}
.mobile-menu-animations li {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
}
.mobile-menu-animations li:nth-child(1) {
transition-delay: 0.2s;
}
.mobile-menu-animations li:nth-child(2) {
transition-delay: 0.3s;
}
.mobile-menu-animations li:nth-child(3) {
transition-delay: 0.4s;
}
.mobile-menu-animations li:nth-child(4) {
transition-delay: 0.5s;
}
.mobile-menu-animations #button-mobile-menu {
transform: translateX(-40px);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
opacity: 1;
transition-delay: 0.6s;
}
/* Prevent body scroll */
.prevent-scroll {
overflow: hidden;
}
<button class="hamburger hamburger--3dxy" type="button" aria-label="Menu" aria-controls="navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="nav-fullscreen" class="mobile-menu mobile-menu-controls">
<div id="mobile-menu-container">
<div id="mobile-menu-content">
<div id="logo-menu">
<div id="logo-mobile-menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.5 8.57" class="logo">...</svg>
</div>
</div>
<div id="nav-items">
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div id="menu-mobile-button-cont"><a id="button-mobile-menu" href="#">Buy Now</a></div>
</div>
</div>
</div>

Use visibility: hidden;
display: none. cannot perform a transition well.

Prevent scroll when open menu

I would like to use the apple style mobile menu on non-mobile larger screens.
The menu is part of several elements visible in the body and it does not cover the entire screen.
Is it possible to prevent scrolling when the menu is opened?
I know I could do that with
position: fixed;
overflow: hidden;
but not sure where to place them.
Michelle.
(function(){
var burger = document.querySelector('.burger-container'),
header = document.querySelector('.header');
burger.onclick = function() {
header.classList.toggle('menu-opened');
}
}());
#import url(https://fonts.googleapis.com/css?family=Ek+Mukta:200);
body {
margin: 0;
line-height: 1.4;
}
.window {
position: relative;
display: block;
width: 50%;
height: 567px;
float: left;
margin: 20px;
-webkit-box-shadow: 0 0 65px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 65px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 3px;
}
.window .header {
position: absolute;
display: block;
top: 0;
left: 0;
height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s ease-out, background 1s ease-out;
transition: all 0.5s ease-out, background 1s ease-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: 1;
}
.window .header .burger-container {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
cursor: pointer;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.window .header .burger-container #burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.window .header .burger-container #burger .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #FFF;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.window .header .burger-container #burger .bar.topBar {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
.window .header .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.window .header .icon {
display: inline-block;
position: absolute;
height: 100%;
line-height: 50px;
width: 50px;
height: 50px;
text-align: center;
color: #FFF;
font-size: 22px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.window .header .icon.icon-bag {
right: 0;
top: 0;
left: auto;
-webkit-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.65s;
transition-delay: 0.65s;
}
.window .header ul.menu {
position: relative;
display: block;
padding: 0px 48px 0;
list-style: none;
}
.window .header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
-webkit-transform: scale(1.15) translateY(-30px);
transform: scale(1.15) translateY(-30px);
opacity: 0;
-webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.window .header ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.window .header ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.42s;
transition-delay: 0.42s;
}
.window .header ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.window .header ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.window .header ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.window .header ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.window .header ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.07s;
transition-delay: 0.07s;
}
.window .header ul.menu li.menu-item a {
display: block;
position: relative;
color: #FFF;
font-family: "Ek Mukta", sans-serif;
font-weight: 100;
text-decoration: none;
font-size: 22px;
line-height: 2.35;
font-weight: 200;
width: 100%;
}
.window .header.menu-opened {
height: 100%;
background-color: #000;
-webkit-transition: all 0.3s ease-in, background 0.5s ease-in;
transition: all 0.3s ease-in, background 0.5s ease-in;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.window .header.menu-opened .burger-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.window .header.menu-opened .burger-container #burger .bar {
-webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.window .header.menu-opened .burger-container #burger .bar.topBar {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.window .header.menu-opened .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}
.window .header.menu-opened ul.menu li.menu-item {
-webkit-transform: scale(1) translateY(0px);
transform: scale(1) translateY(0px);
opacity: 1;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.27s;
transition-delay: 0.27s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.34s;
transition-delay: 0.34s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.41s;
transition-delay: 0.41s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.48s;
transition-delay: 0.48s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.62s;
transition-delay: 0.62s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.69s;
transition-delay: 0.69s;
}
.window .header.menu-opened .icon.icon-bag {
-webkit-transform: translateX(75px);
transform: translateX(75px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.window .content {
font-family: "Ek Mukta", sans-serif;
padding: 67px 4% 0;
text-align: justify;
overflow: scroll;
max-height: 100%;
}
.window .content::-webkit-scrollbar {
display: none;
}
.window .content h2 {
margin-bottom: 0px;
letter-spacing: 1px;
}
.window .content img {
width: 95%;
position: relative;
display: block;
margin: 75px auto 75px;
}
.window .content img:nth-of-type(2) {
margin: 75px auto;
}
.outside-text {
width: 40%;
display: inline-block;
}
.outside-text p {
margin: 40px;
}
<div class="window">
<div class="header">
<div class="burger-container">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
<div class="icon icon-apple"></div>
<ul class="menu">
<li class="menu-item">Mac</li>
<li class="menu-item">iPad</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">Watch</li>
<li class="menu-item">TV</li>
<li class="menu-item">Music</li>
<li class="menu-item">Support</li>
</ul>
<div class="shop icon icon-bag"></div>
</div>
<div class="content"> <img src="https://images.apple.com/v/ipad-air-2/c/images/overview/performance_large.png" alt=""/>
</div>
</div>
<div class="outside-text">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>

I generally recommend javascript based solution instead of regular body overflow: hidden fix as page won't jump to the top when you open the menu somewhere in the middle of the page
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
var preventKeys = {
37: 1, 38: 1, 39: 1, 40: 1
};
function preventDefaultForScrollKeys(e) {
if (preventKeys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
var target = $('.page').get(0)
if (window.addEventListener) // older FF
target.addEventListener('DOMMouseScroll', preventDefault, false);
target.onwheel = preventDefault; // modern standard
target.onmousewheel = target.onmousewheel = preventDefault; // older browsers, IE
target.ontouchmove = preventDefault; // mobile
target.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
var target = $('.page').get(0)
if (window.removeEventListener)
target.removeEventListener('DOMMouseScroll', preventDefault, false);
target.onmousewheel = target.onmousewheel = null;
target.onwheel = null;
target.ontouchmove = null;
target.onkeydown = null;
}
The original idea is not mine, I found this on Stackoverflow long time ago and take this part from project to project. Unfortunately, I can't credit an author. Please let me know the topic in comments below if you know one
To keep overflow scrolling on the menu (if the height is greater than 100vh) you should make menu outside target disableScroll() / enableScroll() functions
i.e.
<body>
<div class="menu> .. menu .. </div>
<div class="page"> .. site content .. </div>
</body>

Not quiet sure if this is what you actually want. The following code prevent scrolling if the menu is opend!
if(header.getAttribute("class").indexOf("menu-opened") > -1)
alert("opend"); // opend
else
alert("closed"); // closed
Check if class contains menu-opened.
EDIT: As Sergey Khmelevskoy mentioned in his answere it is very usefull if you scroll to top once the menu is open.
(function(){
var body = document.getElementsByTagName("body")[0],
burger = document.querySelector('.burger-container'),
header = document.querySelector('.header');
burger.onclick = function() {
header.classList.toggle('menu-opened');
if(header.getAttribute("class").indexOf("menu-opened") > -1){
body.classList.add("overflow_hidden");
window.scrollTo(0, 0); // scroll to the top of the page
}
else
body .classList.remove("overflow_hidden");
}
}());
#import url(https://fonts.googleapis.com/css?family=Ek+Mukta:200);
body {
margin: 0;
line-height: 1.4;
}
.overflow_hidden {
overflow-y: hidden !important;
}
.window {
position: relative;
display: block;
width: 50%;
height: 567px;
float: left;
margin: 20px;
-webkit-box-shadow: 0 0 65px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 65px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 3px;
}
.window .header {
position: absolute;
display: block;
top: 0;
left: 0;
height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s ease-out, background 1s ease-out;
transition: all 0.5s ease-out, background 1s ease-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: 1;
}
.window .header .burger-container {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
cursor: pointer;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.window .header .burger-container #burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.window .header .burger-container #burger .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #FFF;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.window .header .burger-container #burger .bar.topBar {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
.window .header .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.window .header .icon {
display: inline-block;
position: absolute;
height: 100%;
line-height: 50px;
width: 50px;
height: 50px;
text-align: center;
color: #FFF;
font-size: 22px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.window .header .icon.icon-bag {
right: 0;
top: 0;
left: auto;
-webkit-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.65s;
transition-delay: 0.65s;
}
.window .header ul.menu {
position: relative;
display: block;
padding: 0px 48px 0;
list-style: none;
}
.window .header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
-webkit-transform: scale(1.15) translateY(-30px);
transform: scale(1.15) translateY(-30px);
opacity: 0;
-webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.window .header ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.window .header ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.42s;
transition-delay: 0.42s;
}
.window .header ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.window .header ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.window .header ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.window .header ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.window .header ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.07s;
transition-delay: 0.07s;
}
.window .header ul.menu li.menu-item a {
display: block;
position: relative;
color: #FFF;
font-family: "Ek Mukta", sans-serif;
font-weight: 100;
text-decoration: none;
font-size: 22px;
line-height: 2.35;
font-weight: 200;
width: 100%;
}
.window .header.menu-opened {
height: 100%;
background-color: #000;
-webkit-transition: all 0.3s ease-in, background 0.5s ease-in;
transition: all 0.3s ease-in, background 0.5s ease-in;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.window .header.menu-opened .burger-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.window .header.menu-opened .burger-container #burger .bar {
-webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.window .header.menu-opened .burger-container #burger .bar.topBar {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.window .header.menu-opened .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}
.window .header.menu-opened ul.menu li.menu-item {
-webkit-transform: scale(1) translateY(0px);
transform: scale(1) translateY(0px);
opacity: 1;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.27s;
transition-delay: 0.27s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.34s;
transition-delay: 0.34s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.41s;
transition-delay: 0.41s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.48s;
transition-delay: 0.48s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.62s;
transition-delay: 0.62s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.69s;
transition-delay: 0.69s;
}
.window .header.menu-opened .icon.icon-bag {
-webkit-transform: translateX(75px);
transform: translateX(75px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.window .content {
font-family: "Ek Mukta", sans-serif;
padding: 67px 4% 0;
text-align: justify;
overflow: scroll;
max-height: 100%;
}
.window .content::-webkit-scrollbar {
display: none;
}
.window .content h2 {
margin-bottom: 0px;
letter-spacing: 1px;
}
.window .content img {
width: 95%;
position: relative;
display: block;
margin: 75px auto 75px;
}
.window .content img:nth-of-type(2) {
margin: 75px auto;
}
.outside-text {
width: 40%;
display: inline-block;
}
.outside-text p {
margin: 40px;
}
<div class="window">
<div class="header">
<div class="burger-container">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
<div class="icon icon-apple"></div>
<ul class="menu">
<li class="menu-item">Mac</li>
<li class="menu-item">iPad</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">Watch</li>
<li class="menu-item">TV</li>
<li class="menu-item">Music</li>
<li class="menu-item">Support</li>
</ul>
<div class="shop icon icon-bag"></div>
</div>
<div class="content"> <img src="https://images.apple.com/v/ipad-air-2/c/images/overview/performance_large.png" alt=""/>
</div>
</div>
<div class="outside-text">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>

Adding another nav item using javascript and css

I have created a burger menu, and copied this code https://codepen.io/woodwoerk/pen/BoEGYZ?q=burger+menu&limit=all&type=type-pens. However in this example there is three items in the drop down menu and in my website I have four. I tried adding another item to the drop down and changing the css and js however now I have a blank space where the new item has been added.
Here is what the menu looks like in the browser
Not sure how I can fix this to show all four items in the drop down. Below is the code I have
var Menu = {
el: {
menu: $('.menu'),
menuTop: $('.menu-top'),
menuSecond: $('.menu-second'),
menuClose: $('.menu-close'),
menuMiddle: $('.menu-middle'),
menuBottom: $('.menu-bottom'),
menuText: $('.menu-text')
},
init: function() {
Menu.bindUIactions();
},
bindUIactions: function() {
Menu.el.menu.on('click', function(event) {
Menu.activateMenu(event);
event.preventDefault();
});
},
activateMenu: function() {
Menu.el.menuTop.toggleClass('menu-top-expand expand');
Menu.el.menuSecond.toggleClass('menu-second-expand expand');
Menu.el.menuMiddle.toggleClass('menu-middle-expand expand');
Menu.el.menuBottom.toggleClass('menu-bottom-expand expand');
Menu.el.menuText.toggleClass('menu-text-expand');
Menu.el.menuClose.toggleClass('menu-close-visible');
}
};
//Stop menu item click closing the menu
$(".menu .menu-global").click(function(e) {
e.stopPropagation();
});
Menu.init();
span {
display: inline-block;
vertical-align: middle;
color: white;
}
ul {
display: block;
list-style-type: none;
text-align: right;
}
a {
color: #FFF;
}
a:hover {
opacity: 0.7;
}
.menu {
margin: 0 20px 0 0;
padding-left: 1.25em;
cursor: pointer;
position: relative;
width: 30px;
height: 50px;
text-align: right;
float:right;
}
.menu-close {
font-size: 0em;
opacity: 0;
text-align: center;
font-weight: bold;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-close-visible {
font-size: 2em;
opacity: 1;
-webkit-transition: 0.2s 0.4s;
transition: 0.2s 0.4s;
}
.menu-global {
z-index: -1;
position: absolute;
left: 0;
height: 10px;
width: 100%;
background-color: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-global:hover {
left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.menu-top {
top: 0;
}
.menu-second {
top: 18px;
}
.menu-middle {
top: 36px;
}
.menu-bottom {
top: 54px;
}
.menu-text{
opacity: 0;
font-size: 0em;
padding: 10px 0;
-webkit-transition: 0.1s;
transition: 0.1s;
}
.expand {
box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
width: 200px;
height: 50px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu-top-expand {
top: 50px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.3s, left 0.1s;
transition: all 0.5s 0.3s, left 0.1s;
}
.menu-second-expand {
top: 100px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.2s, left 0.1s;
transition: all 0.5s 0.2s, left 0.1s;
}
.menu-middle-expand {
top: 150px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
.menu-bottom-expand {
top: 200px;
height: 150px;
background: #FFE082;
-webkit-transition: all 0.5s, left 0.1s;
transition: all 0.5s, left 0.1s;
}
.menu-text-expand{
color: #000000;
opacity: 0.8;
padding: 10px;
font-size: 1.3em;
-webkit-transition: all 0.2s 0.7s, font-size 0.1s;
transition: all 0.2s 0.7s, font-size 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<div class="menu-close fa fa-close"></div>
<li class="menu-global menu-top"><span class="menu-text">Home</span></li>
<li class="menu-global menu-second"><span class="menu-text">View Holiday Gallery</span></li>
<li class="menu-global menu-middle"><span class="menu-text">View Itinerary</span></li>
<li class="menu-global menu-bottom"><span class="menu-text">Settings</span></li>
</ul>

If you are adding another menu element you need to make sure you add all the proper required additions in your code. From hacking through it i got this:
First add the item in the html, and refer to it as bottom2 from now on:
<li class="menu-global menu-bottom2"><span class="menu-text">My ExtraElement</span></li>
notice the class is now unique: menu-bottom2. That is so the the margin from top would be properly aggregated to display it below the first .menu-bottom element.
now for the css add this:
.menu-bottom2 {
top: 54px;
}
and this:
.menu-bottom2-expand {
top: 200px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
and finally the javascript:
in the menu.el:
menuBottom2: $('.menu-bottom2'),
in the menu.activateMenu:
Menu.el.menuBottom2.toggleClass('menu-bottom2-expand expand');
and here is the full codepen:
https://codepen.io/anon/pen/vdKYxb

changing css class and a jquery function when it reaches a div

I want to change a class from "class A" to "Class B" when it reaches DIV of "Class A" to "Class B"..
Here is the thing what I want, I have push menu when hamburger icon. The icon is generally in white background with black box shadow. My whole website background is dark. So it is perfect for dark background.
But I have few DIVs which are in white, when I reach that white DIV my menu is hardly visible.
So my question is I want to change the class of my menu from white to black when it reaches white background div. And I want to change the function of that menu as well in jquery. Because I have a "click" function to expand the menu.
Here is the HTML:
$('.nav-trigger').on('click', function() {
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Advent Pro", sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #23222a;
height: 100vh;
color: #fff;
}
.content {
display: table-cell;
vertical-align: middle;
color: #fff;
}
.nav-trigger {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
top: 0;
left: 0;
}
.nav-trigger span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger span:last-child {
top: 20px;
left: 0;
}
.nav-trigger .on {
top: 10px;
}
.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-trigger-dark {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
display: block;
width: 100%;
height: 2px;
background: #000;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
top: 0;
left: 0;
}
.nav-trigger-dark span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger-dark span:last-child {
top: 20px;
left: 0;
}
.nav-trigger-dark .on {
top: 10px;
}
.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 19;
overflow: hidden;
}
.nav-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
position: relative;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
position: relative;
float: left;
margin: 0;
width: 25%;
height: 100vh;
text-align: center;
cursor: pointer;
background: #e65454;
color: #fff;
text-decoration: none;
}
#media (max-width: 30em) {
.nav-menu ul a {
width: 100%;
height: 25vh;
}
}
.nav-menu ul a li {
position: absolute;
text-transform: uppercase;
font-family: "Advent Pro", sans-serif;
top: 45%;
left: 0;
position: relative;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
}
#media (max-width: 30em) {
.nav-menu ul a li {
top: 25%;
}
}
.nav-menu ul a h2.mb {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -20px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mb {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mb {
font-size: 2rem;
/* 32/16 */
margin-bottom: -13px;
}
}
.nav-menu ul a h2.mt {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -73px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mt {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mt {
font-size: 2rem;
/* 32/16 */
}
}
.nav-menu ul a i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
font-size: 1.875rem;
/* 30/16 */
}
#media (max-width: 30em) {
.nav-menu ul a i {
display: none;
}
}
.nav-menu ul a:hover {
background: #fff;
color: #e65454;
}
.nav-menu ul a:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
background: #fff;
color: #e65454;
}
.nav-menu ul a.active:hover {
color: #000;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.bgwhite {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger">
<span></span><span></span><span></span>
</div>
<div class="nav-menu">
<ul>
<li><h2 class="mt">Home</h2><i>Go to</i></li>
<li><h2 class="mb">About</h2><i>Me</i></li>
<li><h2 class="mt">Work</h2><i>My</i></li>
<li><h2 class="mb">Contact</h2><i>Me</i></li>
</ul>
</div>
<section>
<div class="content">
</div>
</section>
<section class="bgwhite">
<div class="content">
</div>
</section>
as you can see in the snippit above when i reach the white background section, my hamburger menu trigger is hardly visible..
I have a css class with dark menu in the name of "nav-trigger dark".
Now I want to change that "nav-trigger" class to "nav-trigger-dark" class in that html and in that jquery script as well.

I believe I understood the effect you're trying to achieve.
In my solution I listen to the scroll event on the document and when I reach a new section I check whether that section contains a particular class, if it does I alter my navbar class to match the style I want to display.
Check this Fiddle for more information.
It goes like this:
HTML:
<nav>
<p class="js_header white">
Text
</p>
</nav>
<section class="bg-black"></section>
<section class="bg-white"></section>
<section class="bg-black"></section>
<section class="bg-white"></section>
CSS (the important part):
nav .white {
color: white;
}
nav .black {
color: black;
}
section.bg-black {
background-color: black;
}
section.bg-white {
background-color: white;
}
Javascript:
$(document).scroll(function (e) {
$.each($('section'), function (index, section) {
if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
if ($(section).hasClass('bg-black')) {
$('.js_header').removeClass('black');
$('.js_header').addClass('white');
} else {
$('.js_header').removeClass('white');
$('.js_header').addClass('black');
}
}
});
});
UPDATE: Ok I got what you mean on your comments, in order to change the nav click behaviour when changing the class you need to add the listener to the body targeting the selector you want, instead of binding to the specific class from the beginning.
The JS would go like this for the changing the click behaviour:
$('body').on('click', '.nav-trigger', function() {
alert('light clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$('body').on('click', '.nav-trigger-dark', function() {
alert('dark clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
I've altered your snippet to the following:
$('body').on('click', '.nav-trigger', function() {
alert('light clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$('body').on('click', '.nav-trigger-dark', function() {
alert('dark clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$(document).scroll(function (e) {
$.each($('section'), function (index, section) {
if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
if ($(section).hasClass('bgwhite')) {
$('.js_navbar').removeClass('nav-trigger');
$('.js_navbar').addClass('nav-trigger-dark');
} else {
$('.js_navbar').removeClass('nav-trigger-dark');
$('.js_navbar').addClass('nav-trigger');
}
}
});
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Advent Pro", sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #23222a;
height: 100vh;
color: #fff;
}
.content {
display: table-cell;
vertical-align: middle;
color: #fff;
}
.nav-trigger {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
top: 0;
left: 0;
}
.nav-trigger span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger span:last-child {
top: 20px;
left: 0;
}
.nav-trigger .on {
top: 10px;
}
.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-trigger-dark {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
display: block;
width: 100%;
height: 2px;
background: #000;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
top: 0;
left: 0;
}
.nav-trigger-dark span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger-dark span:last-child {
top: 20px;
left: 0;
}
.nav-trigger-dark .on {
top: 10px;
}
.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 19;
overflow: hidden;
}
.nav-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
position: relative;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
position: relative;
float: left;
margin: 0;
width: 25%;
height: 100vh;
text-align: center;
cursor: pointer;
background: #e65454;
color: #fff;
text-decoration: none;
}
#media (max-width: 30em) {
.nav-menu ul a {
width: 100%;
height: 25vh;
}
}
.nav-menu ul a li {
position: absolute;
text-transform: uppercase;
font-family: "Advent Pro", sans-serif;
top: 45%;
left: 0;
position: relative;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
}
#media (max-width: 30em) {
.nav-menu ul a li {
top: 25%;
}
}
.nav-menu ul a h2.mb {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -20px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mb {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mb {
font-size: 2rem;
/* 32/16 */
margin-bottom: -13px;
}
}
.nav-menu ul a h2.mt {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -73px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mt {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mt {
font-size: 2rem;
/* 32/16 */
}
}
.nav-menu ul a i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
font-size: 1.875rem;
/* 30/16 */
}
#media (max-width: 30em) {
.nav-menu ul a i {
display: none;
}
}
.nav-menu ul a:hover {
background: #fff;
color: #e65454;
}
.nav-menu ul a:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
background: #fff;
color: #e65454;
}
.nav-menu ul a.active:hover {
color: #000;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.bgwhite {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger js_navbar">
<span></span><span></span><span></span>
</div>
<div class="nav-menu">
<ul>
<li><h2 class="mt">Home</h2><i>Go to</i></li>
<li><h2 class="mb">About</h2><i>Me</i></li>
<li><h2 class="mt">Work</h2><i>My</i></li>
<li><h2 class="mb">Contact</h2><i>Me</i></li>
</ul>
</div>
<section>
<div class="content">
</div>
</section>
<section class="bgwhite">
<div class="content">
</div>
</section>

You can calculate the offset of white elements and then compare that with the scroll value. Then if you are on that divs, you change your css :
$(function() {
var oTop = $('#blueDiv').offset().top - $('#blueDiv').outerHeight() ;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
//console.log( pTop + ' - ' + oTop );
if( pTop > oTop && pTop<oTop + $('#blueDiv').outerHeight() + $('#navbar').outerHeight() ){
white();
}else {
blue();
}
});
});
function white(){
document.getElementById("navbar").className = "";
document.getElementById("navbar").className = "navbar-white";
//Add your code here
}
function blue(){
document.getElementById("navbar").className = "";
document.getElementById("navbar").className = "navbar-blue";
//Add your code here
}
#navbar {
position : fixed;
top : 0px;
height : 30px;
width:100%;
opacity:0.7;
}
#blueDiv {
background-color : blue;
height:30px;
}
.navbar-white {
background-color: white;
}
.navbar-blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar-blue">
menu
</div>
<p> s</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s4</p>
<p> </p>
<p> </p>
<div id="blueDiv">counter...</div>
<p> s</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s4</p>
<p> </p>
<p> </p>

Tumblr style UserHoverCard

Hi everyone i have one problem with ajax hover. I am trying to make a userHoverCard like tumblr. But the hover animation not working when i use it with ajax.
This is working DEMO without ajax only css. In this demo you can see when you hover image then .p-tooltip will open with animation effect.
But if you click this DEMO from my test page then you can see when you hover an image then .p-tooltip will not open with animation effect.
HTML
<div class="p-tooltip"></div>
<div class="summary" data-id="25">
</div>
<div class="summary" data-id="20">
</div>
<div class="summary" data-id="25">
</div>
This is my ajax code:
$(document).ready(function() {
function showProfileTooltip(e, id){
e.append($('.p-tooltip').css({
'top':'20',
'left':'80'
}).show());
//send id & get info from get_profile.php
$.ajax({
url: 'get_profile.php?uid='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide().fadeIn('fast');
}
$('.summary a').hover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
}, function(){
setTimeout(function(){
hideProfileTooltip();
},2000);
});
});
And here is CSS code:
.summary {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
}
.profile-ava {
width: 50px;
height: 50px;
background-image: url(http://gravatar.com/avatar/3913c4e14034c0a7f28db2c632290c21?s=80);
border-radius: 3px;
background-size: 50px 50px;
display: block;
}
.summary a:hover:before {
content: '';
position: absolute;
display: block;
bottom: -10px;
left: 0;
height: 10px;
width: 100%;
z-index: 2;
}
.p-tooltip {
position: absolute;
margin-top: 10px;
top: 100%;
left: 50%;
margin-left: -140px;
width: 280px;
max-height: 120px;
border-radius: 5px;
overflow: hidden;
background-color: #F0F0F0;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.profile-header {
height: 120px;
background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500);
background-size: auto 120px;
background-position: 50%;
}
.profile-navigation {
position: absolute;
top: 0;
left: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.profile-nick {
color: #fff;
margin: 0;
padding: 0.4em 0;
font-size: 0.8em;
font-weight: bold;
}
.profile-action {
float: right;
background-color: #eee;
padding: 0.4em;
border-radius: 2px;
color: inherit;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
}
.p-tooltip .profile-ava {
margin: -40px auto 0;
width: 80px;
height: 80px;
background-size: 80px;
border: 3px solid #F0F0F0;
border-radius: 5px;
}
.profile-info {
text-align: center;
padding: 10px;
opacity: 0;
}
.profile-title {font-size: 1.6em; margin: 0;}
.profile-description {
margin: 0;
font-size: 0.8em;
}
.profile-items {margin: 0px; padding: 10px;}
.profile-items:after {
content: '';
display: table;
clear: both;
}
.profile-items li {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
float: left;
display: block;
border-radius: 3px;
}
.profile-items li:not(:first-child) {margin-left: 10px;}
.profile-items li:nth-child(1) {
background-image: url(https://o.twimg.com/1/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY);
}
.profile-items li:nth-child(2) {
background-image: url(https://pbs.twimg.com/media/B7pkXfgCIAAwoY0.jpg:thumb);
}
.profile-items li:nth-child(3) {
background-image: url(https://pbs.twimg.com/media/B7A3NHjIIAIt6eg.png:large);
}
.profile-header {
-webkit-transform: translate(0, -50px);
-moz-transform: translate(0, -50px);
transform: translate(0, -50px);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0;
}
.profile-info {
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.p-tooltip .profile-ava {
-webkit-transform: scale(0.5) translate(0, -10px);
-moz-transform: scale(0.5) translate(0, -10px);
transform: scale(0.5) translate(0, -10px);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0;
}
.profile-items li {
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
opacity: 0;
}
.profile-items li:nth-child(2) {
-webkit-transition-delay: 0.35s;
-moz-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.profile-items li:nth-child(3) {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.summary:hover .p-tooltip {
visibility: visible;
opacity: 1;
max-height: 600px;
}
.summary:hover .profile-header,
.summary:hover .profile-info,
.summary:hover .p-tooltip .profile-ava,
.summary:hover .profile-items li {
-webkit-transform: translate(0,0) scale(1);
-moz-transform: translate(0,0) scale(1);
transform: translate(0,0) scale(1);
opacity: 1;
}
Anyone can help me please!

Essentially, I've created a pretty clever workaround. It is a mask that covers the image (invisible) until the html is loaded, then the hover css takes place after the z-index is lowered. The hover javascript is on the container.
FIDDLE
.summary {
margin: -50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 0;
}
.summary-mask {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 1;
}
.loaded .summary-mask {
z-index: -1;
}
HTML
<div class="the-container">
<div class="summary-mask"></div>
<div class="summary" data-id="100">
<div class="user-container"></div>
</div>
</div>
JS
var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> Follow <p class="profile-nick"> Page Name </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>';
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
success: function (returnHtml) {
e.find('.user-container').html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});

When you are showing the card, it only contains the loading message. When the content arrives and you put it in the card, that isn't a CSS change, so the transition isn't activated.
If you wait until the content has arrives to show the card, there is something to animate.

We Keep Coding

JavaScript is the programming language of the Web.

How to to toggle a menu container when clicked on menu item - javascript

Related

CSS Transitions not working after converting from jQuery to Vanilla JS

Prevent scroll when open menu

Adding another nav item using javascript and css

changing css class and a jquery function when it reaches a div

Tumblr style UserHoverCard

Categories

Resources