Search code examples
htmlcsslabelhref

Responsive Navbar with only HTML & CSS: How to have click on a link inside a label trigger the checkbox aswell as the link itself

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) scroll to the relevant section on the website and 2) close the navigation by checking the checkbox, which triggers the css transformation

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>

Solution

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

    • 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

    Here's the snippet

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