Skip to content

Instantly share code, notes, and snippets.

@garybunofsky

garybunofsky/index.html

Created January 2, 2018 13:43
Show Gist options
  • Save garybunofsky/a922f73302c8fc3cef77dbfeb658e1e6 to your computer and use it in GitHub Desktop.
Save garybunofsky/a922f73302c8fc3cef77dbfeb658e1e6 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
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>
Raw
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;
}
}
Raw
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());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment