MenuMenu CloseClose

How to Apex Legends Navigation Bar using – HTML, CSS (SCSS) & GSAP

By Raddy in CSS GSAP JavaScript ·

Hey! Today we are going to learn how to re-create the apex legends main navigation bar using HTML and CSS (SCSS). To TOP this, I have a bonus for you – animating the navigation bar using GSAP (Green Sock Animation Platform) library.

We are going to use the GSAP timeline to make things easy and awesome at the same time. I hope that you find this video useful.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplex Legends</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://use.typekit.net/fqp8jsw.css">
</head>
<body> 

    <header>
        <div class="logo">
            <img src="img/apex-logo.png" alt="Apex Legends">
        </div>
        <nav>
            <a class="menu-link active" href="#"><span>PLAY</span></a>
            <a class="menu-link" href="#"><span>LEGENDS</span></a>
            <a class="menu-link" href="#"><span>LOADOUT</span></a>
            <a class="menu-link" href="#"><span>BATTLE PASS</span></a>
            <a class="menu-link" href="#"><span>STORE</span></a>
        </nav>
        <div class="side-icons">
            <img src="img/icons.jpg" alt="icons">
        </div>

    </header>

</body>
</html>

styles.scss

body {
    margin: 0;
    font-family: agency-fb, sans-serif;
    background-image: url("../img/bg-image.jpg");
}

header {
    display: flex;
    justify-content: space-between;
    padding-left: 48px;
    padding-right: 48px;

    .logo {
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px);
    }

    .side-icons {
        align-self: center;
        margin-bottom: 2px;
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px);
    }
    
}

.menu-link {
    display: inline-block;
    background-color: red;
    width: 199px;
    height: 120px;
    text-decoration: none;
    color: #b0b0b0;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    background: rgb(46,46,46);
    background: linear-gradient(180deg,
     rgba(46,46,46,0.8) 0%, rgba(46,46,46,0.8) 71%, rgba(46,46,46,0) 100%);

    -webkit-transform: skewX(45deg) translateY(-200px);
    -moz-transform: skewX(45deg) translateY(-200px);
    -ms-transform: skewX(45deg) translateY(-200px);
    -o-transform: skewX(45deg) translateY(-200px);
    transform: skewX(45deg) translateY(-200px);

    &:after {
        display: block;
        content: "";
        position: relative;
        top: 42px;
        height: 10px;
        width: 100%; 
        background-color: #8c8c8c;
    }

    &:hover {
        background: rgb(69,69,69);
        background: linear-gradient(180deg,
         rgba(69,69,69,0.8) 0%, 
         rgba(69,69,69,0.8) 71%, 
         rgba(69,69,69,0) 100%);
    }

    span {
        display: block;
        position: relative;
        top: 33px;
        -webkit-transform: skewX(-45deg);
        -moz-transform: skewX(-45deg);
        -ms-transform: skewX(-45deg);
        -o-transform: skewX(-45deg);
        transform: skewX(-45deg);
    }
}


.menu-link.active {
    color: #fff;
    background: rgb(163, 6,6);
    background: linear-gradient(180deg, 
    rgba(163,6,6, 0.6) 0%,
    rgba(163,6,6, 1) 71%,
    rgba(163,6,6, 0) 100%
    );

    &:after {
        background-color: #ff4e1d;
    }

    &:hover {
        background: rgb(189,10,10);
        background: linear-gradient(180deg, 
        rgba(189,10,10,0.6) 0%,
        rgba(189,10,10,1) 71%, 
        rgba(189,10,10,0) 100%);

        &:after {
            background-color: #ff732e;
        }
    }
}

Need the compiled CSS? Here it is:

body {
  margin: 0;
  font-family: agency-fb, sans-serif;
  background-image: url("../img/bg-image.jpg");
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-left: 48px;
  padding-right: 48px;
}

header .logo {
  -webkit-transform: translateY(-200px);
  transform: translateY(-200px);
}

