[ERLEDIGT] Aufklappbares Menü ohne JS

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

annsen

Mitglied
9 Juni 2016
81
1
8
39
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

CSS:
    #mbutton:checked + .mbutton + .mainmenu {
        max-height: 600px;
    }
nicht mehr funktionieren, weil #mbutton:checked, .mbutton und .mainmenu dann keine direkten Nachbarn mehr sind.

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

CSS:
   *, *: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!!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.277
263
83
66
Dem section.navmenu hast Du ja schon display:flex gegeben. Dann kannst Du das Label ganz einfach mit align-self: flex-end;rechts ausrichten:

5088
 

annsen

Mitglied
9 Juni 2016
81
1
8
39
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

Mitglied
9 Juni 2016
81
1
8
39
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

Mitglied
9 Juni 2016
81
1
8
39
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).
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.277
263
83
66
align-items wird beim Flex-Container notiert und wirkt auf alle Flex-Items, die darin sind.
align-self wird dagegen beim Flex-Item notiert (Kindelement) und wirkt nur auf das Element, wo Du es notiert hast.
D. h. man kann nicht pauschal sagen, was sinnvoller ist, sondern es hängt davon ab, welche Darstellung Du haben möchtest.
 

annsen

Mitglied
9 Juni 2016
81
1
8
39
...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?
 
Werbung:

Latest posts