CSS Menü per Klick einklappen

  • Hallo liebe Community,


    ich bastle gerade an meiner Homepage und möchte ein aufklappbares Menü erstellen. Ich habe da schon ein wenig Code gefunden und es funktioniert soweit ganz gut. Ich möchte die Funktion des Menüs nun aber etwas erweitern. Aktuell geht das Menü auf, wenn man mit der Maus drüber fährt, nimmt man die Maus weg, ist das Menü weg. Ich hätte aber gerne die Funktion, dass man auf einen kleinen Button oder Icon klickt und dann das Menü aufbleibt, klickt man nochmal drauf so schließt es sich wieder. Der User soll selber entscheiden ob er das Menü vollständig, oder nur in der Kurzform sehen will.


    Aktuell habe ich in meinem ".main-menu" die Eigenschaft "width:60px;" stehen. Dann klappt das Menüfenster ein bzw. aus. Nehme ich die "width:60px;" komplett raus, bleibt das Menü immer offen, das ist gut. Gibt es jetzt aber eine Möglichkeit, in auf der Seite ein Icon oder so zu platzieren, dass den Wert von "width:60px;" variabel ändert? Der User will das Menü immer sehen, klickt also auf das Icon und die "width:60px;" wird im CSS entfernt. Der User will nur das kleine Menü und klickt wieder auf das Icon und nun wird im CSS das "width:60px;" wieder aktiviert? Gibt es so eine Funktion und wie kann das anstellen?


    Anbei der CSS-Code:


    Freue mich auf Antworten! :)


    Liebe Grüße!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!