How to Apex Legends Navigation Bar using – HTML, CSS (SCSS) & GSAP
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.