[CSS] CSS Menü per Klick einklappen

[panic']

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:

 Spoiler

@import url(//www.netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
#main {
width: 1600px;
float: right;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:#212121;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
  
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
  font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color: #5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}

Freue mich auf Antworten!

Liebe Grüße!

[lnqlorlouz]

So ungefähr könnte es aussehen.

<button id="menu">Menü</button>
<div id="menu-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Sed quot
        homines, tot sententiae.</p>
</div>

<script>
    const menuBtn = document.getElementById("menu");
    const menuDiv = document.getElementById("menu-container");
    menuBtn.addEventListener("click", () => {
        if (menuDiv.style.minWidth) {
            menuDiv.style.minWidth = "";
        } else {
            menuDiv.style.minWidth = "60px";
        }
    });
</script>

[Bench]

Du kannst dies entweder, so wie lnqlorlouz es geschrieben hat, mit Javascript lösen oder mit <details>.

<details>
<summary>Zusammenfassung/Spoiler</summary>
<div>
...
...
</div>
</details>

Ansonsten ganz einfach mit display:none und display:block. Erstelle zwei Elemente; einmal das Element "Mehr anzeigen/Ausblenden" und einmal den Inhalt.