header .side-icons {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin-bottom: 2px;
  -webkit-transform: translateY(-200px);
  transform: translateY(-200px);
}

.menu-link {
  display: inline-block;
  background-color: red;
  width: 199px;
  height: 120px;
  text-decoration: none;
  color: #b0b0b0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  background: #2e2e2e;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(46, 46, 46, 0.8)), color-stop(71%, rgba(46, 46, 46, 0.8)), to(rgba(46, 46, 46, 0)));
  background: linear-gradient(180deg, rgba(46, 46, 46, 0.8) 0%, rgba(46, 46, 46, 0.8) 71%, rgba(46, 46, 46, 0) 100%);
  -webkit-transform: skewX(45deg) translateY(-200px);
  transform: skewX(45deg) translateY(-200px);
}

.menu-link:after {
  display: block;
  content: "";
  position: relative;
  top: 42px;
  height: 10px;
  width: 100%;
  background-color: #8c8c8c;
}

.menu-link:hover {
  background: #454545;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(69, 69, 69, 0.8)), color-stop(71%, rgba(69, 69, 69, 0.8)), to(rgba(69, 69, 69, 0)));
  background: linear-gradient(180deg, rgba(69, 69, 69, 0.8) 0%, rgba(69, 69, 69, 0.8) 71%, rgba(69, 69, 69, 0) 100%);
}

.menu-link span {
  display: block;
  position: relative;
  top: 33px;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

.menu-link.active {
  color: #fff;
  background: #a30606;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(163, 6, 6, 0.6)), color-stop(71%, #a30606), to(rgba(163, 6, 6, 0)));
  background: linear-gradient(180deg, rgba(163, 6, 6, 0.6) 0%, #a30606 71%, rgba(163, 6, 6, 0) 100%);
}

.menu-link.active:after {
  background-color: #ff4e1d;
}

.menu-link.active:hover {
  background: #bd0a0a;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(189, 10, 10, 0.6)), color-stop(71%, #bd0a0a), to(rgba(189, 10, 10, 0)));
  background: linear-gradient(180deg, rgba(189, 10, 10, 0.6) 0%, #bd0a0a 71%, rgba(189, 10, 10, 0) 100%);
}

.menu-link.active:hover:after {
  background-color: #ff732e;
}
/*# sourceMappingURL=styles.css.map */

Bonus Animation!

For the animation, we need to include GSAP. Include the following code above the end of your body element.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js"></script>
    <script>

        var tl = gsap.timeline();
        tl.to(".logo", {y:0, duration: 1});
        tl.to("nav a", {y:0, x:0, duration: 1, stagger:0.2});
        tl.to(".side-icons", {y:0, duration: 1});

    </script>

Here is the full HTML including the animation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplex Legends</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://use.typekit.net/fqp8jsw.css">
</head>
<body> 

    <header>
        <div class="logo">
            <img src="img/apex-logo.png" alt="Apex Legends">
        </div>
        <nav>
            <a class="menu-link active" href="#"><span>PLAY</span></a>
            <a class="menu-link" href="#"><span>LEGENDS</span></a>
            <a class="menu-link" href="#"><span>LOADOUT</span></a>
            <a class="menu-link" href="#"><span>BATTLE PASS</span></a>
            <a class="menu-link" href="#"><span>STORE</span></a>
        </nav>
        <div class="side-icons">
            <img src="img/icons.jpg" alt="icons">
        </div>

    </header>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js"></script>
    <script>

        var tl = gsap.timeline();
        tl.to(".logo", {y:0, duration: 1});
        tl.to("nav a", {y:0, x:0, duration: 1, stagger:0.2});
        tl.to(".side-icons", {y:0, duration: 1});

    </script>
</body>
</html>

If you found this tutorial useful, please consider subscribing to my YouTube channel by clicking the red YouTube button below.

Tags: , , , , ,