<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%"});
}
});
This Pen doesn't use any external CSS resources.