JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="container">
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Services</a>

        </li>
        <li><a href="#">Location</a>

        </li>
        <li><a href="#">Testimonials</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
        <li><a href="#">Login</a>

        </li>
    </ul>
</div>

CSS

body {
    overflow:hidden;
}
ul {
    max-width: 200px;
}
ul li {
    list-style-type: none;
    padding:0px;
    display:block;
    margin:5px;
    background: black;
}
ul li a {
    color:white;
    display:block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

JavaScript

$.fn.cascadeUp = function () {
    $(this).css({
        "position": "relative",
            "top": "1000px"
    }).each(function (i) {
        $(this).animate({
            "top": "0px"
        }, i * 300);
    })
    return this;
}

$.fn.cascadeDown = function () {
    $(this.get().reverse()).css({
        "position": "relative",
            "top": "-1000px"
    }).each(function (i) {
        $(this).animate({
            "top": "0px"
        }, i * 300);
    })
    return this;
}


//$('ul li').cascadeDown();
$('ul li').cascadeUp();