Navbar

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="navbar.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Tests</title>
  </head>
  <body>
    <header>
      <div id="navbar">
        <div id="link1" class="navbar-items"><a href="">Test</a></div>
        <div id="link2" class="navbar-items"><a href="">Test</a></div>
        <div id="link3" class="navbar-items"><a href="">Test</a></div>
        <div id="link4" class="navbar-items"><a href="">Test</a></div>
        <div id="link5" class="navbar-items"><a href="">Test</a></div>
      </div>
      <div class="navbar-open">
        <div>Logo</div>
        <div></div>
        <div class="button-section">
          <button id="menu-button">Meniu</button>
        </div>
      </div>
    </header>
    <div id="content">
    Click on a link above to see how it closes.
    </div>
    <script src="navbar.js"></script>
  </body>
</html>

CSS

body {
  margin: 0;
  transition: 0.6s ease-in-out 0s;
}

#navbar {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  background-color: rgb(36, 36, 36);
  height: 120px;
  width: 100vw;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  position: absolute;
  transition: top 0.6s ease-in-out 0s;
  top: -120px;
}

.navbar-items {
  text-align: center;
  vertical-align: center;
  border: 1px solid rgb(63, 63, 63);
  cursor: pointer;
}

.navbar-items:hover {
  background-color: rgb(63, 63, 63);
}

.navbar-items > a {
  color: white;
  text-decoration: none;
  position: relative;
  top: 60%;
}

.navbar-items > a::before {
  content: url("home.svg");
  position: absolute;
  top: -60px;
}


.navbar-open {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  padding: 5px;
  color: white;
  vertical-align: middle;
  line-height: 40px;
  text-align: center;
  background-color: rgb(63, 63, 63);
  height: 40px;
  width: 100%;
}

#menu-button {
  border: none;
  background: none;
  color: white;
  cursor: pointer;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  transition: 1s;
}

#menu-button::after {
  content: "";
  width: 0px;
  transition: width 0.4s ease-in-out;
}

#menu-button:hover::after {
  content: "";
  background: white;
  border: 1px solid white;
  width: 30px;
  position: absolute;
  transform: translateY(20px) translateX(-38px);
}

#content {
  height: 500px;
}

JavaScript

$(document).ready(function() {
  function closeNavbar(redirect) {
    $("#navbar").css("top", "-120px");
    $("body").css("margin-top", "0px");
    var link = this.id;
    setTimeout(function() {
      alert("this works");
    }, 800);
  }

  function openNavbar() {
    $("#navbar").css("top", "0px");
    $("body").css("margin-top", "120px");
  }

  $(document).mouseup(function(e) {
    var container = $("header");
    if (!container.is(e.target) && !container.has(e.target).length) {
      container.css("top", "-120px");
      container.css("margin-top", "0px");
    }
  });

  $(".navbar-items").click(closeNavbar);
  $("#menu-button").click(openNavbar);
  $(".navbar-items").mouseover(changeSVG);
  $("#content").click(closeNavbar);
});