garybunofsky/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
nav {
  display:flex;
  background:#eaeaea;
}

nav .hamburger {
  flex: 10%;
  border-radius:4px;
  padding:0.25em;
  background:#d2d2d2;
}

nav ul {
  flex:90%;
  display: flex;
  justify-content: space-between;
  list-style-type:none;
}

nav ul li {
  flex:1;
}

nav ul,
nav .sub-nav {
  display:none;
}


.isOpened {
  display:block;
}

@media screen and (min-width: 960px) {
  nav ul {
    display:flex;
  }

  nav ul li:hover .sub-nav {
    display:block;
  }

  nav .hamburger {
    display:none;
  }
}
</style>
</head>
<body>
  <nav>
    <ul id="main">
      <li>Item</li>
      <li>Item</li>
      <li>
        Item
        <ul class="sub-nav">
          <li>Sub Nav Item</li>
          <li>Sub Nav Item</li>
        </ul>
      </li>
      <li>Item</li>
    </ul>
    <span class="hamburger" id="menu">Menu</span>
  </nav>

<script id="jsbin-javascript">
var hamburger = document.getElementById('menu');
var main = document.getElementById('main');

var isDesktop = function () {
  var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth;

  console.log('The width is ' + x);
  if (x < 961) {
    return false;
  } else {
    return true;
  }
}

hamburger.addEventListener('click', function(){
  main.classList.toggle('isOpened');
});

console.log(isDesktop());
</script>


<script id="jsbin-source-css" type="text/css">nav {
  display:flex;
  background:#eaeaea;
}

nav .hamburger {
  flex: 10%;
  border-radius:4px;
  padding:0.25em;
  background:#d2d2d2;
}

nav ul {
  flex:90%;
  display: flex;
  justify-content: space-between;
  list-style-type:none;
}

nav ul li {
  flex:1;
}

nav ul,
nav .sub-nav {
  display:none;
}


.isOpened {
  display:block;
}

@media screen and (min-width: 960px) {
  nav ul {
    display:flex;
  }

  nav ul li:hover .sub-nav {
    display:block;
  }

  nav .hamburger {
    display:none;
  }
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">var hamburger = document.getElementById('menu');
var main = document.getElementById('main');

var isDesktop = function () {
  var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth;

  console.log('The width is ' + x);
  if (x < 961) {
    return false;
  } else {
    return true;
  }
}

hamburger.addEventListener('click', function(){
  main.classList.toggle('isOpened');
});

console.log(isDesktop());</script></body>
</html>

## jsbin.untitled.css
nav {
  display:flex;
  background:#eaeaea;
}

nav .hamburger {
  flex: 10%;
  border-radius:4px;
  padding:0.25em;
  background:#d2d2d2;
}

nav ul {
  flex:90%;
  display: flex;
  justify-content: space-between;
  list-style-type:none;
}

nav ul li {
  flex:1;
}

nav ul,
nav .sub-nav {
  display:none;
}


.isOpened {
  display:block;
}

@media screen and (min-width: 960px) {
  nav ul {
    display:flex;
  }

  nav ul li:hover .sub-nav {
    display:block;
  }

  nav .hamburger {
    display:none;
  }
}

## jsbin.untitled.js
var hamburger = document.getElementById('menu');
var main = document.getElementById('main');

var isDesktop = function () {
  var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth;

  console.log('The width is ' + x);
  if (x < 961) {
    return false;
  } else {
    return true;
  }
}

hamburger.addEventListener('click', function(){
  main.classList.toggle('isOpened');
});

console.log(isDesktop());
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	nav {
	display:flex;
	background:#eaeaea;
	}

	nav .hamburger {
	flex: 10%;
	border-radius:4px;
	padding:0.25em;
	background:#d2d2d2;
	}

	nav ul {
	flex:90%;
	display: flex;
	justify-content: space-between;
	list-style-type:none;
	}

	nav ul li {
	flex:1;
	}

	nav ul,
	nav .sub-nav {
	display:none;
	}


	.isOpened {
	display:block;
	}

	@media screen and (min-width: 960px) {
	nav ul {
	display:flex;
	}

	nav ul li:hover .sub-nav {
	display:block;
	}

	nav .hamburger {
	display:none;
	}
	}
	</style>
	</head>
	<body>
	<nav>
	<ul id="main">
	<li>Item</li>
	<li>Item</li>
	<li>
	Item
	<ul class="sub-nav">
	<li>Sub Nav Item</li>
	<li>Sub Nav Item</li>
	</ul>
	</li>
	<li>Item</li>
	</ul>
	<span class="hamburger" id="menu">Menu</span>
	</nav>

	<script id="jsbin-javascript">
	var hamburger = document.getElementById('menu');
	var main = document.getElementById('main');

	var isDesktop = function () {
	var w = window,
	d = document,
	e = d.documentElement,
	g = d.getElementsByTagName('body')[0],
	x = w.innerWidth \|\| e.clientWidth \|\| g.clientWidth;

	console.log('The width is ' + x);
	if (x < 961) {
	return false;
	} else {
	return true;
	}
	}

	hamburger.addEventListener('click', function(){
	main.classList.toggle('isOpened');
	});

	console.log(isDesktop());
	</script>


	<script id="jsbin-source-css" type="text/css">nav {
	display:flex;
	background:#eaeaea;
	}

	nav .hamburger {
	flex: 10%;
	border-radius:4px;
	padding:0.25em;
	background:#d2d2d2;
	}

	nav ul {
	flex:90%;
	display: flex;
	justify-content: space-between;
	list-style-type:none;
	}

	nav ul li {
	flex:1;
	}

	nav ul,
	nav .sub-nav {
	display:none;
	}


	.isOpened {
	display:block;
	}

	@media screen and (min-width: 960px) {
	nav ul {
	display:flex;
	}

	nav ul li:hover .sub-nav {
	display:block;
	}

	nav .hamburger {
	display:none;
	}
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">var hamburger = document.getElementById('menu');
	var main = document.getElementById('main');

	var isDesktop = function () {
	var w = window,
	d = document,
	e = d.documentElement,
	g = d.getElementsByTagName('body')[0],
	x = w.innerWidth \|\| e.clientWidth \|\| g.clientWidth;

	console.log('The width is ' + x);
	if (x < 961) {
	return false;
	} else {
	return true;
	}
	}

	hamburger.addEventListener('click', function(){
	main.classList.toggle('isOpened');
	});

	console.log(isDesktop());</script></body>
	</html>