Nav slides in from bottom to top and then content appears

user_7624544 0
Viewed 78

I have a bit different navigation on mobile devices than usual. When a user clicks on hamburger navigation has to slide in from bottom to top filling 100% of the screen and only after that content has to appear.

I have tried it with animation: slide-in; But im not sure if that is the right approach

<style>
    main.slide-up {
        height:100%;
        overflow:hidden;
    }
    main.slide-up p {
        animation: 1.0s slide-up;
        margin-top:0%;
        color: red !important;
    }

    @keyframes slide-up {
        from {
            margin-top: 100%;
            height: 300%;
        }

        to {
            margin-top: 0%;
            height: 100%;
        }
    }
</style>
<main>
   <div>Page content is here...</div>
</main>
  <nav id="mobile-nav" class="slide-up">
        <p>Slide up... </p>
  </nav>

I have made a picture of exactly what I need.

https://ibb.co/PgyWdLm "click here for the picture"

enter image description here

css jquery
1 Answers

Try adding this for slide:

@keyframes slideInUp {
    0% {
        transform: translate(0,100%);
    }

    100% {
        transform: translate(0,0);
    }
}
.slideInUp {
    animation-name: slideInUp;
    -webkit-animation-name: slideInUp;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease;
    z-index: 1;
}

And a delayed fade to show your menu content:

@keyframes fadeInUp {
    0% {opacity: 0;transform: translate(0px, 30px);}
    40% {opacity: 0;transform: translate(0px, 10px);}
    100% {opacity: 1;transform: translate(0px, 0px);}
}
@-webkit-keyframes fadeInUp {
    0% {opacity: 0;-webkit-transform: translate(0px, 30px);}
    40% {opacity: 0;-webkit-transform: translate(0px, 10px);}
    100% {opacity: 1;-webkit-transform: translate(0px, 0px);}
}
.fadeInUp {
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-duration: 1.25s;
    -webkit-animation-duration: 1.25s;
}
.delayed {
    animation-duration: 1.75s;
    -webkit-animation-duration: 1.75s;
}

Example HTML:

<nav id="mobile-nav" class="slideInUp">
    <div class="fadeInUp delayed">CONTENTS</div>
</nav>
user_42794960
Related