Frage CSS-Transition danach anders?

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

bln_design

Neues Mitglied
16 Mai 2018
6
0
1
19
#1
Hallo ich habe folgenden Code. Wenn ich das Menü öffne, steigen die Listenpunkte auf. Wenn ich das Menü schließe sollen die Listenpunkte einfach verschwinden. Wie bekomme ich das hin? LG
CSS:
nav#menu ul {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 100%;
    height: 0px;
    z-index: 999;
    background: #e6e6e6;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: 0.5s;
    transition-delay: 1s;
    box-shadow: 0px 2px 5px grey;
}

nav#menu ul.show {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 100%;
    height: 300px;
    z-index: 999;
    background: #e6e6e6;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: 0.5s;
    box-shadow: 0px 2px 5px grey;
}

nav#menu ul li {
    visibility: hidden;
    float: left;
    list-style: none;
    margin-left: 0px;
    padding-left: 10%;
    margin-top: 10px;
    font-size: 20px;
    transform: translate(0px, 80px);
}

nav#menu ul li:nth-child(1) {
    transition: 0.5s;
    transition-delay: 0.5s;
}

nav#menu ul li:nth-child(2) {
    transition: 0.5s;
    transition-delay: 0.6s;
}

nav#menu ul li:nth-child(3) {
    transition: 0.5s;
    transition-delay: 0.7s;
}

nav#menu ul li:nth-child(4) {
    transition: 0.5s;
    transition-delay: 0.8s;
}

nav#menu ul li:nth-child(5) {
    transition: 0.5s;
    transition-delay: 0.9s;
}

nav#menu ul li.show {
    visibility: visible;
    float: left;
    list-style: none;
    margin-left: 0px;
    margin-top: 10px;
    font-size: 20px;
    transform: translate(0px, 0px);
}
HTML:
<nav id="menu">
    <ul>
        <li><a href="index.html" class="active">Punkt 1</a></li>
        <li><a href="p2/">Punkt 2</a></li>
        <li><a href="p3/">Punkt 3</a></li>
        <li><a href="p4/">Punkt 4</a></li>
        <li><a href="p5/">Punkt5 </a></li>
    </ul>
</nav>
JavaScript:
<script>
    $('.menu-icon img').on('click', function(e) {
        $('nav#menu ul').toggleClass("show");
        $('nav#menu ul li').toggleClass("show");
        e.preventDefault();
    });
</script>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.186
253
83
65
#4
Lässt sich relativ leicht machen, wenn Du die transition auch von der Klasse "show" abhängig machst:
CSS:
        nav#menu ul {
            position: absolute;
            top: 60px;
            left: 0px;
            width: 100%;
            height: 0px;
            z-index: 999;
            background: #e6e6e6;
            display: flex;
            justify-content: center;
            flex-direction: column;
            /* transition: 0.5s; */
            /* transition-delay: 1s; */
            box-shadow: 0px 2px 5px grey;
        }

        nav#menu ul.show {
            position: absolute;
            top: 60px;
            left: 0px;
            width: 100%;
            height: 300px;
            z-index: 999;
            background: #e6e6e6;
            display: flex;
            justify-content: center;
            flex-direction: column;
            transition: 0.5s;
            box-shadow: 0px 2px 5px grey;
        }

        nav#menu ul li {
            visibility: hidden;
            float: left;
            list-style: none;
            margin-left: 0px;
            padding-left: 10%;
            margin-top: 10px;
            font-size: 20px;
            transform: translate(0px, 80px);
        }

        nav#menu ul li:nth-child(1) {
            transition: 0.5s;
            transition-delay: 0.5s;
        }

        nav#menu ul li:nth-child(2) {
            transition: 0.5s;
            transition-delay: 0.6s;
        }

        nav#menu ul li:nth-child(3) {
            transition: 0.5s;
            transition-delay: 0.7s;
        }

        nav#menu ul li:nth-child(4) {
            transition: 0.5s;
            transition-delay: 0.8s;
        }

        nav#menu ul li:nth-child(5) {
            transition: 0.5s;
            transition-delay: 0.9s;
        }

        nav#menu ul li:not(.show) {
            transition: none;
        }

        nav#menu ul li.show {
            visibility: visible;
            float: left;
            list-style: none;
            margin-left: 0px;
            margin-top: 10px;
            font-size: 20px;
            transform: translate(0px, 0px);
        }
    </style>
 
Zustimmungen: bln_design

bln_design

Neues Mitglied
16 Mai 2018
6
0
1
19
#5
Vielen Dank, das funktioniert super! :)
Lässt sich relativ leicht machen, wenn Du die transition auch von der Klasse "show" abhängig machst:
CSS:
        nav#menu ul {
            position: absolute;
            top: 60px;
            left: 0px;
            width: 100%;
            height: 0px;
            z-index: 999;
            background: #e6e6e6;
            display: flex;
            justify-content: center;
            flex-direction: column;
            /* transition: 0.5s; */
            /* transition-delay: 1s; */
            box-shadow: 0px 2px 5px grey;
        }

        nav#menu ul.show {
            position: absolute;
            top: 60px;
            left: 0px;
            width: 100%;
            height: 300px;
            z-index: 999;
            background: #e6e6e6;
            display: flex;
            justify-content: center;
            flex-direction: column;
            transition: 0.5s;
            box-shadow: 0px 2px 5px grey;
        }

        nav#menu ul li {
            visibility: hidden;
            float: left;
            list-style: none;
            margin-left: 0px;
            padding-left: 10%;
            margin-top: 10px;
            font-size: 20px;
            transform: translate(0px, 80px);
        }

        nav#menu ul li:nth-child(1) {
            transition: 0.5s;
            transition-delay: 0.5s;
        }

        nav#menu ul li:nth-child(2) {
            transition: 0.5s;
            transition-delay: 0.6s;
        }

        nav#menu ul li:nth-child(3) {
            transition: 0.5s;
            transition-delay: 0.7s;
        }

        nav#menu ul li:nth-child(4) {
            transition: 0.5s;
            transition-delay: 0.8s;
        }

        nav#menu ul li:nth-child(5) {
            transition: 0.5s;
            transition-delay: 0.9s;
        }

        nav#menu ul li:not(.show) {
            transition: none;
        }

        nav#menu ul li.show {
            visibility: visible;
            float: left;
            list-style: none;
            margin-left: 0px;
            margin-top: 10px;
            font-size: 20px;
            transform: translate(0px, 0px);
        }
    </style>