完整关闭-canvas 菜单

Question

我正在尝试制作一个非 canvas 菜单，但遇到了问题。只有前两个菜单链接以灰黑色背景显示，但我希望所有菜单链接都具有它。其余 5 个菜单链接确实在菜单内部（当您将鼠标悬停在链接上时可以看到），但它们具有透明背景。

我将 html 和 css 代码放入 Jsfiddle 中：https://jsfiddle.net/ghbx6fmn

P.S。这些代码在 Jsfiddle 上似乎工作正常，但在我的网站上却没有...

/*=====  SLIDE MENU  ======*/

/*----------  HIDE SELECT CHECKBOX  ----------*/

.toggle, 
.full-screen-close
{
 display: none;
}

.full-screen-close
{
 width: 100%;
 height: 100%;
 position: absolute;
 cursor: pointer;
 top:0;
 left:0;
}

/*----------  TOGGLE OFF-CANVAS MENU  ----------*/

.toggle:checked + .container > .menu-container 
{
   margin-left: 70%;
}

.toggle:checked + .container > .content .full-screen-close
{
   display: block;
   background: rgba(0,0,0,.5);
}

.menu
{
 padding-top: 24px;
}

.toggle-btn,
.close-btn
{
 cursor: pointer;
}

.toggle-btn
{
 font-size: 2.25rem;
}


.close-btn
{
 float: right;
 font-size: 1.5rem;
 padding: 1.5rem;
 color: #ededed;
}

.menu-container, 
.content
{
 transition: margin 0.5s ease-in-out;
}

.menu-container
{
 background: #2c3e50;
 width: 40%;
 margin-left: 100%;
 
 float: right;
 height: 100%;
 position: absolute;

 z-index:99;
}

.slide-menu i
{
 margin-right: 1rem;
 font-size: 1.5rem;

 vertical-align: middle;
}
.slide-menu li a
{
 color: #fff;
 padding: 1.5rem;

 font-size: 1.125rem;

 text-transform: uppercase;
 font-weight: 600;

 display: block;

 transition: background-color .5s ease-in-out;
}

.slide-menu li a:hover
{
 background-color: #34495e;
}

/*=====  MEDIA QUERIES  ======*/
@media (max-width: 460px) {
 .slide-menu li a
 {
  font-size: 0.875rem;
  padding-left: 12px;
 }

 .slide-menu li i
 {
  font-size: 16px;
 }
}

@media (max-width: 320px){
 .slide-menu li i
 {
  display: none;
 }
}

<html lang="en">
 
  <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="Off-canvas navigation menu Tutorial" />
  <meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
      <meta name="author" content="AcasA Programming" />
      <link rel="icon" href="../../favicon.ico" />


  <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/right-slide.css" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
 

  <body>

   <input type="checkbox" id="offcanvas-menu" class="toggle" />

   <div class="container">

    <aside class="menu-container">

     <div class="menu-heading clearfix">
      <label for="offcanvas-menu" class="close-btn">
       <i class="fa fa-times"></i>
      </label>
     </div><!--end menu-heading-->

   <nav class="slide-menu">
    <ul>
     <li><a href="#"><i class="fa fa-home"></i>Testing 1</a></li>
     <li><a href="#"><i class="fa fa-star"></i>Testing 2</a></li>
     <li><a href="#"><i class="fa fa-folder-open"></i>Testing 3</a></li>
     <li><a href="#"><i class="fa fa-cogs"></i>Testing 4</a></li>
<li><a href="#"><i class="fa fa-star"></i>Testing 5</a></li>
     <li><a href="#"><i class="fa fa-folder-open"></i>Testing 6</a></li>
     <li><a href="#"><i class="fa fa-cogs"></i>Testing 7</a></li>
    </ul>
   </nav><!--end slide-menu -->

  </aside><!--end menu-container-->

  <section class="content">

   <label for="offcanvas-menu" class="full-screen-close"></label>

   <div class="menu right">
    <label for="offcanvas-menu" class="toggle-btn">
           <i class="fa fa-bars"></i>
          </label>
      </div><!--end menu-->     

     <div class="menu-options clearfix"> 
    
    <div class="right">
       
      </div>
     </div>

     <div class="content-body">
     </div><!--end content body-->

    </section><!--end content-->
    
   </div> <!--end container -->
  </body>
</html>

Answer 1

注意：我对您 HTML/CSS 的结构并不满意，认为它可以使用重构。我的回答将解决您遇到的问题，但您应该着眼于进一步简化您的代码。

问题 1：您的菜单不会增加灰色背景的高度，因为菜单是绝对定位的元素，因此在 document flow 之外.

确保灰色背景充满整个视口的最简单方法是：

.full-screen-close {
  ...
  p̶o̶s̶i̶t̶i̶o̶n̶:̶ ̶a̶b̶s̶o̶l̶u̶t̶e̶;̶
  position: fixed;
}

问题 2：现在我们已经解决了第一个问题，我们看到菜单后面的蓝色背景没有一直延伸。

没问题。让我们删除高度属性.

.menu-container {
  ...
  h̶e̶i̶g̶h̶t̶:̶ ̶1̶0̶0̶%̶;̶
}

现在，.menu-container 达到了它需要的高度，而不是 parent 的 100%。

看看：https://jsfiddle.net/ghbx6fmn/2/

完整关闭-canvas 菜单

Full off-canvas menu

css

menu

jsfiddle

off-canvas-menu