时间戳

首页 > 解决方案 > 如何通过 css 为我的菜单添加深色背景？

jquery - 如何通过 css 为我的菜单添加深色背景？

问题描述

我正在使用WordPress我的网站，并且我自己创建了一个主菜单，jQuery当slideleft用户单击菜单按钮时。但是有一个大问题：当用户单击菜单外关闭菜单时，该元素（菜单外，如按钮）也会被单击。我需要这样的东西Bootstrap Modal，当它出现时，模态周围会变暗，通过单击模态，模态将关闭，也不会单击任何内容。你明白我的意思吗？

jQuery(document).ready(function($) {

  $('#menubutton').click(function(e) {
    e.stopPropagation();
    $('#menuhidden').toggleClass('menushown');
  });
  $('#menuhidden').click(function(e) {
    e.stopPropagation();
  });
  $('body,html').click(function(e) {
    $('#menuhidden').removeClass('menushown');
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="topmenubutton" id="menubutton">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="topmenusearch">
    <a href="#searchmodal" data-toggle="modal"><i class="fa fa-search"></i></a>
  </div>
  <div class="topmenuicon">
    <a href=""><img src="" class="img-responsive" alt=""></a>
  </div>
</header>

<nav id="menuhidden" class="menuhidden">

  <ul>
    <a href="">
      <li><i class="fa fa-home"></i><span>course01</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-user"></i><span>course02</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-phone"></i><span>course03</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-home"></i><span>course04</span></li>
    </a>
  </ul>

</nav>

标签： jquerytwitter-bootstrapbootstrap-modalslidetoggle

解决方案

我发现我自己：

HTML 代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="topmenubutton" id="menubutton">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="topmenusearch">
    <a href="#searchmodal" data-toggle="modal"><i class="fa fa-search"></i></a>
  </div>
  <div class="topmenuicon">
    <a href=""><img src="" class="img-responsive" alt=""></a>
  </div>
</header>

<nav id="menuhidden" class="menuhidden">

  <ul>
    <a href="">
      <li><i class="fa fa-home"></i><span>course01</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-user"></i><span>course02</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-phone"></i><span>course03</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-home"></i><span>course04</span></li>
    </a>
  </ul>

</nav>  
<div id="mymenu_overlay" class="mymenu_overlay"></div>

jQuery代码：

jQuery(document).ready(function($) {

        $('#menubutton').click(function(e){
            e.stopPropagation();
            $('#menuhidden').toggleClass('menushown');
            $('#mymenu_overlay').toggleClass('mymenu_overlay_active');
        });
        $('#menuhidden').click(function(e){
            e.stopPropagation();
        });
        $('body,html').click(function(e){
            $('#menuhidden').removeClass('menushown');
            $('#mymenu_overlay').removeClass('mymenu_overlay_active');
        });


    });

CSS 代码：

.mymenu_overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    left: 0;
    top: 0;
    z-index: 99999;
    cursor: pointer;
    opacity: 0; 
    visibility: hidden; 
    transition: ease-in-out .3s;
    -ms-transition: ease-in-out .3s;
    -webkit-transition: ease-in-out .3s;
    -o-transition: ease-in-out .3s;
    -moz-transition: ease-in-out .3s;
}
.mymenu_overlay_active {
    opacity: 1;
    visibility: visible;
}

推荐阅读