菜单

Question

我遇到了菜单叠加的问题，当我打开菜单时，后台的内容仍然可见，我尝试过使用z-index，但它没有帮助。

打开菜单时，该段落以浅灰色显示。

＆＃13;

＆＃13;

$("#menu").click(function() {
  $(".nav").toggleClass('is-open');
  $(".overlay").toggleClass('is-visible');
  $(this).toggleClass('open');
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
html {
  color: #222;
  font-family: Avenir, sans-serif;
}
a {
  color: #111;
  display: inline-block;
  text-decoration: none;
  padding: 10px 0;
  text-transform: uppercase;
  font-weight: lighter;
  opacity: .7;
  transition: all 0.4s ease-in-out;
}
a:hover {
  opacity: 1;
}
.nav {
  text-align: right;
  float: right;
}
.nav li {
  transition-delay: 0.15s;
  transform: translate(30px, 0);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
  transform: translate(0px, 0);
  opacity: 1;
}
.nav.is-open li:nth-child(1) {
  transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
  transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
  transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
  transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
  transition-delay: .3s;
}
.nav.is-open li a {
  color: #fff;
}
#menu {
  float: right;
  width: 25px;
  height: 15px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  cursor: pointer;
}
#menu span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #222;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
  top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
  top: 9px;
}
#menu span:nth-child(4) {
  top: 18px;
}
#menu.open span:nth-child(1) {
  top: 9px;
  width: 0%;
  left: 50%;
}
#menu.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
  top: 9px;
  width: 0%;
  left: 50%;
}
#menu.open span {
  background: #fff;
}
header {
  float: right;
  padding: 50px;
}
header {
  position: relative;
}
.overlay {
  background: transparent;
  width: 100%;
  height: 100vh;
  z-index: -4;
  transition: background .5s ease-in-out;
}
.overlay.is-visible {
  background: #000;
  position: absolute;
  z-index: -2;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <a id="menu" href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </a>
  <nav>
    <ul class="nav">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Portfolio</a>
      </li>
      <li><a href="#">Blog</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你想让每个段落有不同的颜色，我建议你在$models = Model::find()->where(['in', ['id', 'name'], [ ['id' => 1, 'name' => 'George'], ['id' => 2, 'name' => 'Tom'], ]])->all(); 元素中使用一个伪元素。您可以将其着色，它会隐藏您的内容：

.overlay

整个代码段

＆＃13;

＆＃13;

.overlay {
  position: relative;
  ...
}
.overlay.is-visible:after {
  content: '';
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

＆＃13;

$("#menu").click(function() {
  $(".nav").toggleClass('is-open');
  $(".overlay").toggleClass('is-visible');
  $(this).toggleClass('open');
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
html {
  color: #222;
  font-family: Avenir, sans-serif;
}
a {
  color: #111;
  display: inline-block;
  text-decoration: none;
  padding: 10px 0;
  text-transform: uppercase;
  font-weight: lighter;
  opacity: .7;
  transition: all 0.4s ease-in-out;
}
a:hover {
  opacity: 1;
}
.nav {
  text-align: right;
  float: right;
}
.nav li {
  transition-delay: 0.15s;
  transform: translate(30px, 0);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
  transform: translate(0px, 0);
  opacity: 1;
}
.nav.is-open li:nth-child(1) {
  transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
  transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
  transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
  transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
  transition-delay: .3s;
}
.nav.is-open li a {
  color: #fff;
}
#menu {
  float: right;
  width: 25px;
  height: 15px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  cursor: pointer;
}
#menu span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #222;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
  top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
  top: 9px;
}
#menu span:nth-child(4) {
  top: 18px;
}
#menu.open span:nth-child(1) {
  top: 9px;
  width: 0%;
  left: 50%;
}
#menu.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
  top: 9px;
  width: 0%;
  left: 50%;
}
#menu.open span {
  background: #fff;
}
header {
  float: right;
  padding: 50px;
}
header {
  position: relative;
}
.overlay {
  position: relative;
  background: transparent;
  width: 100%;
  height: 100vh;
  z-index: -4;
  transition: background .5s ease-in-out;
}
.overlay.is-visible:after {
  content: '';
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下代码适合您。

$("#menu").click(function () {
            $(".nav").toggleClass('is-open');
            $(".overlay").toggleClass('is-visible');
            $(this).toggleClass('open');
 });

 * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        html {
            color: #222;
            font-family: Avenir, sans-serif;
        }
        
        a {
            color: #111;
            display: inline-block;
            text-decoration: none;
            padding: 10px 0;
            text-transform: uppercase;
            font-weight: lighter;
            opacity: .7;
            transition: all 0.4s ease-in-out;

        }
        
        a:hover {
            opacity: 1;
            
        }
        
        .nav {
            text-align: right;
            float: right;
        }
        
        .nav li {
            transition-delay: 0.15s;
            transform: translate(30px, 0);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }
        
        .nav.is-open li {
            transform: translate(0px, 0);
            opacity: 1;
        }
        
        .nav.is-open li:nth-child(1) {
            transition-delay: 0.1s;
        }
        
        .nav.is-open li:nth-child(2) {
            transition-delay: 0.15s;
        }
        
        .nav.is-open li:nth-child(3) {
            transition-delay: 0.2s;
        }
        
        .nav.is-open li:nth-child(4) {
            transition-delay: 0.25s;
        }
        
        .nav.is-open li:nth-child(5) {
            transition-delay: .3s;
        }
        
        .nav.is-open li a {
            color: #fff;
        }
        
        #menu {
            float: right;
            width: 25px;
            height: 15px;
            position: relative;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .3s ease-in-out;
            -moz-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
            cursor: pointer;
        }
        
        #menu span {
            display: block;
            position: absolute;
            height: 2px;
            width: 100%;
            background: #222;
            border-radius: 2px;
            opacity: 1;
            left: 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .15s ease-in-out;
            -moz-transition: .15s ease-in-out;
            -o-transition: .15s ease-in-out;
            transition: .15s ease-in-out;
        }
        
        #menu span:nth-child(1) {
            top: 0px;
        }
        
        #menu span:nth-child(2),
        #menu span:nth-child(3) {
            top: 9px;
        }
        
        #menu span:nth-child(4) {
            top: 18px;
        }
        
        #menu.open span:nth-child(1) {
            top: 9px;
            width: 0%;
            left: 50%;
        }
        
        #menu.open span:nth-child(2) {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        
        #menu.open span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        
        #menu.open span:nth-child(4) {
            top: 9px;
            width: 0%;
            left: 50%;
        }
        
        #menu.open span {
            background: #fff;
        
        }
        header {
            float: right;
            padding: 50px;
        }
        
        header {
            position: relative;
            z-index:2
        }
        
        .overlay {
            background: transparent;
            width: 100%;
            height: 100vh;
			z-index: -4;
            transition: background .5s ease-in-out;
            position:absolute;
            top:0px;     
         }
         .overlay-2 {
            width: 100%;              
         }
        .overlay.is-visible {
            background: #000;              
			position: absolute;
			z-index: 1;
            display:block;                
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
		 
        <a id="menu" href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <nav>
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
	

 
    <div class="overlay-2">Hello, <br> this is the para that is still visible when you open the menu</div>
    <div class="overlay"></div>

或

你想要.overlay的单个div然后在css中写下以下行。

.overlay.is-visible {
   color:transparent;
}

Answer 3

在js代码中：

$("#menu").click(function() {
  $(".nav").toggleClass('is-open');
  $(".overlay").toggleClass('is-visible');
  $(".overlay p").toggle('display');

  $(this).toggleClass('open');
});

并在html中添加p标签到内容：

 <div class="overlay"><p>Hello, <br> this is the para that is still visible when you open the menu</p></div>