14 lines
1.5 KiB
JavaScript
14 lines
1.5 KiB
JavaScript
const hamburger = document.querySelector (".hamburger_meni"); /* naredim spremenljivko hamburger, preišve celoten dokument HRML in poisce prvi item z razredom .hamburger_meni, shrani referenco na prvi element v html ki ima ta razred */
|
|
const meni = document.querySelector (".main_menu"); /*enako kot hamburger le da tukaj iscem prvi element s classom main_menu */
|
|
const ikona = hamburger.querySelector("i"); /*tole bomo pa dodali da se bo spremenila ikona v x */
|
|
|
|
hamburger.addEventListener ("click", function (){ /*addEventListener je metoda za poslušanje dogodka, click je pa dogodek */
|
|
meni.classList.toggle ("odprt"); /*classList predstavlja elemente CSS razreda, toglle pa ta element (odprt) dodaja/odstranja */
|
|
const odprt = meni.classList.contains ("odprt"); /*spet nardimo spremenljivko, ki ji dodamo vrednost true ali false glede na to ali je meni odprt/zaprt (preverja ali je dodan pri classu main_meni odprt) */
|
|
ikona.classList.toggle("fa-bars", !odprt); /*zdaj pa ko je odprt je prikazan x, zaprt (!odprt) pa tri crtice */
|
|
ikona.classList.toggle("fa-xmark", odprt);
|
|
hamburger.setAttribute ("aria-expanded", String(odprt)); /*setAtribute spremeni vrednost HTML atributa, v tem primeru arial-expanded iz false v true in obratno, string pa pretvori true/false v besedilo "true"/"false" in posodobi atribut.*/
|
|
hamburger.setAttribute ("aria-label", odprt ? "Zapri meni" : "Odpri meni"); /*gledr na to ali je odprt true ali false se bo spremenil zapis (za tiste ki imajo ne morejo videti treh crtic) v odprt meni ali zaprt meni */
|
|
});
|
|
|