Question

我使用CSS Checkbox Label Hack创建了一个仅限CSS的汉堡包菜单。效果很好，除了......汉堡包的“切片”之间的间隙是不可点击的。有great post here on SO解决了这个问题，但它使用的是锚标记而不是表单标签，这是复选框hack所要求的。任何想法如何使整个区域成为可点击的标签？这是my code：

HTML：

<div id="hamburger-menu-icon">
    <label id="hamburger-menu-label" for="hamburger">
        <span></span>
    </label>
    <input id="hamburger" type="checkbox"> 
    <div id="hamburger-menu-panel">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
    </div>
</div>

SCSS：

$hbmLineWidth: 8px;
$hbmLineLength: 50px;

#hamburger-menu-icon {
   background-color: #399;
   position: fixed;
   top: 17px;
   left: 0;
   width: $hbmLineLength;
   height: $hbmLineWidth; 
   margin: 0;
   padding: 0;
   cursor: pointer;

   #hamburger-menu-label {
      cursor: pointer;
      width: $hbmLineLength;
      height: $hbmLineWidth;

      span {

         width: $hbmLineLength;
         height: $hbmLineWidth;

         &::after, &::before {
            display: block;
            content: '';
            background-color: #399;
            width: $hbmLineLength;
            height: $hbmLineWidth;
            margin: 0;
            padding: 0;
         }

         &::before {
            background-color: #f00;
            position: absolute;
            margin-top: -14px;
         }

         &::after {
            background-color: #00f;
            position: absolute;
            margin-top: 14px;
            height: $hbmLineWidth + 1;
         }
      }
   }

   #hamburger { 
      display: none; 
   } 
}

#hamburger-menu-panel {
  display: none;
  background: #aaa;
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
  margin: 0;

  p {
    margin: 0;
    padding: 4px 6px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }

  p:hover {
    background-color: #ccc;
  }
}

#hamburger:checked ~ #hamburger-menu-panel {
  display: block;
}

Answer 1

感谢@JaKhris的建议，我想出了一个答案，我posted on Codepen。这是代码：

HTML

<div id="hamburger-menu-icon">
    <label id="hamburger-menu-label" for="hamburger-menu-checkbox">
    </label>
    <input id="hamburger-menu-checkbox" type="checkbox"> 
    <div id="hamburger-menu-panel">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
    </div>
</div>

SCSS

$hbmLineLength: 25px;

#hamburger-menu-icon {
   position: fixed;
   top: 0;
   left: 0;
   margin: 0;
   padding: 0;
}

#hamburger-menu-label {
  display: block;
  width: $hbmLineLength;
  height: $hbmLineLength;
  background: 
    linear-gradient(
      to bottom, 
      #399 0%, #399 20%,
      #fff 20%, #fff 40%,
      #399 40%, #399 60%,
      #fff 60%, #fff 80%,
      #399 80%, #399 100%      
    );
  cursor: pointer;
}

#hamburger-menu-checkbox { 
  display: none; 
} 

#hamburger-menu-panel {
  display: none;
  background: #aaa;
  position: fixed;
  top: 31px;
  left: 0;
  width: 100%;
  margin: 0;

  p {
    margin: 0;
    padding: 4px 6px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }

  p:hover {
    background-color: #ccc;
  }
}

#hamburger-menu-checkbox:checked ~ #hamburger-menu-panel {
  display: block;
}

如果没有伪元素，事情就容易多了，渐变可以非常精确地指定线条/间隙宽度。

汉堡菜单：如何使复选框标签“切片”之间的空格可点击？

1 个答案: