导航叠加汉堡菜单单击问题

时间：2018-09-21 09:30:06

标签： javascript jquery html css navigation

我构建了一个汉堡导航，当单击该导航时，会将导航元素覆盖在全屏彩色背景上。

我有一些小错误，无法解决自己的错误或解决方法。

  1. 当您单击汉堡包图标并显示覆盖图时，如果您单击背景色上的任意位置，则覆盖图将关闭。除非单击链接或关闭图标/按钮，否则如何保持覆盖层可见？

  2. 单击链接时，覆盖层消失（按预期方式），但在一秒钟后再次返回。单击时如何停止此“闪烁”，所以我可以保持覆盖显示直到加载新页面，或者单击后隐藏覆盖。

$(document).ready(function() {
  $(".menu-btn a").click(function() {
    var scroll = $(window).scrollTop();
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');

    if ($(this).hasClass('btn-close')) {
      $(".navbar").css("background-color", "grey");
    } else if (scroll > 100) {
      $(".navbar").css("background-color", "#CEB400");
    }
  });

  $('.overlay').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
  });

  $('.menu a').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
  });

});

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 100) {
      if ($('.overlay:visible').length == 0) {
        $(".navbar").css("background-color", "#CEB400");
      }
    } else {
      $(".navbar").css("background-color", "grey");
    }
  });
});
/* OPEN / CLOSE BTNS */

.menu-btn {
  z-index: 999;
  display: inline;
  /* font-size: 32px; */
}

.menu-btn a {
  display: flex;
  text-decoration: none;
  color: #ffffff;
  /* safari hack */
  align-items: center;
}

.btn-open:after {
  color: inherit;
  content: "\f394";
  font-family: "Ionicons";
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition-property: all .2s linear 0s;
  font-size: 40px;
}

.btn-open:hover:after {
  color: inherit;
}

.btn-close:after {
  color: inherit;
  content: "\f2d7";
  font-family: "Ionicons";
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition-property: all .2s linear 0s;
  font-size: 40px;
}

.btn-close:hover:after {
  color: #ffffff;
}

.template-home .btn-open:after,
.template-home .btn-open:hover:after,
.template-home .btn-close:after,
.template-home .btn-close:hover:after,
.template-home .menu-btn a span {
  color: #ffffff!important;
}


/* OVERLAY */

.overlay {
  position: fixed;
  top: 0;
  z-index: 99;
  display: none;
  overflow: auto;
  width: 100%;
  height: 100%;
  background: rgba(209, 180, 0);
}

.overlay .menu {
  margin: 150px 20px;
  /* width: 80%; */
}

.overlay .menu ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

.overlay .menu ul li {
  float: left;
  padding: 6px 0 0 0;
  width: 100%;
  list-style: none;
  text-align: left;
  text-transform: uppercase;
}

.overlay .menu ul li#social {
  width: 100%;
  margin-top: 50px;
}

.overlay .menu ul li a {
  color: #d1b400;
  font-weight: 300;
  font-size: 20px;
  font-family: 'Old Standard TT', serif;
}

.overlay .menu ul li#social a {}

.overlay .menu ul ul {
  margin-top: 20px;
}

.overlay .menu ul ul li {
  position: relative;
  float: none;
  margin: 10px 0;
  width: 100%;
  border: 0;
}

.overlay .menu ul ul li a {
  color: #fff;
  text-transform: capitalize;
  font-weight: 300;
  font-size: 30px;
}

.overlay .menu ul ul li a:hover {
  color: #000000;
}


/* RESPONSIVE */

@media screen and (max-width: 768px) {
  .overlay .menu ul li {
    float: none;
    margin-bottom: 25px;
    width: 100%;
  }
  .overlay .menu ul li:last-child {
    border: 0;
  }
  .overlay .menu ul ul {
    margin-top: 20px;
  }
  .menu-btn {
    right: 25px;
  }
}

.allexamples {
  position: absolute;
  bottom: 0;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  background: #e9e9e9;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #333;
  position: fixed;
}

.menu-social {
  display: inline-block;
  margin: 0 .4em;
}

.menu-social a {
  width: 44px;
  height: 44px;
  padding: 0;
  background-image: url("../img/cd-socials.svg");
  background-repeat: no-repeat;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.menu-social .menu-facebook a {
  background-position: 0 0;
}

.menu-social .menu-instagram a {
  background-position: -44px 0;
}

.menu-social .menu-dribbble a {
  background-position: -88px 0;
}

.menu-social .menu-twitter a {
  background-position: -132px 0;
}

.overlay .menu ul ul li.description {
  padding: 0px 0 10px 0px;
}

.overlay .menu ul ul li.description span {
  color: #000000;
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
}

p.tel,
p.email {
  margin: 0 0 3px 0;
}

p.tel a {
  color: #fff!important;
  font-weight: 300!important;
  font-size: 20px!important;
  letter-spacing: 1px;
}

p.email a {
  color: #fff!important;
  font-weight: 300!important;
  font-size: 20px!important;
  text-transform: none;
}

.menu-btn a span {
  font-size: 16px;
  color: #ffffff;
  /* line-height: 18px; */
  font-weight: 600;
  position: relative;
  /* top: -5px; */
  right: 10px;
}

.navbar-text div {
  display: inline-block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.header-contact svg {
  margin-left: 10px;
  font-size: 22px;
}

.header-contact {
  margin-right: 75px;
}

.header-contact a {
  color: #ffffff;
}

.header-contact {
  font-weight: 600!important;
  font-size: 16px!important;
}

.navbar {
  -webkit-transition: background-color 500ms ease-in-out;
  -ms-transition: background-color 500ms ease-in-out;
  transition: background-color 500ms ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
  <nav class="navbar fixed-top" style="background-color: grey;">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="img/pb-white.png" width="30" height="30" alt="">
      </a>
      <span class="navbar-text">
        <div class="menu-btn">
          <a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
        </div>
      </span>
    </div>
  </nav>
</header>
<div class="overlay">
  <div class="menu">
    <div class="container">
      <ul>
        <li>
          <ul>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
            <li><a href="#">Heading</a></li>
            <li class="description"><span>Point, Point, Point, Point</span></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href="#">Heading</a></li>
            <li><a href="#">Heading</a></li>
            <li><a href="#">Heading</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

<div style="height:2000px;"></div>

我目前在这里使用代码笔：https://codepen.io/whitinggg/pen/bLzxGG

2 个答案:

答案 0 :(得分：1)

要解决两个问题：

您需要删除叠加层的onClick事件，即这些行：

$('.overlay').on('click', function () {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});

当您点击叠加层时，这将停止触发事件。

然后解决了您的第一个问题，而第二个问题是，通过单击链接，还单击了包含链接的叠加层，因此事件被触发了两次，叠加层淡入淡出，创建了眨眼效果。

答案 1 :(得分：1)

只需从脚本中删除此行代码

$('.overlay').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
相关问题
最新问题