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

Question

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>

Answer 1

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>