仅HTML和CSS的响应式导航栏：如何单击标签内的链接会触发复选框以及链接本身

Question

我正在尝试仅使用HTML和CSS来实现响应式导航。导航内的所有链接均指向同一html页面上具有滚动效果的部分。我现在正在尝试实现，因此单击链接一次即可完成以下两项操作：

1）滚动到网站上的相关部分和2）通过选中复选框来关闭导航，这会触发CSS转换

我发现点击链接的唯一方法就是点击标签，这是通过使用“ pointer-events：none;”禁用链接本身的指针事件。但是，我想同时激活：链接和标签。

#hamburger,
#kreuz {
  font-size: 45px;
  padding-left: 8vw;
  color: #929292;
}

#hamburger {
  display: block;
}

#kreuz {
  display: none;
}

#res-nav {
  display: none;
}

.nav-links {
  position: fixed;
  width: 100%;
  height: 85vh;
  background-color: rgba(255, 255, 255, 0.85);
  top: 15vh;
  left: -100%;
  text-align: center;
  transition: .5s;
}

.nav-link {
  display: block;
  margin: 40px 0;
  line-height: 30px;
  font-size: 30px;
  text-decoration: none;
  color: #929292;
  pointer-events: all;
}

#res-nav:checked~.nav-links {
  left: 0;
}

#res-nav:checked~#hamburger {
  display: none;
}

#res-nav:checked~#kreuz {
  display: block;
}

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

<nav>
  <label>
      <input type="checkbox" id="res-nav">
      <ul class="nav-links">
          <li ><a class="nav-link" href="#home">Home</a></li>
          <li ><a class="nav-link" href="#veranstaltungen">Veranstaltungen</a></li>
          <li ><a class="nav-link" href="#konzerte">Konzerte</a></li>
          <li ><a class="nav-link" href="#ausstellungen">Ausstellungen</a></li>
          <li ><a class="nav-link" href="#feste">Feste & Hochzeiten</a></li>
          <li ><a class="nav-link" href="#anfahrt">Anfahrt</a></li>
      </ul>
      <span class="fa fa-bars" id="hamburger"></span>
      <span class="fa fa-times" id="kreuz"></span>
  </label>
</nav>

Answer 1

这很简单，但是您需要一些Java脚本才能做到这一点：

• 创建可以切换.nav-link属性的#res-nav.checked元素列表。
• 遍历列表，并将通用侦听器（此处为toggleCheckbox()附加到该列表中的每个元素上]
• 单击toggleCheckbox()时具有#res-nav.checked切换.nav-link属性

这是代码段

// Traverse an array and execute the passed callback function for each array element found
var forEachEntryIn = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); } }

// Toggle navigation checkbox ':checked'
function toggleCheckbox(){
var check = document.getElementById('res-nav');
    check.checked = !check.checked; 
}

function initialize() {
// Attach an event listener to each <a>nchor in the navigation menu
forEachEntryIn(document.querySelectorAll('.nav-link'), // get the list of <a>nchors
        function (idx,el,scope) { // Add a listener to the 'click' event of all found <a>
             el.addEventListener("click", function(){ toggleCheckbox(); }); });
}

// Initialisation at document load time
document.addEventListener('DOMContentLoaded',initialize);

#hamburger,
#kreuz {
  font-size: 45px;
  padding-left: 8vw;
  color: #929292;
}

#hamburger {
  display: block;
}

#kreuz {
  display: none;
}

#res-nav {
  display: none;
}

.nav-links {
  position: fixed;
  width: 100%;
  height: 85vh;
  background-color: rgba(255, 255, 255, 0.85);
  top: 15vh;
  left: -100%;
  text-align: center;
  transition: .5s;
}

.nav-link {
  display: block;
  margin: 40px 0;
  line-height: 30px;
  font-size: 30px;
  text-decoration: none;
  color: #929292;
  pointer-events: all;
}

#res-nav:checked~.nav-links {
  left: 0;
}

#res-nav:checked~#hamburger {
  display: none;
}

#res-nav:checked~#kreuz {
  display: block;
}

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

<nav>
  <label>
      <input type="checkbox" id="res-nav">
      <ul class="nav-links">
          <li ><a class="nav-link" href="#home">Home</a></li>
          <li ><a class="nav-link" href="#veranstaltungen">Veranstaltungen</a></li>
          <li ><a class="nav-link" href="#konzerte">Konzerte</a></li>
          <li ><a class="nav-link" href="#ausstellungen">Ausstellungen</a></li>
          <li ><a class="nav-link" href="#feste">Feste &amp; Hochzeiten</a></li>
          <li ><a class="nav-link" href="#anfahrt">Anfahrt</a></li>
      </ul>
      <span class="fa fa-bars" id="hamburger"></span>
      <span class="fa fa-times" id="kreuz"></span>
  </label>
</nav>

<article id="veranstaltungen">
    <h2>Veranstaltungen</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
        qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
    <p>Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel
        phaedrum conceptam ut.</p>
</article>

<article id="konzerte">
    <h2>Konzerte</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
        qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
    <p>Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel
        phaedrum conceptam ut.</p>
</article>