Develop Reference

Responsive navbar menu (hamburger menu) doesn't open by clicking

Got a navbar but the problem is when I open (click) it on mobile phone or in responsive environment (when the hamburger menu shows up), it does not open by clicking on it, the links are not showing. Below is the code that I'm using for it. Used the necessary links but not working. Everything is fine, the only problem that is occurring is with that hamburger menu.
$('.navTrigger').click(function() {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
z-index: 1;
}
.nav div.logo {
float: left;
width: auto;
height: auto;
padding-left: 0.9rem;
}
.nav div.logo a {
text-decoration: none;
color: #fff;
}
.nav div.logo a:hover {
color: #00E676;
}
.nav div.main_list {
height: 65px;
float: right;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 2px;
padding-right: 0.9rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 80%;
font-weight: bold;
}
.nav div.main_list ul li a:hover {
color: #00b3ee;
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 1;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.navTrigger {
display: block;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
height: 0;
overflow: hidden;
}
.nav div.show_list {
height: auto;
display: none;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 100vh;
right: 0;
left: 0;
bottom: 0;
background-color: #111;
/*same background color of navbar*/
background-position: center top;
}
.nav div.main_list ul li {
width: 100%;
text-align: right;
}
.nav div.main_list ul li a {
text-align: center;
width: 100%;
font-size: 3rem;
padding: 20px;
}
.nav div.media_button {
display: block;
}
}
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: #fff;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
#-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes inM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes outM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes inT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes outT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes inBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
#-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes outBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
.affix {
padding: 0;
background-color: #111;
}
.myH2 {
text-align: center;
font-size: 4rem;
}
.myP {
text-align: justify;
padding-left: 15%;
padding-right: 15%;
font-size: 20px;
}
#media all and (max-width:700px) {
.myP {
padding: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="img" class="ha">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="chk2.png" class="hello">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS AT HEGTAVIC</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>

I have tried your code and modified in fallowing way. It is working fine.
$(document).ready(function(){
$('.navTrigger').on('click',function (){
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
});

Smooth scrolling not working when it should?

So I've been designing a website for my new market garden company. The eCommerce backend is Lemonstand. I simply want to have the arrow button at the bottom of the main image scroll to the anchor (rather than jump). You can view the website here.
I found this code on this website in response to another question:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#scroll").click(function() {
scrollToAnchor('start');
});
The HTML is:
<div id="home-image-scrollbtn" class="mt-auto"><a id="scroll" href="#start">
<i class="fas fa-arrow-circle-down"></i></a></div>
<section class="container"><a name="start"></a>
I'm loading jquery 3.3.1 from Google's CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've also tried numerous js scripts. All of them work in theory but don't seem to work on my site. What am I missing?

A small Demo , might help.
// Back to top
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$(".bck-top").addClass("show");
} else {
$(".bck-top").removeClass("show");
}
});
$(".bck-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, 800);
return false;
});
// Smooth Scroll
$(".nxt-pg").click(function(event){
$("html, body").animate({
scrollTop: $( this ).offset().top
}, 800);
event.preventDefault();
});
.for-height {
background: crimson;
height: 150vh;
}
.bck-top {
position: fixed;
right: -75px;
bottom: 35px;
background: #0e4d67;
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all .6s cubic-bezier(0.56, 0.07, 0.35, 1.99);
cursor: pointer;
z-index: 555;
}
.bck-top.show {
right: 35px;
border-radius: 0 50% 50% 50%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #797bed;
opacity: 1;
transition-property: right, transform, border-radius;
transition-duration: .6s, .6s, .5s;
transition-timing-function: cubic-bezier(0.56, 0.07, 0.35, 1.99);
transition-delay: 0s, 0s, .5s;
box-shadow: 2px 2px 6px 0px #303030;
}
.bck-top.show:hover {
border-radius: 50%;
transition: all .4s cubic-bezier(0, 2.84, 0, 1.19);
}
.nxt-pg {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
width: 40px;
height: 29px;
margin: 0 auto;
cursor: pointer;
}
.nxt-pg span,.nxt-pg span:before, .nxt-pg span:after {
display: block;
width: 40px;
height: 4px;
border-radius: 35px;
background: #fff;
animation: fadeBottom .8s cubic-bezier(0.56, 0.07, 0.35, 1.99) alternate infinite;
}
.nxt-pg:active span,.nxt-pg:active span:before, .nxt-pg:active span:after {
animation-play-state: paused;
}
.nxt-pg span {
position: relative;
margin: 0 auto;
}
.nxt-pg span:before, .nxt-pg span:after {
content: '';
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
.nxt-pg span:before {
top: 12px;
width: 30px;
animation-delay: .15s;
}
.nxt-pg span:after {
top: 24px;
width: 20px;
animation-delay: .2s;
}
#-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #009688;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #787bed;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for-height">
<a class="nxt-pg">
<span class="br-top"></span>
Click Me
</a>
</div>
<button type="button" class="bck-top">up</button>

How do I automatically have Javascript-animations (with CSS) open in a certain order?

I'm trying to create an animated envelope on my site.
Right now, the code I'm trying to use only starts the next step of the animation on click.
My question would be how I get the animations to occur automatically after a certain amount of time.
This is how the code looks right now:
Javascript:
<script type="text/javascript">
// Wait for page to load
window.onload=function(){
$(document).ready(function () {
// Hide the div
$("#card").hide();
// Show the div after 5s
$("#card").delay(5000).fadeIn(100);
});
// Add Flip Envelope Event Handler
document.getElementById('envelope_front').onclick = function(){
document.getElementById('envelope_front').classList.toggle('flipped');
document.getElementById('envelope_back').classList.toggle('flipped');
}
// Add Open Envelope Event Handler
document.getElementById('flap_outside').onclick = function(){
document.getElementById('flap_outside').classList.toggle('open');
document.getElementById('flap_inside').classList.toggle('open');
// Add Remove Card Event Handler
// This is added after "Open Envelope" so that card can't be removed
// until the envelope has been opened
document.getElementById('envelope_back_outside').onclick = function(){
document.getElementById('card').classList.toggle('removed');
return false;
}
return false;
}
// Open Card
document.getElementById('card').onclick = function(){
document.getElementById('card_outside_front').classList.toggle('open');
document.getElementById('card_inside_top').classList.toggle('open');
return false;
}
}
</script>
CSS:
<style type="text/css">
body{
background-color: #fff;
color: #666;
font-family: Futura, Helvetica, Sans-serif;
text-align: center;
-webkit-perspective: 1000;
}
#envelope{
position: relative;
width: 600px;
height: 400px;
margin: 200px auto 0 auto;
}
#envelope_front{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
z-index: 1; /* This seems required for Chrome */
background: #FFF url('images/card-sprite.png') 0px 0px;
cursor: pointer;
-webkit-transition: all 4s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg) translateZ(10px);
}
#envelope_front.flipped{
-webkit-transform: rotateY(-180deg);
}
#envelope_back{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
background: #FFF url('images/card-sprite.png') -600px -400px;
-webkit-transition: all 4s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg) translateZ(3px);
}
#envelope_back.flipped{
-webkit-transform: rotateY(0deg);
}
#flap_outside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
background: transparent url('images/card-sprite.png') -600px -200px;
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(0) translateZ(3px);
}
#flap_outside.open{
-webkit-transform: rotateX(180deg) translateZ(0);
}
#flap_inside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
background: transparent url('images/card-sprite.png') -600px 0px;
-webkit-transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(-180deg) translateY(-200px) translateZ(3px);
}
#flap_inside.open{
-webkit-transform: rotateX(0deg) translateY(-200px) translateZ(0);
}
#envelope_back_outside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
cursor: pointer;
background: transparent url('images/card-sprite.png') 0px -400px;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(2px);
}
#card{
position: absolute;
top: 10px;
left: 10px;
width: 580px;
height: 380px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(1px);
}
#card.removed{
-webkit-animation-name: remove-card;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#card_outside_front{
position: absolute;
width: 100%;
height: 100%;
background: #FFF url('images/card-sprite.png') -1800px 0px;
cursor: pointer;
-webkit-transition: all 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(0deg) translateZ(0px);
}
#card_outside_front.open{
-webkit-transform: rotateX(180deg);
}
#card_inside_top{
width: 100%;
height: 100%;
position: absolute;
background: #FFF url('images/card-sprite.png') -1210px -10px;
-webkit-transition: all 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 380px;
/* 379 is used instead of 380 to prevent any gap between the two layers (visible in Safari) */
-webkit-transform: translateZ(0px) translateY(-379px) rotateX(-180deg);
}
#card_inside_top.open{
-webkit-transform: translateZ(0px) translateY(-379px) rotateX(0deg);
}
#card_inside_bottom{
position: absolute;
width: 100%;
height: 100%;
z-index: -1; /* Hide behind #card_outside_front and #card_inside_top */
background: #FFF url('images/card-sprite.png') -1210px 390px;
}
/* Animation Keyframes for removing the card */
#-webkit-keyframes remove-card {
0% {
-webkit-transform: translateY(0px) translateZ(1px);
}
33% {
-webkit-transform: translateY(-400px) translateZ(1px);
}
67% {
-webkit-transform: translateY(-400px) translateZ(3px);
}
100% {
-webkit-transform: translateY(0px) translateZ(3px);
}
}
</style>`

You can use setTimeout with a given x delay time:
setTimeout(function() {
//put your animation code here
}, 2000);

To delay the animations in JS (and JQuery) you can use the delay function, you already are using it in some places. If you want the delay on the CSS you should apply the animation-delay property

You can use a timeout or you can use css animation-delay property without using too much javascript (I usually pick the second).

jquery combining multiple variables (elements set as vars)

I am trying to learn a bit of Javascript/JQuery for school and got stuck on something I don't quite understand.
Everything in my function "works" as I wanted it to, but it feels odd that I have to list each of my selectors on a different line in order to remove all classes from each.
I've tried .merge and .add as suggestions i read on other posts, but I couldn't make it work (possibly not implementing it right) and I was hoping someone can show me how to do it and maybe explain why something like this doesn't work:
$(menuWrapper, menuTrigger, menuIcon, contentWrapper).removeClass();
This is my entire function, along with it working(just desktop css) on jsFiddle
// JavaScript Document
function toggleNavSettings(swipeDirection) {
menuWrapper = $("#menu-wrapper");
menuIcon = $('#menu-icon');
menuTrigger = $("#menu-trigger-wrapper");
contentWrapper = $("#custom-wrapper");
if(menuWrapper.width() > 199){//if nav expanded
if($( document ).width() > 480){//if screen is not mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-collapsed");//collapse the emenu
menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
menuIcon.addClass("open-d");
contentWrapper.addClass("closed-d");//collapse the content pane
}
else{//if screen is Mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-collapsed-m");//expand menu for desktop
menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
menuIcon.addClass("open-d");
contentWrapper.addClass("closed-d");
}
}
else{//if NAV is collapsed
if($( document ).width() > 480){//if screen is not mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-expanded");//expand menu
contentWrapper.addClass("open-m");//expand the content pane
}
else{//if window screen is MOBILE
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-expanded-m");//expand the menu
menuTrigger.addClass("menu-trigger-wrapper-m-open");//swing the trigger
menuIcon.addClass("open-m");
contentWrapper.addClass("open-d");//expand the content pane
}
}
}
$(document).ready(function() {
var menuTrigger = $("#menu-trigger-wrapper");
menuTrigger.click(function() {
toggleNavSettings(null);
});
});
https://jsfiddle.net/o5ogex6q/1/
Thanks in advance!

You could use something like this
$('#menu-wrapper, #menu-icon, #menu-trigger-wrapper, #custom-wrapper').removeClass();
EDIT
You can keep your variables and use following syntax object.selector to get the ID value. The only "messy" thing are the string commas.
$(menuWrapper.selector+","+ menuTrigger.selector+","+menuIcon.selector+","+ contentWrapper.selector).removeClass();

This is riding the line of a duplicate question to: How to combine two jQuery results
One slight difference is you'd have to pass each collection individually, eg:
var allMenuObjects = menuWrapper.add(menuIcon).add(menuTrigger).add(contentWrapper);
Hopefully this helps and I appreciate your efforts in understanding how to use jQuery efficiently. (eg without engaging the selector engine repeatedly)

Try the below code,
You can use toggleClass
Find more information about toggleClass
function toggleNavSettings(swipeDirection) {
menuWrapper = $("#menu-wrapper");
menuIcon = $('#menu-icon');
menuTrigger = $("#menu-trigger-wrapper");
contentWrapper = $("#custom-wrapper");
if ($(document).width() > 480) { //if screen is not mobile
menuWrapper.toggleClass("menu-collapsed");
menuTrigger.toggleClass("menu-trigger-wrapper-d-closed");
menuIcon.toggleClass("open-d");
contentWrapper.toggleClass("closed-d");
} else { //if screen is Mobile
menuWrapper.toggleClass("menu-collapsed-m");
menuTrigger.toggleClass("menu-trigger-wrapper-d-closed");
menuIcon.toggleClass("open-d");
contentWrapper.toggleClass("closed-d");
}
}
$(document).ready(function() {
var menuTrigger = $("#menu-trigger-wrapper");
menuTrigger.click(function() {
toggleNavSettings(null);
});
});
#charset"utf-8";
/* CSS Document */
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #121212;
color: #00c4e2;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.template-wrapper {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#custom-wrapper,
#custom-wrapper.open-d {
padding-left: 210px;
transition: all 0.4s;
}
#custom-wrapper.closed-d {
padding-left: 10px;
}
.content-page {
position: relative!important;
}
#menu-wrapper {
background: url(../images/menu_pattern_1.png);
background-repeat: repeat;
border-right: #00c4e2 10px solid;
position: fixed;
display: block;
top: 0;
left: 0;
width: 200px;
overflow-y: auto;
height: 100%;
transition: all 0.4s;
z-index: 1001;
}
.menu-expanded {
width: 200px;
}
.menu-collapsed {
width: 0px!important;
}
.menu-collapsed-m {
width: 0px!important;
}
.menu-wrapper.scroll {
width: 210px;
border-right: none;
}
#menu-trigger-wrapper {
transition: all 0.4s;
position: fixed;
display: block;
top: 0px;
left: 209px;
background: #00c4e2;
width: 48px;
height: 48px;
color: #fff;
cursor: pointer;
z-index: 1002;
}
.menu-trigger-wrapper-d-closed {
left: 9px!important;
}
.menu-trigger {
width: 100%;
height: 100%;
position: relative;
}
/*MENU ANIMATIONS*/
/* Icon 1 */
#menu-icon {
width: 86%;
height: 100%;
position: relative;
margin: 10px 0px 0px 1px;
-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;
cursor: pointer;
}
#menu-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-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;
}
#menu-icon span:nth-child(1) {
top: 0px;
}
#menu-icon span:nth-child(1),
#menu-icon.open-d span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#menu-icon span:nth-child(2) {
opacity: 0;
top: 12px;
}
#menu-icon.open-d span:nth-child(1) {
opacity: 100;
}
#menu-icon span:nth-child(3),
#menu-icon.open-d span:nth-child(3),
#menu-icon.open-m span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menu-icon.open-d span:nth-child(1) {
top: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
}
#menu-icon.open-d span:nth-child(2) {
top: 12px;
opacity: 100;
}
#menu-icon.open-d span:nth-child(3) {
top: 24px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
}
.content-page {
margin-left: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-trigger-wrapper">
<div id="menu-icon"> <span></span>
<span></span>
<span></span>
</div>
</div>
<div id="menu-wrapper" data-mcs-theme="inset">
<div class="menu-container"> Link 1
<br> Link 2
<br> Link 3
<br>
</div>
</div>
<div id="custom-wrapper">blah blah</div>

Flip of the tile

Hi I am implementing the flip of the tile once it is get zoom.
I am unable to add the css to the new class which I am adding in the jquery.
i need some help regarding this. Use Case is once you hover on the tile it will get zoom then I am adding a new class on click of the tile and I am adding css for that but it is not working. initially i need to show the front text, once I clicked on the tile then the front text should get hide and the back text to be visible and vise versa.
This is what I have tried:
HTML:
<div class="boxes">
<div class="box">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
Css:
.boxes {
-webkit-transform: translateZ(0);
position: relative;
width: 600px;
height: 700px;
top: 0px;
}
.box {
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
width: 140px;
height: 140px;
font-family: Helvetica, sans-serif;
text-align: center;
padding: 13px 10px;
margin: 0 5px;
background-color: #fefefe;
background: -moz-linear-gradient(90deg, #eee, #fff, #eee);
background: -webkit-gradient(linear, left top, left bottom, from(#eee),
color-stop(0.5, #fff), to(#eee) );
border: 3px solid #e1e1e1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 15px;
cursor: pointer;
}
.box:hover {
border-color: #e1e1e1;
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), color-stop(0.5, #fff), to(#e1e1e1));
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.flip {
-webkit-transform: rotatex(-180deg)!important;
}
.front {
z-index: 1;
cursor: pointer;
}
.back {
-webkit-transform: rotatex(-180deg);
color: black;
cursor: pointer;
}
JQuery:
$('.box').click(function(e){
alert('hai');
$(this).addClass('flip').mouseleave(function(){
$(this).removeClass('flip');
});
});
Demo Link

look at this code: DEMO
I added some class and change in your html and css:
CSS:
.box-container{
width:166px;
height:172px;
}
.box-container .box.clicked .back{
opacity:1;
}
.box-container .box.clicked .front{
opacity:0;
}
.box-container .box.clicked{
-webkit-transform:scaleY(-1);
}
.face{
transition: all 0.5s linear;
}
JQuery:
$(".box").click(function(){
$(this).toggleClass("clicked");
});

I did some modifications on your JSFiddle, see this fork: http://jsfiddle.net/u3z6Y/6/
Basically what I do is
Applying a class on the wrapper instead of the box to be able to target the flipped versions of front and back:
$('.box').click(function(e){
$('.boxes').toggleClass('flip');
// ..
});
Targeting both the flipped and the non-flipeed version from CSS:
.front {
z-index: 1;
cursor: pointer;
-webkit-transform: rotatex(0deg)!important;
}
.back {
-webkit-transform: rotatex(-180deg);
color: black;
cursor: pointer;
}
.flip .front {
-webkit-transform: rotatex(-180deg)!important;
}
.flip .back {
-webkit-transform: rotatex(0deg)!important;
}