弹出移动菜单无法正常工作

时间：2017-06-13 05:30:29

标签： javascript html css web

网站的移动菜单出现问题。打开和关闭背景动画不用担心，在那里获取信息，每当我测试并点击其中一个链接时它就会关闭动画并且没有任何反应。也无法使文本的近似动画正常工作。

我只有下面附带的菜单。 

  <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");
}

1 个答案:

答案 0 :(得分：1)

我把它放在这种形式，以便其他人可以看到。那么你的链接没有用，因为你有

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

这阻止了点击操作转到新页面。单击链接时会发生什么？

修改 我改变它，以便如果你想关闭菜单然后转到链接，它现在就这样做。

＆＃13;
＆＃13; 
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");
}
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题