仅HTML&的自适应导航栏CSS:如何单击标签内的链接会触发复选框以及链接本身 [英] Responsive Navbar with only HTML & CSS: How to have click on a link inside a label trigger the checkbox aswell as the link itself

问题描述

我正在尝试仅使用HTML&来实现响应式导航CSS.导航内的所有链接都指向同一html页面上具有滚动效果的部分. 我现在正在尝试做到这一点，以便单击链接一次即可完成以下两项操作:

I am trying to implement a responsive navigation only using HTML & CSS. All links inside the navigation point to sections on the same html-page with a scrolling effect. I am now trying to make it, so that a click on a link does the following two things at once:

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

1) scroll to the relevant section on the website and 2) close the navigation by checking the checkbox, which triggers the css transformation

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

The only way I found to make a click on the links count as a click on the label was by disabling the pointer event for the links themselves with "pointer-events: none;". However, I want both to activate: the link and the lable.

#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>

推荐答案

这很简单，但是您将需要一些Java脚本来实现:

It is rather straightforward, but you will need some Javascript to do that:

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

• create a list of .nav-link elements that can toggle the #res-nav.checked property.
• walk the list and attach a generic listener, here toggleCheckbox(), to each element in that list
• have toggleCheckbox() toggle the #res-nav.checked property when a .nav-link gets clicked

以下是代码段

// 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>

这篇关于仅HTML&的自适应导航栏CSS:如何单击标签内的链接会触发复选框以及链接本身的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！