Skip to content

Instantly share code, notes, and snippets.

@wizardjedi

wizardjedi/css.css

Created March 23, 2019 17:34
Show Gist options
  • Save wizardjedi/9293e85d87fdfe85486ae05cd4807baf to your computer and use it in GitHub Desktop.
Save wizardjedi/9293e85d87fdfe85486ae05cd4807baf to your computer and use it in GitHub Desktop.
Download ZIP
simple sidebar
Raw
css.css
@media screen and (max-width: 801px) {
.wrapper {
display: flex;
flex-direction: column;
width: 100vw;
}
#sidebar {
display: block;
}
#sidebar-toggle-button {
display: none;
}
}
@media screen and (min-width: 801px) {
.wrapper {
display: flex;
flex-direction: row;
width: 100vw;
}
#sidebar {
display: block;
width: 200px;
min-width: 200px;
min-height: 100vh;
background: #7386D5;
color: #fff;
transition: all 0.3s;
flex:1;
overflow: scroll;
}
#sidebar li.nav-link a {
min-width: 200px;
display: block;
}
}
#sidebar {
background-color: gray;
}
#content {
width: 100vw;
padding: 5px;
}
Raw
html.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<ul class="nav">
<li class="nav-link">
<a href="#">Item</a>
</li>
<li class="nav-link">
<a href="#">Item</a>
</li>
<li class="nav-link">
<a href="#">Item</a>
</li>
<li class="nav-link">
<a href="#">Item</a>
</li>
<li class="nav-link">
<a href="#">Item</a>
</li>
</ul>
</nav>
<div id="content">
<button id="sidebar-toggle-button" class="btn btn-primary" onclick="return toogleSidebar();">
<span class="fa fa-bars"></span>
Toggle
</button>
<div class="container-fluid">
Content goes here++++++++++++++++ ++++ ++++++ +++++++++++++++++++++ +++++++++ +++++++++++ ++++++++++
dada<br />
<input type="checkbox" checked id="toggle" />
<div id="t">
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />
dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />dada<br />
</div>
</div>
</div>
</div>
</body>
</html>
Raw
js.js
function toogleSidebar() {
var o = document.getElementById("sidebar");
if (o.style.display != "none") {
o.style.display = "none";
} else {
o.style.display = "block";
}
return false;
}
window
.addEventListener(
"resize",
function(event) {
if (window.innerWidth<600) {
document.getElementById("sidebar").style.display='block';
}
}
);
document
.getElementById("toggle")
.addEventListener(
"change",
function(event) {
document.getElementById("t").style.display = event.target.checked ? "block" : "none";
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment