Skip to content

Instantly share code, notes, and snippets.

@jesperkc

jesperkc/jsbin.ukozIWU.html

Last active April 19, 2018 06:13
Show Gist options
  • Save jesperkc/6902647 to your computer and use it in GitHub Desktop.
Save jesperkc/6902647 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap side nav
Raw
jsbin.ukozIWU.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Bootstrap side nav" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<!-- Docs master nav -->
<header class="navbar navbar-default navbar-inverse navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand">Bootstrap</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div class="container">
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
<div class="row">
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
</div>
</div>
</body>
</html>
Raw
jsbin.ukozIWU.js
$(function(){
$(".navbar-toggle").click(function(){
$("body").toggleClass("navbar-collapse-in");
});
});
Raw
jsbin.ukozIWU.less
@navwidth: 250px;
@slideduration: .5s;
@media (max-width: 759px) {
.navbar-fixed-top{
-webkit-transition: left @slideduration ease, right @slideduration ease;
transition: left @slideduration ease, right @slideduration ease;
}
body{
-webkit-transition: margin-left @slideduration ease, margin-right @slideduration ease;
transition: margin-left @slideduration ease, margin-right @slideduration ease;
}
body.navbar-collapse-in{
margin-left: -@navwidth;
margin-right: @navwidth;
overflow: hidden;
}
body.navbar-collapse-in .navbar-fixed-top{
left: -@navwidth;
right: @navwidth;
}
.navbar-collapse{
width: @navwidth;
position: fixed;
top: 0px;
bottom: 0px;
background-color: #333;
margin: 0px !important;
overflow: auto;
overflow-x: hidden;
-webkit-transition: right @slideduration ease;
transition: right @slideduration ease;
display: block !important;
max-height: 100%;
border: 0;
box-shadow: inset 0px 1px 30px rgba(0,0,0,0.5);
}
body .navbar-collapse{
-webkit-transition: right @slideduration ease;
transition: right @slideduration ease;
right: -@navwidth;
display: block !important;
height: 100% !important;
}
body.navbar-collapse-in .navbar-collapse{
-webkit-transition: right @slideduration ease;
transition: right @slideduration ease;
right: 0px;
}
}
@yaxx
Copy link

yaxx commented Nov 26, 2017

adding a preview would have make more sense

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment