手机导航问题

Question

我的移动导航背景在关闭时呈现在页面元素前面时出现问题，导致页面上的所有功能失效。

我将其简单版本与无序列表放在一起，以演示该问题。

它与类.nav-background有关。我在某处做错了事，但无法弄清楚是什么...

希望有人可以注意到这个问题。

$("a#toggle").on('click', function(e) {
  $('body').toggleClass('js-open');
  $('nav').toggleClass('js-open');
  e.preventDefault();
});

$(".nav-background").on('click', function() {
  $('body, nav').removeClass('js-open');
});

/***MOBILE NAV***/

@media (min-width: 45em) {
  body {
    font-size: 120%;
  }
}

@media (min-width: 65em) {
  body {
    font-size: 130%;
  }
}

@media (min-width: 85em) {
  body {
    font-size: 150%;
  }
}

a {
  text-decoration: none;
}

header {
  position: fixed;
  width: 100%;
  background: #fff;
  display: block;
  top: 0;
  padding: 0;
  z-index: 8;
  height: 3.5em;
}

#logo {
  margin: 0 !important;
  position: absolute;
  top: 0;
  display: inline-block;
  vertical-align: middle;
  float: left;
  padding: .2em 0 .2em .5em;
}

#logo img {
  max-height: 3em;
}

header * {
  background-repeat: no-repeat;
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

header nav p {
  font-size: 80%;
  color: #12384E;
  margin: 0 0 -1em;
  padding: 0;
  font-weight: 400;
}

header nav ul {
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  visibility: hidden;
  top: -5%;
  width: 100%;
  padding: 0;
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
  -webkit-transform: perspective(600px) rotateX(10deg);
  transform: perspective(600px) rotateX(10deg);
  -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
}

header nav ul li {
  list-style: none;
  text-align: center;
}

header nav ul li a {
  display: block;
  color: #000;
  padding: .5em 0;
  width: 100%;
  display: block;
  font-size: 200%;
  font-weight: 400;
}

header nav ul li a:hover {
  background: rgba(255, 255, 255, 0.8);
}

header nav ul li a:focus {
  outline: 0;
}

header nav ul li a:hover,
header nav ul li a:active {
  color: #0e1718 !important;
}

header .nav-background {
  z-index: 99;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
  display: table;
  -webkit-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  -moz-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  -o-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
}

header #toggle {
  height: 3em;
  z-index: 999;
  padding: 1.5em 1em 0;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: .5em;
  -webkit-transition: padding-top 0.6s cubic-bezier(0.1, 0.01, 0.3, 1);
  transition: padding-top 0.6s cubic-bezier(0.1, 0.01, 0.3, 1);
}

header #toggle:hover {
  transition: top, 0.5s, ease-in-out;
}

header #toggle:hover .menubars:before {
  top: -9px;
}

header #toggle:hover .menubars:after {
  top: 9px;
}

.menubars {
  width: 24px;
  height: 4px;
  margin: 10px 0;
  background: #000;
  position: relative;
  z-index: 999 !important;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menubars:before {
  top: -8px;
}

.menubars:after {
  top: 8px;
}

.menubars:after,
.menubars:before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: #EC008C;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menubars {
  width: 24px;
  height: 4px;
  margin: .2em 0;
  background: #000;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menubars:before {
  top: -8px;
}

.menubars:after {
  top: 8px;
}

.menubars:after,
.menubars:before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: #000;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.js-open {
  height: 100%;
}

.js-open header {
  margin-top: 0px;
  background: none;
}

.js-open .menubars {
  background: none !important;
}

.js-open .menubars:after {
  top: 0 !important;
  background: #000 !important;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.js-open .menubars:before {
  top: 0 !important;
  background: #000 !important;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.js-open .nav-background {
  background: rgba(27, 128, 167, 0.9) !important;
}

.js-open ul {
  top: 0;
  visibility: visible;
  opacity: 1;
  margin-top: 0;
  -webkit-transform: perspective(600px) rotateX(0deg);
  -moz-transform: perspective(600px) rotateX(0deg);
  -ms-transform: perspective(600px) rotateX(0deg);
  -o-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
}

.mobile-shopping-bag {
  text-align: center;
  float: right;
  font-size: 24px;
  padding: .5em .5em .5em 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="margin-top: 5em;">
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
</ul>

<!---MOBILE TABLET NAV--->
<section id="mobile-nav">
  <!-- Logo -->

  <header id="mast" class="">

    <div id="logo">
      <img src="https://cdn.shopify.com/s/files/1/0063/1360/7266/files/logoblack.png?14544251487220134235" alt="logo">
      <div class="mobile-shopping-bag"><i class="fa fa-shopping-bag"></i></div>
    </div>

    <!-- Main Nav-->
    <a id="toggle" href="#">
      <div class="menubars"></div>
    </a>
    <nav>
      <div class="nav-background">
        <ul>
          <li>
            <p>Introducing...</p>
            <a href="">Home</a>
          </li>
          <li>
            <p>Who we are, what we do</p>
            <a href="#">About Us</a>
          </li>
          <li>
            <p>What we think</p>
            <a href="#">The Blog</a></li>

          <li>
            <p>Get to know us</p>
            <a href="#">Meet Us</a></li>
          <li>
            <p>Let's talk</p>
            <a href="#">Join Us</a></li>
        </ul>
      </div>
    </nav>
  </header>
</section>

Answer 1

这是因为您的导航背景仅被隐藏，但是由于z索引（see the difference between visibility hidden and display none for more info），它仍然位于所有元素上

将此添加到您的CSS：

header nav {overflow: hidden;}
header nav.js-open {overflow: visible;}
header .nav-background { position: absolute;}

$("a#toggle").on('click', function(e) {
$('body').toggleClass('js-open');
$('nav').toggleClass('js-open');
    e.preventDefault();
});

$(".nav-background").on('click', function() {
  $('body, nav').removeClass('js-open');
});

/***MOBILE NAV***/


@media (min-width: 45em) {
  body {
    font-size: 120%;
  }
}
@media (min-width: 65em) {
  body {
    font-size: 130%;
  }
}
@media (min-width: 85em) {
  body {
    font-size: 150%;
  }
}

a {
  text-decoration: none;
}

header {
  position: fixed;
  width: 100%;
  background: #fff;
  display: block;
  top: 0;
  padding: 0;
  z-index: 8;
  height: 3.5em;
}
#logo {
  margin: 0 !important;
  position: absolute;
  top: 0;
  display: inline-block;
  vertical-align: middle;
  float: left;
  padding: .2em 0 .2em .5em;
}

 #logo img {
    max-height: 3em;
  }  

header * {
  background-repeat: no-repeat;
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
header nav p {
  font-size: 80%;
  color: #12384E;
  margin: 0 0 -1em;
  padding: 0;
  font-weight: 400;
}
header nav ul {
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  visibility: hidden;
  top: -5%;
  width: 100%;
  padding: 0;
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
  -webkit-transform: perspective(600px) rotateX(10deg);
  transform: perspective(600px) rotateX(10deg);
  -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
}
header nav ul li {
  list-style: none;
  text-align: center;
}
header nav ul li a {
  display: block;
  color: #000;
  padding: .5em 0;
  width: 100%;
  display: block;
  font-size: 200%;
  font-weight: 400;
}
header nav ul li a:hover {
  background: rgba(255, 255, 255, 0.8);
}
header nav ul li a:focus {
  outline: 0;
}
header nav ul li a:hover, header nav ul li a:active {
  color: #0e1718 !important;
}
header .nav-background {
  z-index: 99;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
  display: table;
  -webkit-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  -moz-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  -o-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
}
header #toggle {
  height: 3em;
  z-index: 999;
  padding: 1.5em 1em 0;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: .5em;
  -webkit-transition: padding-top 0.6s cubic-bezier(0.1, 0.01, 0.3, 1);
  transition: padding-top 0.6s cubic-bezier(0.1, 0.01, 0.3, 1);
}
header #toggle:hover {
  transition: top, 0.5s, ease-in-out;
}
header #toggle:hover .menubars:before {
  top: -9px;
}
header #toggle:hover .menubars:after {
  top: 9px;
}

