手机菜单背景

Question

我有一个如下所示的菜单，我不希望灰色背景出现在汉堡包按钮的后面，而是希望它出现在下方，我不希望它在未单击时显示。我不知道在我的代码中编辑它的位置，但我已经尝试了一切。

我的菜单按钮的背景

点击菜单时

HTML

<div class="menu">
<div class="hamburger-menu-wrapper">
<button class="hamburger-menu">
<span>toggle menu</span>
</button>
</div>
<div class="menu-list">
<div class="menu-list">
<a href="#About">About us</a><br>
<a href="#Services">Services</a><br>
<a href="#Clients">Clients</a><br>
<a href="#Contact">Contact us</a><br>
</div>    

CSS

html, body 
{
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 overflow-x: hidden; 
}

.hamburger-menu-wrapper 
{
  margin-top: 0px;
  margin-bottom: 0px;
  background: #323232;
  padding: 10px;
  display: inline-block;
  z-index: 999 !important;
  position: static;
 }

.hamburger-menu-wrapper.bounce-effect 
{ 
  animation: bounce 0.3s ease 1; 
 }

.hamburger-menu  
 {
  border: 0;
  margin: 0 auto;
  display: block;
  position: relative;
  padding: 0;
  width: 36px;
  height: 36px;
  font-size: 0;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 999 !important;
  cursor: pointer;
  background: transparent;
 }

.hamburger-menu:focus 
{ 
  outline: none; 
 }

.hamburger-menu span 
{
  display: block;
  position: absolute;
  top: 17px;
  left: 5px;
  right: 5px;
  height: 2px;
  background: #02D5FD;
}

.hamburger-menu span:before, .hamburger-menu span:after 
{
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #02D5FD;
  content: "";
}

.hamburger-menu span:before 
{ 
 top: -7px; 
}

.hamburger-menu span:after 
{  
 bottom: -7px; 
}

.hamburger-menu span:before, .hamburger-menu span:after 
{
 transition-duration: 0.3s, 0.3s;
 transition-delay: 0.3s, 0s;
}

.hamburger-menu span:before 
{ 
  transition-property: top, transform;
  }

.hamburger-menu span::after 
 { 
    transition-property: bottom, transform; 
    }

.hamburger-menu.active span  
 { 
  background: none; 
}

.hamburger-menu.active span:before
 {
 top: 0;
 transform: rotate(225deg);
 }

.hamburger-menu.active span:after 
{
  bottom: 0;
  transform: rotate(135deg);
 }

.hamburger-menu.active span:before, .hamburger-menu.active span:after 
{ 
transition-delay: 0s, 0.3s; 
}

@-webkit-keyframes bounce
{ 
  0% {transform: rotate(0);}
  45% {transform: rotate(15deg);}
  90% {transform: rotate(-7deg);}
  100% {transform: rotate(0);}
 }

.menu 
{
 position: fixed;
 width: 100%;
 margin-top: 0px;
 padding: 0px;
 margin-bottom: 10px;
 text-align: center;
 background-color: #818184;
 opacity: 0.9;
 }

.menu-list 
 {
  position: relative;
  display: none;
  width: 100%;
  text-align: center;
  z-index: 999;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.menu-list a
 {
 color: #C6D2D6;
 text-decoration: none;
 font-size: 18px;
 display: inline-block;
 margin: 15px 0;
 transition: all 0.5s ease;
 z-index:999 ;
}

.menu-list a:hover
 { 
 color: #02D5FD; 
 }

 .menu-overlay 
 {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999 !important;
  }

jQuery

​​>

(function()
{
      'use strict';
      $('.hamburger-menu').click(function (e) {
      e.preventDefault();
      if ($(this).hasClass('active')){
      $(this).removeClass('active');
      $('.menu-overlay').fadeToggle( 'fast', 'linear' );
      $('.menu .menu-list').slideToggle( 'slow', 'swing' );
      $('.hamburger-menu-wrapper').toggleClass('bounce-effect');
      } else {
      $(this).addClass('active');
      $('.menu-overlay').fadeToggle( 'fast', 'linear' );
      $('.menu .menu-list').slideToggle( 'slow', 'swing' );
      $('.hamburger-menu-wrapper').toggleClass('bounce-effect');
      }
      })
      })();

我不确定我哪里出错了，其他一切都运行良好，它是移动响应式的，并且按钮运行良好。如果有人可以帮助我，我只需要灰色背景的帮助。谢谢。

Answer 1

我不清楚你的问题。据我所知，我认为这是你所期望的.. 您可以使用添加删除类来隐藏显示背景颜色。 http://jsfiddle.net/w9ew0nrw/11/

在您的代码中添加 css

.showback {
   background-color: #818184;
   transition:all 0.3s ease 0s;
}

并添加js

(function()
{
    'use strict';
     $('.hamburger-menu').click(function (e) {
          e.preventDefault();
          if ($(this).hasClass('active')) {
              $(".menu").removeClass('showback');
              $(this).removeClass('active');
              $('.menu-overlay').fadeToggle( 'fast', 'linear' );
              $('.menu .menu-list').slideToggle( 'slow', 'swing' );
              $('.hamburger-menu-wrapper').toggleClass('bounce-effect');
          } else {
              $(this).addClass('active');
              $(".menu").addClass('showback');
              $('.menu-overlay').fadeToggle( 'fast', 'linear' );
              $('.menu .menu-list').slideToggle( 'slow', 'swing' );
              $('.hamburger-menu-wrapper').toggleClass('bounce-effect');
         }
      });
})();

Answer 2

我真的不明白你问的问题，这是我想出的......

我看到你的 css 中有一个 rgba() 代码决定覆盖颜色，将最后一个数字更改为 1 以消除不透明度。

 .menu-overlay 
 {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 1);
  z-index: 999 !important;
  }

希望对您有所帮助，请告诉我。

-多荷兰语