Float box design + script fehler suche.

[Andrin.Spitzer]

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

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

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

input.hamburger {
            display:             none;
 }

 

[Andrin.Spitzer]

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

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 ?

 

[Andrin.Spitzer]

hab etwas rumprobiert aber mit meiner idee schaffee ichs ned

 

[Sempervivum]

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:

        document.querySelectorAll('.pop-up-menu a').forEach('click', (event) => {
            document.querySelector('input.hamburger').checked = false;
        });

 

[Andrin.Spitzer]

kann ich das einfach einfügen und dan klappt des? der css code wird ja nicht überflüssig dadurch oder?

 

[Sempervivum]

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.

 

[Andrin.Spitzer]

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

 

[Andrin.Spitzer]

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.

 

[Andrin.Spitzer]

hab mich noch weiter informiert und etwas probiert funktioniert in JSFiddle aber ned in meinem Code.

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

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

 

[Sempervivum]

OMG, da habe ich einen kapitalen Fehler gemacht. Der Code aus #104 muss so lauten:

        document.querySelectorAll('.pop-up-menu a').forEach((item, idx) => {
            item.addEventListener('click', (event) => {
                document.querySelector('input.hamburger').checked = false;
            });
        });

Wieder ungetestet.