.menubars {
  width: 24px;
  height: 4px;
  margin: 10px 0;
  background: #000;
  position: relative;
  z-index: 999 !important;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.menubars:before {
  top: -8px;
}
.menubars:after {
  top: 8px;
}
.menubars:after, .menubars:before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: #EC008C;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menubars {
  width: 24px;
  height: 4px;
  margin: .2em 0;
  background: #000;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.menubars:before {
  top: -8px;
}
.menubars:after {
  top: 8px;
}
.menubars:after, .menubars:before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: #000;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.js-open {
  height: 100%;
}
.js-open header {
  margin-top: 0px;
  background: none;
}
.js-open .menubars {
  background: none !important;
}
.js-open .menubars:after {
  top: 0 !important;
  background: #000 !important;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.js-open .menubars:before {
  top: 0 !important;
  background: #000 !important;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.js-open .nav-background {
  background: rgba(27, 128, 167, 0.9) !important;
}
.js-open ul {
  top: 0;
  visibility: visible;
  opacity: 1;
  margin-top: 0;
  -webkit-transform: perspective(600px) rotateX(0deg);
  -moz-transform: perspective(600px) rotateX(0deg);
  -ms-transform: perspective(600px) rotateX(0deg);
  -o-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
}

.mobile-shopping-bag {
  text-align: center;
  float: right;
  font-size: 24px;
  padding: .5em .5em .5em 1em;
}

header nav {overflow: hidden;}
header nav.js-open {overflow: visible;}
header .nav-background { position: absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="margin-top: 5em;">
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
</ul>

<!---MOBILE TABLET NAV--->
<section id="mobile-nav">
<!-- Logo -->

<header id="mast" class="">

  	<div id="logo">
  	  <img src="https://cdn.shopify.com/s/files/1/0063/1360/7266/files/logoblack.png?14544251487220134235" alt="logo">
      <div class="mobile-shopping-bag"><i class="fa fa-shopping-bag"></i></div>
  </div>

<!-- Main Nav-->
<a id="toggle" href="#"><div class="menubars"></div></a>
<nav>
		<div class="nav-background">
			<ul>
			   <li>
			   <p>Introducing...</p>
           <a href="">Home</a>
			   </li>
			   <li>
			   <p>Who we are, what we do</p>
			   <a href="#">About Us</a>
			   </li>
			   <li>
			   <p>What we think</p>
			   <a href="#">The Blog</a></li>
			   
			   <li>
			   <p>Get to know us</p>
			   <a href="#">Meet Us</a></li>
			   <li>
			   <p>Let's talk</p>
			   <a href="#">Join Us</a></li>
			</ul>  
	</div>
</nav>
</header>
</section>

Answer 2

要解决此问题并且仍然使用visibilty而不是display的一种简单方法是切换pointer-events：

header .nav-background {
  pointer-events: none;
}

.js-open .nav-background {
  pointer-events: inherit;
}

$("a#toggle").on('click', function(e) {
  $('body').toggleClass('js-open');
  $('nav').toggleClass('js-open');
  e.preventDefault();
});

$(".nav-background").on('click', function() {
  $('body, nav').removeClass('js-open');
});

/***MOBILE NAV***/

@media (min-width: 45em) {
  body {
    font-size: 120%;
  }
}

@media (min-width: 65em) {
  body {
    font-size: 130%;
  }
}

@media (min-width: 85em) {
  body {
    font-size: 150%;
  }
}

a {
  text-decoration: none;
}

header {
  position: fixed;
  width: 100%;
  background: #fff;
  display: block;
  top: 0;
  padding: 0;
  z-index: 8;
  height: 3.5em;
}

#logo {
  margin: 0 !important;
  position: absolute;
  top: 0;
  display: inline-block;
  vertical-align: middle;
  float: left;
  padding: .2em 0 .2em .5em;
}

#logo img {
  max-height: 3em;
}

