Float box design + script fehler suche.

Ich verstehe das so.

wird der button gedrückt durch input mit der id hamburger wird die animation ausgeführt und der wert der nav von none zu block gewechselt.
und durch das erneute betätigen das ganze anderst rum.

das würde heissen ich müsste im css erreichen das die <a> einem input mit id burger entspricht

HTML:
    <input type="checkbox" class="hamburger" id="hamburger">
        <label for="hamburger" class="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>

CSS:
input.hamburger:checked~div.pop-up-menu {
            display:             block;
}

input.hamburger {
            display:             none;
 }
 
dann könnte ich doch eigentlich weil eine id einzigartig sein muss die a mit einer class ergänzen namens hamburger und denn teil hier so abändern
CSS:
input.hamburger:checked~div.pop-up-menu {
            display:             block;
}

input.hamburger {
            display:             none;
}
zu

a.hamburger:checked~div.pop-up-menu {
            display:             block;
}

a.hamburger {
            display:             none;
}
oder nicht ?
 
Hier wird man mit den Beschränkungen von CSS konfrontiert. Es scheitert daran, dass man mit CSS:
  • kein Element ansprechen kann, das ein Vorfahre ist bzw. im Baum über dem aktuellen Element liegt
  • kein Element ansprechen kann, das in der Reihenfolge vor dem aktuellen Element liegt
Besser mit Javascript realisieren:
Code:
        document.querySelectorAll('.pop-up-menu a').forEach('click', (event) => {
            document.querySelector('input.hamburger').checked = false;
        });
 
Zuletzt bearbeitet:
Der, den Du hinzu gefügt hast, wird überflüssig, der der bisher da war natürlich nicht. Getestet habe ich es nicht, versuche selber, es zum Laufen zu bringen. Wenn es nicht funktioniert, wirf einen Blick in die Console.
 
Javascript:
document.querySelectorAll('.pop-up-menu a').forEach('click', (event) => {
            document.querySelector('input.hamburger').checked = false;
        });
die haut den fehler raus das 'click' keine funktion ist
 
habe mal ordentlich gegooglet finde nichts was mir weiter hilft hab keine ahnung von js. was ich jedoch auch mehrfach gellesen habe ist das click anscheinend kein möglicher parameter ist.
 
hab mich noch weiter informiert und etwas probiert funktioniert in JSFiddle aber ned in meinem Code.



Javascript:
function myFunction(){
        document.getElementsByClassName("pop-up-menu")[0].style.display = "none";}

HTML:
<div class="pop-up-menu">
         <ul>
            <li>
                <a onclick="myFunction()" href="#home">Home</a>
            </li>
            <li>
                <a onclick="myFunction()" href="#team">Teilnehmer</a>
            </li>
            <li>
                <a onclick="myFunction()" href="#register">Anmelden</a>
            </li>
            <li>
                <a onclick="myFunction()" href="#sponsoren">Partner</a> 
            </li>
          </ul>
</div>
 
Zuletzt bearbeitet:
OMG, da habe ich einen kapitalen Fehler gemacht. Der Code aus #104 muss so lauten:
Code:
        document.querySelectorAll('.pop-up-menu a').forEach((item, idx) => {
            item.addEventListener('click', (event) => {
                document.querySelector('input.hamburger').checked = false;
            });
        });
Wieder ungetestet.
 
Zurück