Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14236, member: 3917"]
Um das Hamburger-Symbol sticky zu machen, verschiebst Du es am besten so, dass es ein direktes Kind von body ist. Dann musst Du auch das CSS anpassen, das die Verbindung zwischen der Checkbox und der Nav herstellt. Hier eine vollständige Demo:
[CODE]<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Hamburger</title>
    <style>
        body {
            margin: 0;
        }

/* CSS */
        nav.topmenu {
            height: auto;
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s;
        }

/* Dies müssen wir anpassen nachdem wir
        die Position des Hamburger-Symbols verändert haben: */
        /* #hamburg:checked+.hamburg+nav.topmenu { */
        #hamburg:checked~div.row nav.topmenu {
            max-height: 600px;
        }

label.hamburg {
            display: block;
            background: #555;
            width: 75px;
            height: 50px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            border-radius: 4px;
        }

input#hamburg {
            display: none
        }

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

.line:nth-child(1) {
            top: 12px;
        }

.line:nth-child(2) {
            top: 24px;
        }

.line:nth-child(3) {
            top: 36px;
        }

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

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

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

label.hamburg {
            position: sticky;
            top: 0;
            right: 0;
        }

main {
            background-color: lightblue;
            height: 200vh;
        }
    </style>
</head>

<nav class="topmenu">
            <ul>
                <li><a href="/tutorial/css-transform.html">Home</a></li>
                <li class="hassub">Submenü
                    <ul>
                        <li><a href="/css/css-selektor-kontextselektor.html">Selektoren</a></li>
                        <li><a href="/css/breakpoints.html">Breakpoints</a></li>
                    </ul>
                </li>
                <li><a href="/css/transitions.html">Transition</a></li>
                <li><a href="/html/input-checkbox.html">Checkbox</a></li>
            </ul>
        </nav>
    </div>
    <main>

</main>
</body>

</html>[/CODE]
Das Verfahren mit "max-height" [CODE]
        #hamburg:checked~div.row nav.topmenu {
            max-height: 600px;
        }
[/CODE]funktioniert so einiger Maßen aber mehr schlecht als recht, wenn man die Höhe animiert. Besser und präzise geht das mit Javascript.
[/QUOTE]

Authentifizierung