<header class="top_nav">
  <button id="expand_nav">Portfolio</button>
</header>

<nav class="nav_boxes">
  <!--begin box 1 anchor DIV-->
  <a href="#" class="box box_1"><h2>Future Portfolio Piece</h2></a>
  <!--begin box 2 anchor DIV-->
  <a href="#" class="box box_2"><h2>Link 2</h2></a>
  <!--begin box 3 anchor DIV-->
  <a href="#" class="box box_3"><h2>Link 3</h2></a>
  <!--begin box 4 anchor DIV-->
  <a href="#" class="box box_4"><h2>Link 4</h2></a>
  <!--begin box 5 anchor DIV-->
  <a href="#" class="box box_5"><h2>Link 5</h2></a>
  <!--begin box 5 anchor DIV-->
  <a href="#" class="box box_6"><h2>Link 6</h2></a>
    <!--begin box 2 anchor DIV-->
  <a href="#" class="box box_2"><h2>Link 2</h2></a>
    <!--begin box 2 anchor DIV-->
  <a href="#" class="box box_2"><h2>Link 2</h2></a>
  
</nav>
body {
  background-color: tan;
}

* {
  box-sizing: border-box;
}

#expand_nav {
  height: 75px;
  text-align: center;
  background-color: green;
  color: white;
  font-size: 50px;
}

#expand_nav:hover {
  background-color: white;
  color: green;
  border: green solid 5px;
}

.nav_boxes {
  width:100%;
  display: none;
}

.box {
  width: 15%;
  height: 20%;
  margin: 2.5%;
  float: left;
  text-align: center;
}

.box:nth-child(odd) {
  background-color: white;
  color: black;
  text-decoration: none;
}

.box:nth-child(even) {
  background-color: black;
  color: white;
  text-decoration: none;
}

.box:nth-child(odd):hover {
  background-color: green;
  color: white;
  border: white solid 5px;
  text-decoration: none;
}

.box:nth-child(even):hover {
  background-color: white;
  color: green;
  border: green solid 5px;
  text-decoration: none;
}
// Do not execute jquery until the DOM is ready
$(document).ready(function() {
  var isOpen= false;
  // create handle to jQuery object
  var $button= $("#expand_nav");
  var $boxes= $(".nav_boxes");
  var $box= $(".box");
  
  // on click run nav_handler function
  $button.click(nav_handler);
  // $button.click(alert("YOU CLICKED THE BUTTON."));
  // if you click outside of the buttons, close box navigation
  $(document).click(close_nav);
  $box.click(function(e) {
    e.stopPropagation();       
  });
  
  
  
  function nav_handler() {
  // stop click event from affecting parent  
    event.stopPropagation();
   // Use ternary to alternate between open and closed
    isOpen ? close_nav() : open_nav(); 
  } // end of nav_handler
  
  function open_nav() {
    isOpen= true;
    $boxes.stop().slideDown();
    $box.stop().animate( {"width": "20%"});
  } // end of open_nav 
  
  function close_nav(){
    isOpen= false;
    $boxes.stop().slideUp();
    $box.stop().animate( {"width": "0%"});    
  }
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js