Thomas Whitaker Thomas Whitaker -3 years ago 56
CSS Question

Pop up mobile menu not working

Having issues with the mobile menu for a site. Opening and closing animation of the background is no worries, gets the information up there, whenever I am testing and click on one of the links it just closes the animation and nothing happens. Also cant get the close animation of the text to work properly.

I have the codepen of just the menu attached below.

<div class="circle"></div>
<div class="menu">
<ul>
<li><a href="turf-home.html">Products</a></li>
<li><a href="turf-about-us.html">About Us</a></li>
<li><a href="turf-contact-us.html">Get In Contact</a></li>
<li><a class="golf" href="golf-home.html">Home</a></li>
</div>

<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
<div class="menu-circle">
</div>

div.burger {
height: 60px;
width: 60px;
position: fixed;
bottom: 30px;
left: 26px;
cursor: pointer;
z-index: 25;
}
/* Circle Border */
.menu-circle {
z-index: 20;
width: 70px;
height: 70px;
border-radius: 50%;
border: solid 2px white;
position: fixed;
bottom: 11px;
left: 10px;
background-color: #129d49;
-webkit-box-shadow: 0px 15px 18px -4px #1b1b1b;
-moz-box-shadow: 0px 15px 18px -4px #1b1b1b;
-ms-box-shadow: 0px 15px 18px -4px #1b1b1b;
-o-box-shadow: 0px 15px 18px -4px #1b1b1b;
box-shadow: 0px 15px 18px -4px #1b1b1b;
}
/* Individual Bars */
div.x, div.y, div.z {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
background: white;
border-radius: 1px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
/* Individual Sizing and Position */
div.x, div.y, div.z {
height: 8px;
width: 42px;
}
div.x {
bottom: -57px;
}
div.y {
bottom: -24px;
}
div.z {
bottom: 10px;
}
/* Part of JS to Close menu */
div.colapse {
top: 20px;
background: #4a89dc;
-webkit-transition: all 70ms ease-out;
-moz-transition: all 70ms ease-out;
-ms-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
/* Part of JS menu animations */
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
/* Part of JS menu animations */
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
/* Part of JS menu animations */
div.rotate45 {
bottom: -23px;
left: -9px;
width: 60px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
/* Part of JS menu animations */
div.rotate135 {
bottom: -24px;
left: -10px;
width: 60px;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
/* Pop-up menu background */
div.circle {
border-radius: 50%;
width: 0px;
height: 0px;
position: fixed;
bottom: 11px;
left: 10px;
background: #129d49;
opacity: 1;
-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition-delay: 800ms;
z-index: 1;
}
/* Part of JS menu Pop-up animations */
div.circle.expand {
width: 1040px;
height: 1250px;
bottom: -860px;
left: -565px;
-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Enclosing div of whole menu */
.menu-forward {
z-index: 100;
visibility: visible !important;
}
div.menu {
height: 242px;
width: 450px;
position: fixed;
bottom: 88px;
left: 0px;
visibility: hidden;
}
/* Menu + Contents */
div.menu ul li {
list-style: none;
position: absolute;
top: auto;
left: auto;
opacity: 0;
width: 100%;
text-align: center;
font-size: 0px;
-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Menu Content Text */
div.menu ul li a {
height: 60px;
line-height: 60px;
display: block;
font-family: arial, sans-serif;
color: white;
text-align: left;
margin-left: -18px;
bottom: 0;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
letter-spacing: 1px;
transition-delay: 40ms;
z-index: 101;
}
div.menu li.animate {
font-size: 20px;
opacity: 1;
margin-left: 5px;
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 100;
}
div.menu li.animate:nth-of-type(1) {
position: absolute;
bottom: 134px;
width: 180px;
transition-delay: 0.0s;
z-index: 100;
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.menu li.animate:nth-of-type(2) {
position: absolute;
bottom: 193px;
width: 180px;
transition-delay: 0.01s;
z-index: 100;
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.menu li.animate:nth-of-type(3) {
position: absolute;
bottom: 76px;
width: 280px;
transition-delay: 0.02s;
z-index: 100;
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.menu li.animate:nth-of-type(4) {
position: absolute;
bottom: 17px;
width: 280px;
transition-delay: 0.03s;
z-index: 100;
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

if ("ontouchstart" in window) {
var click = "touchstart";
} else {
var click = "click";
}

$("div.burger").on(click, function() {
if (!$(this).hasClass("open")) {
openMenu();
} else {
closeMenu();
}
});

$("div.menu ul li a").on(click, function(e) {
e.preventDefault();
closeMenu();
});

function openMenu() {
$("div.circle").addClass("expand");

$("div.burger").addClass("open");
$("div.x, div.y, div.z").addClass("collapse");
$(".menu li").addClass("animate");

setTimeout(function() {
$("div.y").hide();
$("div.x").addClass("rotate30");
$("div.z").addClass("rotate150");
}, 70);
setTimeout(function() {
$("div.x").addClass("rotate45");
$("div.z").addClass("rotate135");
}, 120);
$("div.menu").addClass("menu-forward");
}

function closeMenu() {
$("div.burger").removeClass("open");
$("div.x").removeClass("rotate45").addClass("rotate30");
$("div.z").removeClass("rotate135").addClass("rotate150");
$("div.circle").removeClass("expand");
$(".menu li").removeClass("animate");

setTimeout(function() {
$("div.x").removeClass("rotate30");
$("div.z").removeClass("rotate150");
}, 50);
setTimeout(function() {
$("div.y").show();
$("div.x, div.y, div.z").removeClass("collapse");
}, 70);
$("div.menu").removeClass("menu-forward");
}

Answer Source

I put it in this form so others can see. Well your links aren't working because you have

$("div.menu ul li a").on(click, function(e) {
    e.preventDefault();
    closeMenu();
});

Which is preventing the click action to go to a new page. What is supposed to happen when you click the links?

Edit: I changed it so that if you want the menu to close and then go to the link, it does that now.

if ("ontouchstart" in window) {
  var click = "touchstart";
} else {
  var click = "click";
}

$("div.burger").on(click, function() {
  if (!$(this).hasClass("open")) {
    openMenu();
  } else {
    closeMenu();
  }
});

$("div.menu ul li a").on(click, function(e) {
  e.preventDefault();
  closeMenu();
  setTimeout(function() {
  window.location.href = $(this).attr('href');
}, 2000);
});

function openMenu() {
  $("div.circle").addClass("expand");

  $("div.burger").addClass("open");
  $("div.x, div.y, div.z").addClass("collapse");
  $(".menu li").addClass("animate");

  setTimeout(function() {
    $("div.y").hide();
    $("div.x").addClass("rotate30");
    $("div.z").addClass("rotate150");
  }, 70);
  setTimeout(function() {
    $("div.x").addClass("rotate45");
    $("div.z").addClass("rotate135");
  }, 120);
  $("div.menu").addClass("menu-forward");
}

function closeMenu() {
  $("div.burger").removeClass("open");
  $("div.x").removeClass("rotate45").addClass("rotate30");
  $("div.z").removeClass("rotate135").addClass("rotate150");
  $("div.circle").removeClass("expand");
  $(".menu li").removeClass("animate");

  setTimeout(function() {
    $("div.x").removeClass("rotate30");
    $("div.z").removeClass("rotate150");
  }, 50);
  setTimeout(function() {
    $("div.y").show();
    $("div.x, div.y, div.z").removeClass("collapse");
  }, 70);
  $("div.menu").removeClass("menu-forward");
}
div.burger {
  height: 60px;
  width: 60px;
  position: fixed;
  bottom: 30px;
  left: 26px;
  cursor: pointer;
  z-index: 25;
}
/* Circle Border */
.menu-circle {
  z-index: 20;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: solid 2px white;
  position: fixed;
  bottom: 11px;
  left: 10px;
  background-color: #129d49;
  -webkit-box-shadow: 0px 15px 18px -4px #1b1b1b;
  -moz-box-shadow: 0px 15px 18px -4px #1b1b1b;
  -ms-box-shadow: 0px 15px 18px -4px #1b1b1b;
  -o-box-shadow: 0px 15px 18px -4px #1b1b1b;
  box-shadow: 0px 15px 18px -4px #1b1b1b;
}
/* Individual Bars */
div.x, div.y, div.z {
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  background: white;
  border-radius: 1px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -ms-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
/* Individual Sizing and Position */
div.x, div.y, div.z {
  height: 8px;
  width: 42px;
}
div.x {
  bottom: -57px;
}
div.y {
  bottom: -24px;
}
div.z {
  bottom: 10px;
}
/* Part of JS to Close menu */
div.colapse {
  top: 20px;
  background: #4a89dc;
  -webkit-transition: all 70ms ease-out;
  -moz-transition: all 70ms ease-out;
  -ms-transition: all 70ms ease-out;
  -o-transition: all 70ms ease-out;
  transition: all 70ms ease-out;
}
/* Part of JS menu animations */
div.rotate30 {
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-transition: all 50ms ease-out;
  -moz-transition: all 50ms ease-out;
  -ms-transition: all 50ms ease-out;
  -o-transition: all 50ms ease-out;
  transition: all 50ms ease-out;
}
/* Part of JS menu animations */
div.rotate150 {
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
  -webkit-transition: all 50ms ease-out;
  -moz-transition: all 50ms ease-out;
  -ms-transition: all 50ms ease-out;
  -o-transition: all 50ms ease-out;
  transition: all 50ms ease-out;
}
/* Part of JS menu animations */
div.rotate45 {
  bottom: -23px;
  left: -9px;
  width: 60px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
/* Part of JS menu animations */
div.rotate135 {
  bottom: -24px;
  left: -10px;
  width: 60px;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
/* Pop-up menu background */
div.circle {
  border-radius: 50%;
  width: 0px;
  height: 0px;
  position: fixed;
  bottom: 11px;
  left: 10px;
  background: #129d49;
  opacity: 1;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: 800ms;
  z-index: 1;
}
/* Part of JS menu Pop-up animations */
div.circle.expand {
  width: 1040px;
  height: 1250px;
  bottom: -860px;
  left: -565px;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Enclosing div of whole menu */
.menu-forward {
  z-index: 100;
  visibility: visible !important;
}
div.menu {
  height: 242px;
  width: 450px;
  position: fixed;
  bottom: 88px;
  left: 0px;
  visibility: hidden;
}
/* Menu + Contents */
div.menu ul li {
  list-style: none;
  position: absolute;
  top: auto;
  left: auto;
  opacity: 0;
  width: 100%;
  text-align: center;
  font-size: 0px;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Menu Content Text */
div.menu ul li a {
  height: 60px;
  line-height: 60px;
  display: block;
  font-family: arial, sans-serif;
  color: white;
  text-align: left;
  margin-left: -18px;
  bottom: 0;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 1px;
  transition-delay: 40ms;
  z-index: 101;
}
div.menu li.animate {
  font-size: 20px;
  opacity: 1;
  margin-left: 5px;
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 100;
}
div.menu li.animate:nth-of-type(1) {
  position: absolute;
  bottom: 134px;
  width: 180px;
  transition-delay: 0.0s;
  z-index: 100;
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.menu li.animate:nth-of-type(2) {
  position: absolute;
  bottom: 193px;
  width: 180px;
  transition-delay: 0.01s;
  z-index: 100;
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.menu li.animate:nth-of-type(3) {
  position: absolute;
  bottom: 76px;
  width: 280px;
  transition-delay: 0.02s;
  z-index: 100;
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.menu li.animate:nth-of-type(4) {
  position: absolute;
  bottom: 17px;
  width: 280px;
  transition-delay: 0.03s;
  z-index: 100;
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>
    <div class="menu">
    <ul>
    <li><a href="turf-home.html">Products</a></li>
    <li><a href="turf-about-us.html">About Us</a></li>
    <li><a href="turf-contact-us.html">Get In Contact</a></li>
    <li><a class="golf" href="golf-home.html">Home</a></li>
    </div>

    <div class="burger">
    <div class="x"></div>
    <div class="y"></div>
    <div class="z"></div>
    </div>
    <div class="menu-circle">
    </div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download