Responsive Navbar with Hide Menubar

Syiainfoku make a Responsive Navbar with Hide Menubar

Hello friends!

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Responsive Navbar with Hide Menubar.

Ok, let's get started

Preview Responsive Navbar with Hide Menubar

More or less the result will be like in the image above.

Source Code and Brief Explanation

To make this program [Responsive Navbar]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Responsive Navbar from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navbar #1 | hitoricoding</title>
  <link rel="stylesheet" href="./assets/style.css">
  <script src="https://kit.fontawesome.com/11aee9d162.js"></script>
</head>

<body>
  <nav>

    <!-- Logo -->
    <div class="logo">
      <h4><a href="#">The Nav</a></h4>
    </div>

    <!-- NavLink -->
    <ul class="nav-list">
      <li class="nav-item">
        <a href="#" class="link-animation nav-link">
          <span>
            <span>Home</span>
            <span><i class="fas fa-home"></i></span>
            <span></span>
          </span>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="link-animation nav-link">
          <span>
            <span>Project</span>
            <span><i class="fas fa-folder"></i></span>
            <span></span>
          </span>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="link-animation nav-link">
          <span>
            <span>Contact</span>
            <span><i class="fas fa-envelope"></i></span>
            <span></span>
          </span>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="link-animation nav-link">
          <span>
            <span>About</span>
            <span><i class="fas fa-user"></i></span>
            <span></span>
          </span>
        </a>
      </li>
    </ul>

    <!-- Hamburger Menu -->
    <div class="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>
  </nav>

  <!-- Background -->
  <div class="banner">
    <h3>Apple..</h3>
    <h1>Nav</h1>
  </div>
  <script src="./assets/main.js" charset="utf-8"></script>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

