Skip to content
Advertisements

JavaScrip Animation – Line Menu

CODEPEN:

javascript animation

Github:https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/Line%20Menu%20Animation


HTML CODE:

<div class="container">
        <div class="center">
            <div class="menu paused">
                <div class="menu-top"></div>
                <div class="top-line"></div>
                <div class="menu-bottom"></div>
                <div class="bottom-line"></div>
            </div>
            <div class="menu-items">
                <ul>
                    <li class="a">HOME</li>
                    <li>INSTAGRAM</li>
                    <li>WEBPAGE</li>
                    <li>GITHUB</li>
                </ul>
            </div>
        </div>
    </div>

CSS CODE:

body , html {
    padding: 0;
    margin: 0;
    background: #1a1a1a;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    background: none;
    overflow: hidden;
    color: #ccc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}
.menu{
    position: absolute;
    width: 50px;
    height: 25px;
    top: -25px;
    left: -25px;
    cursor: pointer;
}
.menu .menu-top{
    position: absolute;
    width: 60px;
    height: 10px;
    background: #ff6a00;
    border-radius: 20px;
    transition: .7s;
}
.menu .top-line{
    position: absolute;
    width: 0;
    height: 3px;
    top: -19px;
    left: -40px;
    border-radius: 25px;
    background: #ccc;
    transition: all 1s ease-out;
}
.menu .menu-bottom{
    position: absolute;
    width: 60px;
    height: 10px;
    top: initial;
    border-radius: 20px;
    bottom: 0;
    background: #ff6a00;
    transition: .7s;
}
.menu .bottom-line{
    position: absolute;
    width: 0;
    height: 3px;
    top: 40px;
    right: -49px;
    border-radius: 25px;
    background: #ccc;
    transition: all 1s ease-out;
}
.menu-items {
    position: absolute;
    width: 300px;
    height: 20px;
    top: -45px;
    left: -185px;
    padding: 5px 10px;
    pointer-events: none;
    opacity: 0;
    transition: all 2s ease-in-out;
    z-index: 20
}
.menu-items ul{
    list-style: none;
    line-height: 20px;
    color: #ff6a00;
    text-transform: uppercase;
    width: 280px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.menu-items ul li{
    position: relative;
    display: block;
    flex: 0 1 auto;
    cursor: pointer;
    transition: all .5s ease-in;
}
.menu-items ul li:hover{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
.a{
    color: #ccc;
}
/* javascript active mode  */
.menu.active{
    pointer-events: all;
}
.menu.active .menu-top {
  -webkit-animation: line-top-open 3s ease both;
          animation: line-top-open 3s ease both;
          height: 4px;
}
.menu.active .top-line {
  -webkit-animation: lightsaber-open .8s ease-in 3s both;
          animation: lightsaber-open .8s ease-in 3s both;
}
.menu.active .menu-bottom {
  -webkit-animation: line-bottom-open 3s ease both;
          animation: line-bottom-open 3s ease both;
          height: 4px;
}
.menu.active .bottom-line {
  -webkit-animation: lightsaber-open .8s ease-in 3s both;
          animation: lightsaber-open .8s ease-in 3s both;
}
.menu.inactive {
  pointer-events: all;
}
.menu.inactive .menu-top {
  -webkit-animation: line-top-close 3s ease 1s both;
          animation: line-top-close 3s ease 1s both;
}
.menu.inactive .top-line {
  -webkit-animation: lightsaber-close .5s ease;
          animation: lightsaber-close .5s ease;
}
.menu.inactive .menu-bottom {
  -webkit-animation: line-bottom-close 3s ease 1s both;
          animation: line-bottom-close 3s ease 1s both;
}
.menu.inactive .bottom-line {
  -webkit-animation: lightsaber-close .5s ease;
          animation: lightsaber-close .5s ease;
}
.menu-items.active {
    opacity: 1;
    pointer-events: all;
    transition: all 2s ease-in 2s;
}

@-webkit-keyframes line-top-open {
  0% {
    -webkit-transform: translateY(0px) translateX(0px);
            transform: translateY(0px) translateX(0px);
  }
  20% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateX(-100px) translateY(-20px);
            transform: translateX(-100px) translateY(-20px);
  }
}

@keyframes line-top-open {
  0% {
    -webkit-transform: translateY(0px) translateX(0px);
            transform: translateY(0px) translateX(0px);
  }
  20% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateX(-100px) translateY(-20px);
            transform: translateX(-100px) translateY(-20px);
  }
}
@-webkit-keyframes line-top-close {
  0% {
    -webkit-transform: translateX(-100px) translateY(-20px);
            transform: translateX(-100px) translateY(-20px);
  }
  20% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateX(0px) translateY(0px);
            transform: translateX(0px) translateY(0px);
  }
}
@keyframes line-top-close {
  0% {
    -webkit-transform: translateX(-100px) translateY(-20px);
            transform: translateX(-100px) translateY(-20px);
  }
  20% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateX(0px) translateY(0px);
            transform: translateX(0px) translateY(0px);
  }
}
@-webkit-keyframes line-bottom-open {
  0% {
    -webkit-transform: translateY(0px) translateX(0px);
            transform: translateY(0px) translateX(0px);
  }
  20% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateX(100px) translateY(20px);
            transform: translateX(100px) translateY(20px);
  }
}
@keyframes line-bottom-open {
  0% {
    -webkit-transform: translateY(0px) translateX(0px);
            transform: translateY(0px) translateX(0px);
  }
  20% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateX(100px) translateY(20px);
            transform: translateX(100px) translateY(20px);
  }
}
@-webkit-keyframes line-bottom-close {
  0% {
    -webkit-transform: translateX(100px) translateY(20px);
            transform: translateX(100px) translateY(20px);
  }
  20% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateX(0px) translateY(0px);
            transform: translateX(0px) translateY(0px);
  }
}
@keyframes line-bottom-close {
  0% {
    -webkit-transform: translateX(100px) translateY(20px);
            transform: translateX(100px) translateY(20px);
  }
  20% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateX(0px) translateY(0px);
            transform: translateX(0px) translateY(0px);
  }
}
@-webkit-keyframes lightsaber-open {
  0% {
    width: 0px;
  }
  100% {
    width: 202px;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
  }
}
@keyframes lightsaber-open {
  0% {
    width: 0px;
  }
  100% {
    width: 202px;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
  }
}
@-webkit-keyframes lightsaber-close {
  0% {
    width: 202px;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
  }
  100% {
    width: 0px;
  }
}
@keyframes lightsaber-close {
  0% {
    width: 202px;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
  }
  100% {
    width: 0px;
  }
}


JS CODE:

        line = document.querySelector(".menu");
        menu = document.querySelector(".menu-items");

        line.addEventListener("click", function () {
            setTimeout(lineFunction, 200);
            menuToggle();
        })

        function lineFunction() {
            if (line.classList.contains("paused") === true) {
                line.classList.replace("paused", "active");
            }
            else if (line.classList.contains("active") === true) {
                line.classList.remove("active");
                line.classList.add("inactive");
            }
            else {
                line.classList.remove("inactive");
                line.classList.add("active");
            }
        }

        function menuToggle() {
            menu.classList.toggle("active")
        }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: