Moin zusammen,


irgendwie habe ich ein Denkfehler in meinem Skript.
Möchte gerne, so weit es geht, die Steuerung der einzelnen Bereiche CSS überlassen und so wenig wie Möglich (am besten Garnichts) es in JavaScript ausladen.


Hierbei geht es um ein einfaches Menü, das auf und zu geklappt werden soll.
Innerhalb des Menüs, welches aus ästhetischen Gründen da drin ist, befindet sich der Button.

HTML-Code:
<div class="main-menu" id="main-menu">
            <div class="header">
                <input class="menu-btn" type="checkbox" id="menu-btn" onchange="myFunction()" /> /* Versteckte Checkbox */
                <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>    /* Nur das wird angezeigt */
            </div>

            /* Menü Anfang */
            <ul>
                <li class="selected">
                    <a href="#">
                        <div class="main-button">
                            <i class="far fa-home-lg"></i>
                            <p>Dashboard</p>
                            <!--i class="fas fa-chevron-down"></i-->
                        </div>
                    </a>
                </li>
....


Bisweilen löse ich das über ein kurzes JavaScript, welches ein CSS-Eintrag ansteuert.


HTML-Code:
function myFunction() {
   document.getElementById("main-menu").classList.toggle('main-menu-width');
}


Im CSS steht dann nur folgendes:
HTML-Code:
.main-menu {
    display: block;
    overflow: hidden;
    top: 50px;
    bottom: 0;
    position: absolute;
    height: 100%;
    background: #f2f2f2;
    width: 45px;
    transition: all .2s ease-out;
    border-right: 1px solid #bbbbbb;
}

.main-menu-width {
    width: 240px;
}


Also soll es von der weite 45px auf 240px herausfahren und anders herum. So funktioniert es ja auch ganz gut.


Allerdings möchte ich es gerne komplett in CSS lösen.


Mein erster und irgendwie einziger Gedanke ist aber nur folgendes:
Dieses klappt aber leider so nicht.
HTML-Code:
.main-menu .menu-btn:checked ~ .main-menu {
    width: 240px;   
}


Hat jemand ein Lösungsvorschlag für mich. Habe es mit so ziemlich allen Attributen ausprobiert aber irgendwie komme ich nicht weiter.
Bitte nicht hauen, bin kein Profi !


Gruß, Mark