JS Hamburger Menu

by Matthew Schenker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="hamburger-open-box">
  <button class="hamburger">&#9776;</button>
</div>

<div class="hamburger-menu-box">
  <button class="cross">&#735;</button>
  <ul>
    <li><a href="#">LINK ONE</a></li>
    <li><a href="#">LINK TWO</a></li>
    <li><a href="#">LINK THREE</a></li>
    <li><a href="#">LINK FOUR</a></li>
    <li><a href="#">LINK FIVE</a></li>
    <li><a href="#">LINK SIX</a></li>
  </ul>
</div>

CSS

.hamburger-open-box {
  width: 100%;
  background: #999;
  height: 60px;
}

.hamburger {
  background: none;
  position: absolute;
  top: 10px;
  right: 0;
  padding: 5px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 1.4em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.cross {
  background: none;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  border: 0;
  font-size: 3em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.hamburger-menu-box {
  z-index: 1000000;
  font-weight: bold;
  font-size: 0.8em;
  background: #000;
  position: absolute;
  width: 250px;
  right: 8px;
  padding-bottom: 10px;
}

.hamburger-menu-box ul {
  margin: 20px 0 0 10px;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

.hamburger-menu-box li,
.hamburger-menu-box li:hover {
  display: block;
  padding: 10px 0 10px 0;
}

.hamburger-menu-box ul li a {
  text-decoration: none;
  margin: 0px;
  color: #fff;
}

.hamburger-menu-box ul li a:hover {
  color: #fff;
  text-decoration: none;
}

.hamburger-menu-box a,
.hamburger-menu-box a:hover {
  text-decoration: none;
  color: #fff;
}

JavaScript

$(".cross").hide();
$(".hamburger-menu-box").hide();
$(".hamburger").click(function() {
  $(".hamburger-menu-box").slideToggle("slow", function() {
    $(".hamburger").hide();
    $(".cross").show();
  });
});

$(".cross").click(function() {
  $(".hamburger-menu-box").slideToggle("slow", function() {
    $(".cross").hide();
    $(".hamburger").show();
  });
});