header * {
  background-repeat: no-repeat;
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

header nav p {
  font-size: 80%;
  color: #12384E;
  margin: 0 0 -1em;
  padding: 0;
  font-weight: 400;
}

header nav ul {
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  visibility: hidden;
  top: -5%;
  width: 100%;
  padding: 0;
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
  -webkit-transform: perspective(600px) rotateX(10deg);
  transform: perspective(600px) rotateX(10deg);
  -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
}

header nav ul li {
  list-style: none;
  text-align: center;
}

header nav ul li a {
  display: block;
  color: #000;
  padding: .5em 0;
  width: 100%;
  display: block;
  font-size: 200%;
  font-weight: 400;
}

header nav ul li a:hover {
  background: rgba(255, 255, 255, 0.8);
}

header nav ul li a:focus {
  outline: 0;
}

header nav ul li a:hover,
header nav ul li a:active {
  color: #0e1718 !important;
}

header .nav-background {
  z-index: 99;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
  display: table;
  -webkit-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  -moz-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  -o-transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  transition: background-color 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);
  pointer-events: none;
}

header #toggle {
  height: 3em;
  z-index: 999;
  padding: 1.5em 1em 0;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: .5em;
  -webkit-transition: padding-top 0.6s cubic-bezier(0.1, 0.01, 0.3, 1);
  transition: padding-top 0.6s cubic-bezier(0.1, 0.01, 0.3, 1);
}

header #toggle:hover {
  transition: top, 0.5s, ease-in-out;
}

header #toggle:hover .menubars:before {
  top: -9px;
}

header #toggle:hover .menubars:after {
  top: 9px;
}

.menubars {
  width: 24px;
  height: 4px;
  margin: 10px 0;
  background: #000;
  position: relative;
  z-index: 999 !important;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menubars:before {
  top: -8px;
}

.menubars:after {
  top: 8px;
}

.menubars:after,
.menubars:before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: #EC008C;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menubars {
  width: 24px;
  height: 4px;
  margin: .2em 0;
  background: #000;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menubars:before {
  top: -8px;
}

.menubars:after {
  top: 8px;
}

.menubars:after,
.menubars:before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: #000;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.js-open {
  height: 100%;
}

.js-open header {
  margin-top: 0px;
  background: none;
}

.js-open .menubars {
  background: none !important;
}

.js-open .menubars:after {
  top: 0 !important;
  background: #000 !important;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.js-open .menubars:before {
  top: 0 !important;
  background: #000 !important;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.js-open .nav-background {
  background: rgba(27, 128, 167, 0.9) !important;
  pointer-events: inherit;
}

.js-open ul {
  top: 0;
  visibility: visible;
  opacity: 1;
  margin-top: 0;
  -webkit-transform: perspective(600px) rotateX(0deg);
  -moz-transform: perspective(600px) rotateX(0deg);
  -ms-transform: perspective(600px) rotateX(0deg);
  -o-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
}

.mobile-shopping-bag {
  text-align: center;
  float: right;
  font-size: 24px;
  padding: .5em .5em .5em 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="margin-top: 5em;">
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
  <li><a href="#"> Cannot click</a></li>
</ul>

<!---MOBILE TABLET NAV--->
<section id="mobile-nav">
  <!-- Logo -->

  <header id="mast" class="">

    <div id="logo">
      <img src="https://cdn.shopify.com/s/files/1/0063/1360/7266/files/logoblack.png?14544251487220134235" alt="logo">
      <div class="mobile-shopping-bag"><i class="fa fa-shopping-bag"></i></div>
    </div>

    <!-- Main Nav-->
    <a id="toggle" href="#">
      <div class="menubars"></div>
    </a>
    <nav>
      <div class="nav-background">
        <ul>
          <li>
            <p>Introducing...</p>
            <a href="">Home</a>
          </li>
          <li>
            <p>Who we are, what we do</p>
            <a href="#">About Us</a>
          </li>
          <li>
            <p>What we think</p>
            <a href="#">The Blog</a></li>

          <li>
            <p>Get to know us</p>
            <a href="#">Meet Us</a></li>
          <li>
            <p>Let's talk</p>
            <a href="#">Join Us</a></li>
        </ul>
      </div>
    </nav>
  </header>
</section>