[ERLEDIGT] Aufklappbares Menü ohne JS

[annsen]

Ich habe mich an einem aufklappbaren Menü ohne JavaScript versucht und das Auf- und Zuklappen des Menüs funktioniert, aber ich kann den Menübutton nicht korrekt rechts ausrichten.
Um das per Flexbox hinzubekommen müsste ich ein div (<section>) einfügen aber dann würde das Aufklappen des Menüs

    #mbutton:checked + .mbutton + .mainmenu {
        max-height: 600px;
    }

nicht mehr funktionieren, weil #mbutton:checked, .mbutton und .mainmenu dann keine direkten Nachbarn mehr sind.

<header role="banner">

        <section class="headerflex">

            <section class="logo">
                <figure>
                    <img class="" src="_img/logo/160_120.png" width="120px" alt="" />
                </figure>
            </section>

            <section class="navmenu">

                <input type="checkbox" id="mbutton"> <!-- html-button funktioniert nur, wenn .mbutton und .topmenu direkte nachbarn sind (#mbutton:checked + .mbutton + .mainmenu) -->
                <label for="mbutton" class="mbutton">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </label>

                <nav role="navigation" class="mainmenu">

                    <ul>
                        <li><a class="active">Startseite</a></li>

                        <li class="submenu">Hauptmenüpunkt 1
                            <ul>
                                <li><a href="">Untermenü</a></li>
                                <li><a href="">Untermenü</a></li>
                                <li><a href="">Untermenü</a></li>
                            </ul>
                        </li>

                        <li class="submenu">Hauptmenüpunkt 2
                            <ul>
                                <li><a href="">Untermenü</a></li>
                                <li><a href="">Untermenü</a></li>
                                <li><a href="">Untermenü</a></li>
                            </ul>
                        </li>

                        <li class="submenu">Hauptmenüpunkt 3
                            <ul>
                                <li><a href="">Untermenü</a></li>
                            </ul>
                        </li>

                    </ul>

                </nav>

            </section>

        </section>

    </header>

Hier das CSS komplett:

   *, *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        }

    header, nav, main, footer, section, article, figure, figcaption, img {
        display: block;
        }

    html {
        overflow-y: scroll;
        font-family: sans-serif;
        font-size: 100%;
        height: 100%;
        min-width: 300px;
        }

    body {
        height: 100%;
        min-width: 300px;
        color: rgb(40,67,112);
        display: flex;
        flex-direction: column;
        }

    figure {
        margin: 0;
        }

header {

    background-color: #2a2a35;
    width: 100%;
    text-align: right;
    min-height: 100px; /*fallback */
    min-height: 10rem;
    }

.headerflex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }

.logo {
    margin: 20px auto 0 20px;
    }

.navmenu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 20px 20px auto;
    }

/* menübutton */
    .mbutton {
        background: #555;
        width: 65px;
        height: 48px;
        position: relative;
        border-radius: 4px;
        }

    input#mbutton {display:none} /* blendet inputfeld aus */

    .line {
    position: absolute;
    left:10px;
    height: 4px;
    width: 45px;
    background: #fff;
    border-radius: 2px;
    display: block;
    transition: 0.5s;
    transform-origin: center;
    }

    .line:nth-child(1) { top: 10px; }
    .line:nth-child(2) { top: 22px; }
    .line:nth-child(3) { top: 34px; }

    #mbutton:checked + .mbutton .line:nth-child(1){
        transform: translateY(12px) rotate(-45deg);
    }

    #mbutton:checked + .mbutton .line:nth-child(2){
        opacity: 0;
    }

    #mbutton:checked + .mbutton .line:nth-child(3){
        transform: translateY(-12px) rotate(45deg);
    }

    .mainmenu {
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s;
    }

    #mbutton:checked + .mbutton + .mainmenu {
        max-height: 600px;
    }

    main {
        flex: 1;
        max-width: 90%;
        margin: 0 auto 0 auto;
    }

Gibt es eine Möglichkeit, den Menübutton (#mbutton:checked & .mbutton) in dieser Konstellation (Nachbar-Element von .mainmenu) zu belassen und ihn rechts zu platzieren?

Vielen Dank vorab für Tipps und Hinweise!!

 

[annsen]

Ich kann die Grafik nicht aufrufen, habe aber align-self: flex-end; als Eigenschaft für .navmenu hinzugefügt. Da tut sich aber nichts...

 

[annsen]

Ich hab grad nochmal in meine umfangreiche Lektüre zum Thema geschaut - hier ist auch von align-items die Rede - das hab ich grad mal probiert und es funktioniert!

Vielen Dank (!!!), für deinen Tipp - ich hab gestern den ganzen Tag gesucht und nichts gefunden - das war der Hinweis, der mir gefehlt hat.

 

[annsen]

Oh... ok.

Das geht genauso - habs grad getestet. Was ist sinnvoller?
Das Ergebnis im Inspektor sieht tatsächlich gleich aus (Ausrichtung der Boxen und der Elemente).

 

[annsen]

Ok, ich schau mir das nochmal an - vielen Dank, für deinen Hinweis!!!

 

[annsen]

...eine Frage noch - auch wenn, die eigentliche Frage schon beantwortet ist. Das nun vom header in den main-Bereich klappende Menü wird vom Text ( p ) , der Inhalt von main ist, überlagert.
Ich habe das jetzt mit einem z-index für .mainmenu gelöst. Ist das korrekt oder gibt es da eine anderen/besseren Lösungsansatz?