CSS - Hamburgermenu ID of Class gebruiken

[Niekleair]

Mijn vraag

Ik ben een eenvoudige site in elkaar aan het zetten bestaande uit een aantal pagina's met elke pagina een video. Ik gebruik HTML5 en CSS. Ik heb een aantal HTML pagina's; en al mijn opmaak heb ik vastgelegd in een apart css bestand. Nu probeer ik het ontwerp responsive te maken; onderdeel daarvan is dat het hoofdmenu op apparaten met een klein scherm in een zgn hamburgermenu verandert om zodoende niet te veel ruimte in te nemen. Nu heb ik een toepassing gevonden waarbij het hele menu enkel in CSS/HTML gescript kan worden.

https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/

Omdat ik niet weet hoe het met copyright zit; zet ik hier alleen de link neer en niet de code.
Kort gezegd, wordt er een checkbox aangemaakt, welke wordt verborgen nabij of achter een hamburger icoontje. Het aanvinken dan wel uitvinken van de checkbox (wat gebeurt als je op het icoontje klikt) zorgt voor de reactie die het menu in/uitklapt.

Nu heb ik ooit ook geleerd dat classes van toepassing zijn als je een element over je hele site door wilt gebruiken; waar een ID eenmalig gebruikt kan worden.

Hoe zit dat bij een hamburgermenu. Op de site gebruikt de webbuilder alleen ID's. De site en code wekrt ook goed door de

code:

<nav id="page-nav">

te veranderen in

code:

<nav class="page-nav">

. Uiteraard daarbij de #page-nav in css aanpassen naar .page-nav.

Echter de verwijzing

code:

      <label for="hamburger">&#9776;</label>
      <input type="checkbox" id="hamburger"/>

kan ik niet aanpassen; dat wil zeggen, als ik id aanpas naar een class; dan functioneert het niet meer.

Hoe zit dat als ik meerdere pagina's wil aanmaken; die allemaal een hoofdmenu hebben; kan ik dan gewoon de id "hamburger" gebruiken? of moet ik de id voor idere pagina aanpassen (en dus ook code opnemen daarvoor in de CSS?).

[CB32]

ID moet uniek zijn per pagina, dus je kunt hetzelfde ID gebruiken voor het menu op alle pagina's. Binnen 1 pagina elk ID maar 1 keer gebruiken.

Een om je eventueel veel moeite te besparen: getbootstrap.com

[ Voor 26% gewijzigd door CB32 op 13-04-2020 06:12 ]

[Ed Vertijsment]

Ik zou waar mogelijk, voor opmaak, altijd 1 of meer classnames gebruiken.

- Tag selectors breken snel en hebben veel side effects.
- ID selectors zijn niet herbruikbaar, en ja, ik heb aan situaties gewerkt waarin er 2 menu’s waren.
- Een consistente manier van selectors in een stylesheet is wel zo fijn.

Voor dit soort dingen kun je heel goed de BEM conventie aanhouden.

Als je wilt leren zou ik juist niet naar bootstrap kijken, dat doet alles voor je. Als je weet wat je doet zit het vaak alleen maar in de weg.

*Als je puur iets snel neer wil plempen zonder ontwerp kan het soms wel handig zijn.

[R4gnax]

simple-responsive-pure-css-hamburger-menu/

FYI; als je het correct wilt doen, dan kun je zo'n menu niet puur met CSS maken.
Om een uitvouw menu als outvouw menu te boek te laten staan voor mensen die afhankelijk zijn van assistive technolgie heb je een stuk JavaScript nodig wat de juiste semantiek afhandelt middels ARIA attributen.

[Niekleair]

Bedankt voor de reacties tot dusverre; ik ga kritisch door mijn naamgeving heen om het aan de richtlijnen van BEM te laten voldoen. Het is nu nog relatief simpel, dus kan het beter meteen oppakken.

Ik kan dus beter e.e.a ombouwen met behulp van bijvoorbeeld het voorbeeld op W3schools:

https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

In dat voorbeeld is "myLinks" een ID; ik heb wat met de script lopen spelen; als ik het ID aanpas naar een class en vervolgens in javascript

code:

  var x = document.getElementById("myLinks");

aanpas naar

code:

   var x = document.getElementsByClassName("myLinks");

;
dan werkt het niet meer.

Maar dat is eenvoudig op te lossen door vervolgens achter iedere X een [0] te zetten; tenminste, dan werkt het bij mij, of loop ik hier het risico dat het later mis gaat? De javascript code heb ik dus omgebouwd naar:

code:

<script>
function myFunction() {
  var x = document.getElementsByClassName("mylinks");
  if (x[0].style.display === "block") {
    x[0].style.display = "none";
  } else {
    x[0].style.display = "block";
  }
}
</script>

Daar op volgend; in de CSS treffen we de volgende regel code aan:

code:

.topnav #myLinks {
  display: none;
}

Deze functie, als ik het goed begrijp, verbergt de ID myLinks indien deze afstamt van de class topnav. (wat is de Nederlandse term voor descendant?)

Om in lijn met de BEM conventie te blijven; nu heb ik de class mylinks vernoemd naar topnav__mylinks.

In plaats van

code:

.topnav .mylinks {

roep ik nu het volgende op

code:

.topnav__mylinks {

Uiteraard heb ik ook het javascriptje hierop aangepast:

code:

  var x = document.getElementsByClassName("topnav__mylinks");

Het blijft netjes werken! Is dit zo veilig toe te passen? of gaat dit later breken?

[ Voor 40% gewijzigd door Niekleair op 14-04-2020 01:05 ]