nav {
  padding: 0 30px;
  height: 60px;
  background: #670b88;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo a {
  text-decoration: none;
  font-size: 25px;
  color: #907588;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

ul li {
  list-style: none;
  display: inline-flex;
  padding: 0 10px;
}

.nav-list {
  display: flex;
  list-style: none;
}

.nav-item {
  position: relative;
  line-height: 8px;
  transition-delay: .5s;
  visibility: hidden;
}

.nav-link {
  transform: scale(0);
  transition: transform 650ms;
}

/* link animation styling */
.link-animation {
  width: 100px;
  background-color: transparent;
  cursor: pointer;
  border-color: #bdc3c7;
}

.link-animation:hover {
  border-color: #d36aff;
}

.link-animation span:nth-child(1) {
  color: #FCFCFC;
}

.link-animation span:nth-child(2) {
  color: #C672E9;
}

.link-animation span {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
}

.link-animation {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  border-style: none;
  height: 40px;
  display: inline-block;
}

.link-animation span {
  position: absolute;
  box-sizing: border-box;
  display: block;
}

.link-animation>span>span:nth-child(3), .link-animation:before, .link-animation:after, .link-animation>:first-child, .link-animation>:first-child:before, .link-animation>:first-child:after {
  border-color: inherit;
  display: block;
  -moz-transition: border-color 0.3s ease;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

.link-animation:before, .link-animation:after, .link-animation>:first-child:before, .link-animation>:first-child:after {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  position: absolute;
  box-sizing: border-box;
  content: ' ';
}

.link-animation>span>span:nth-child(3), .link-animation:before, .link-animation:after, .link-animation>:first-child:before, .link-animation>:first-child:after {
  border-width: 3px;
}

.link-animation>span>span:nth-child(3) {
  border-radius: 3px;
}

.link-animation:before {
  border-radius: 3px 0 0 3px;
}

.link-animation:after {
  border-radius: 0 3px 3px 0;
}

.link-animation>:first-child:before {
  border-radius: 3px 3px 0 0;
}

.link-animation>:first-child:after {
  border-radius: 0 0 3px 3px;
}

.link-animation>:first-child {
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}

.link-animation>span span {
  width: inherit;
  text-align: center;
  -moz-transition: opacity 0.6s ease, top 0.5s ease;
  -webkit-transition: opacity 0.6s ease, top 0.5s ease;
  transition: opacity 0.6s ease, top 0.5s ease;
}

.link-animation>span>span:nth-child(1) {
  opacity: 1;
  top: 18px;
}

.link-animation>span>span:nth-child(2) {
  top: 37px;
  opacity: 0;
}

.link-animation:hover>span>span:nth-child(1) {
  opacity: 0;
  top: 2px;
}

.link-animation:hover>span>span:nth-child(2) {
  opacity: 1;
  top: 18px;
}

.link-animation>span>span:nth-child(3) {
  top: 28%;
  height: 44%;
  width: inherit;
  border-style: none solid none solid;
}

.link-animation:before, .link-animation:after {
  top: 0;
  width: 0;
  height: inherit;
  border-style: solid none solid none;
}

.link-animation>:first-child:before, .link-animation>:first-child:after {
  left: 0;
  height: 0;
  width: inherit;
  border-style: none solid none solid;
}

.link-animation:before {
  -webkit-animation-name: left-center;
  animation-name: left-center;
}

.link-animation:after {
  -webkit-animation-name: right-center;
  animation-name: right-center;
}

.link-animation>:first-child:before {
  -webkit-animation-name: center-top;
  animation-name: center-top;
}

.link-animation>:first-child:after {
  -webkit-animation-name: center-bottom;
  animation-name: center-bottom;
}

.link-animation:hover:before {
  -webkit-animation-name: center-left;
  animation-name: center-left;
}

.link-animation:hover:after {
  -webkit-animation-name: center-right;
  animation-name: center-right;
}

.link-animation:hover>:first-child:before {
  -webkit-animation-name: top-center;
  animation-name: top-center;
}

.link-animation:hover>:first-child:after {
  -webkit-animation-name: bottom-center;
  animation-name: bottom-center;
}

/* Animation Menubar */
@-webkit-keyframes center-left{0%{left:40%;width:8%;opacity:0.2}25%{left:25%;width:15%}50%{left:0%;width:30%}80%{left:0%;width:0%}100%{left:0%;width:0%;opacity:1}}@-webkit-keyframes left-center{0%{left:0%;width:0%;opacity:1}20%{left:0%;width:0%}50%{left:0%;width:30%}55%{left:40%;width:11%}100%{left:43%;width:8%;opacity:0.2}}@-webkit-keyframes center-right{0%{left:52%;width:8%;opacity:0.2}25%{left:60%;width:15%}50%{left:70%;width:30%}80%{left:100%;width:0%}100%{left:100%;width:0%;opacity:1}}@-webkit-keyframes right-center{0%{left:100%;width:0%;opacity:1}20%{left:100%;width:0%}50%{left:70%;width:30%}55%{left:49%;width:11%}100%{left:49%;width:8%;opacity:0.2}}@-webkit-keyframes top-center{0%{top:0%;height:0%;opacity:0.2}50%{top:0%;height:0%}60%{top:0%;height:20%}80%{top:0%;height:50%}90%{top:25%;height:25%}100%{top:50%;height:0%;opacity:1}}@-webkit-keyframes center-top{0%{top:50%;height:0%;opacity:1}10%{top:25%;height:25%}20%{top:0%;height:50%}40%{top:0%;height:20%}50%{top:0%;height:0%}100%{top:0%;height:0%;opacity:0.2}}@-webkit-keyframes bottom-center{0%{top:100%;height:0%;opacity:0.2}50%{top:100%;height:0%}60%{top:80%;height:20%}80%{top:50%;height:50%}90%{top:50%;height:25%}100%{top:50%;height:0%;opacity:1}}@-webkit-keyframes center-bottom{0%{top:50%;height:0%;opacity:1}10%{top:50%;height:25%}20%{top:50%;height:50%}40%{top:80%;height:20%}50%{top:100%;height:0%}100%{top:100%;height:0%;opacity:0.2}}@keyframes center-left{0%{left:40%;width:8%;opacity:0.2}25%{left:25%;width:15%}50%{left:0%;width:30%}80%{left:0%;width:0%}100%{left:0%;width:0%;opacity:1}}@keyframes left-center{0%{left:0%;width:0%;opacity:1}20%{left:0%;width:0%}50%{left:0%;width:30%}55%{left:40%;width:11%}100%{left:43%;width:8%;opacity:0.2}}@keyframes center-right{0%{left:52%;width:8%;opacity:0.2}25%{left:60%;width:15%}50%{left:70%;width:30%}80%{left:100%;width:0%}100%{left:100%;width:0%;opacity:1}}@keyframes right-center{0%{left:100%;width:0%;opacity:1}20%{left:100%;width:0%}50%{left:70%;width:30%}55%{left:49%;width:11%}100%{left:49%;width:8%;opacity:0.2}}@keyframes top-center{0%{top:0%;height:0%;opacity:0.2}50%{top:0%;height:0%}60%{top:0%;height:20%}80%{top:0%;height:50%}90%{top:25%;height:25%}100%{top:50%;height:0%;opacity:1}}@keyframes center-top{0%{top:50%;height:0%;opacity:1}10%{top:25%;height:25%}20%{top:0%;height:50%}40%{top:0%;height:20%}50%{top:0%;height:0%}100%{top:0%;height:0%;opacity:0.2}}@keyframes bottom-center{0%{top:100%;height:0%;opacity:0.2}50%{top:100%;height:0%}60%{top:80%;height:20%}80%{top:50%;height:50%}90%{top:50%;height:25%}100%{top:50%;height:0%;opacity:1}}@keyframes center-bottom{0%{top:50%;height:0%;opacity:1}10%{top:50%;height:25%}20%{top:50%;height:50%}40%{top:80%;height:20%}50%{top:100%;height:0%}100%{top:100%;height:0%;opacity:0.2}}

/* banner styling */
 .banner {
  width: 100%;
  height: calc(100vh - 50px);
  background-image: url(../image/bg.jpg);
  background-size: cover;
}

.banner h3{
  font-size: 40px;
  color: #FCFCFC;
  letter-spacing: 2px;
  padding: 100px 0px 0px 110px;
  margin: 0;
}

.banner h1 {
  background: -webkit-linear-gradient(to right, #8700ff, #ff5858);
  background: linear-gradient(to right, #8700ff, #ff5858);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 110px;
  letter-spacing: 5px;
  padding: 0px 100px;
  text-transform: uppercase;
}

/* Hamburger Styling */
.hamburger {
  width: 40px;
  height: 20px;
  position: relative;
  cursor: pointer;
  line-height: 60px;
  z-index: 1500;
}

.hamburger .line {
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  position: absolute;
  display: block;
  right: 0;
  transition: all 650ms;
}

.hamburger .line:nth-child(1) {
  top: 0;
}

.hamburger .line:nth-child(2) {
  top: 50%;
  margin-top: -1px;
  width: 30px;
}

.hamburger .line:nth-child(3) {
  top: 100%;
  margin-top: -2px;
  width: 20px;
}

.hamburger.active .line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  width: 20px;
}

.hamburger.active .line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
  width: 20px;
}

.nav-list.active .nav-link {
  transform: scale(1);
}

.nav-list.active .nav-item {
  transition-delay: initial;
  visibility: visible;
}

.nav-list.active .nav-item:nth-child(1) .nav-link {
  transition-delay: .6s;
}

.nav-list.active .nav-item:nth-child(2) .nav-link {
  transition-delay: .5s;
}

.nav-list.active .nav-item:nth-child(3) .nav-link {
  transition-delay: .4s;
}

.nav-list.active .nav-item:nth-child(4) .nav-link {
  transition-delay: .3s;
}

.nav-list.active .nav-item:nth-child(5) .nav-link {
  transition-delay: .2s;
}

.nav-list.active .nav-item:nth-child(6) .nav-link {
  transition-delay: .1s;
}

/* Reverse Animation Nav-Link */
.nav-list .nav-item:nth-child(1) .nav-link {
  transition-delay: .1s;
}

.nav-list .nav-item:nth-child(2) .nav-link {
  transition-delay: .2s;
}

.nav-list .nav-item:nth-child(3) .nav-link {
  transition-delay: .3s;
}

.nav-list .nav-item:nth-child(4) .nav-link {
  transition-delay: .4s;
}

.nav-list .nav-item:nth-child(5) .nav-link {
  transition-delay: .5s;
}

.nav-list .nav-item:nth-child(6) .nav-link {
  transition-delay: .6s;
}



/* Media Screen And Max-Width All */
@media screen and (max-width: 500px){
    .nav-list{
        width: 60%;
        height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #670b88;
        position: fixed;
        left: 0;
        bottom: -100vh;
        transition: bottom 650ms;
    }
    .nav-list.active{
        bottom: 0;
    }
    .nav-item{
        margin: 20px 0;
    }
    .banner h3{
      padding: 90px 0px 0px 50px;
    }
    .banner h1{
      padding: 0px 0px 0px 40px;
    }
}

Finally, create a JS file with the name main.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.

// Function to select elements
const selectElement = (element) => document.querySelector(element);

selectElement('.hamburger').addEventListener('click', () =>{
selectElement('.hamburger').classList.toggle('active');
selectElement('.nav-list').classList.toggle('active');
});

That's it, now you have successfully created a Responsive Navbar, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Syiainfoku

Search this blog

Responsive Navbar with Hide Menubar

Preview Responsive Navbar with Hide Menubar

Source Code and Brief Explanation

Closing

Post a Comment

Nikmatnya Punya Doi Yandere 25 Rekomendasi Manga Heroine Yandere

MC Anti Naif Sama Licik Dong Min...? Buruan Cek 10 List Manga Isekai/Fantasy Ini!

Cari Manga MC Dikhianati, Balas Dendam? Coba Baca List Manga Berikut

Syiainfoku