Skip to content

Instantly share code, notes, and snippets.

@FernandoCelmer

FernandoCelmer/bootstrap-sidebar.markdown

Created March 21, 2023 14:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FernandoCelmer/f3d77aec9e1d9a973e0a1089774044ba to your computer and use it in GitHub Desktop.
Save FernandoCelmer/f3d77aec9e1d9a973e0a1089774044ba to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap sidebar
Raw
index.html
<nav class="mnb navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<i class="ic fa fa-bars"></i>
</button>
<div style="padding: 15px 0;">
<a href="#" id="msbo"><i class="ic fa fa-bars"></i></a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">En</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Draude Oba <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Settings</a></li>
<li><a href="#">Upgrade</a></li>
<li><a href="#">Help</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bell-o"></i></a></li>
<li><a href="#"><i class="fa fa-comment-o"></i></a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<!--msb: main sidebar-->
<div class="msb" id="msb">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="brand-wrapper">
<!-- Brand -->
<div class="brand-name-wrapper">
<a class="navbar-brand" href="#">
SAITAMA
</a>
</div>
</div>
</div>
<!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<li class="active"><a href="#"><i class="fa fa-puzzle-piece"></i> Components</a></li>
<li><a href="#"><i class="fa fa-heart"></i> Extras</a></li>
<!-- Dropdown-->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl1">
<i class="fa fa-diamond"></i> Apps
<span class="caret"></span>
</a>
<!-- Dropdown level 1 -->
<div id="dropdown-lvl1" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li><a href="#">Mail</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Ecommerce</a></li>
<li><a href="#">User</a></li>
<li><a href="#">Social</a></li>
<!-- Dropdown level 2 -->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl2">
<i class="glyphicon glyphicon-off"></i> Sub Level <span class="caret"></span>
</a>
<div id="dropdown-lvl2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<!--main content wrapper-->
<div class="mcw">
<!--navigation here-->
<!--main content view-->
<div class="cv">
<div>
<div class="inbox">
<div class="inbox-sb">
</div>
<div class="inbox-bx container-fluid">
<div class="row">
<div class="col-md-2">
<ul>
<li><a href="#">Inbox</a></li>
<li><a href="#">Sent</a></li>
<li><a href="#">Trash</a></li>
</ul>
</div>
<div class="col-md-10">
<table class="table table-stripped">
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td><i class="fa fa-star"></i></td>
<td><b>Mozilla</b></td>
<td><b>In celebration of women and girls everywhere</b></td>
<td></td>
<td>Mar 10</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><i class="fa fa-star-o"></i></td>
<td>Dan Glenn</td>
<td>[ptcuser-announcements] - PTC/USER Expert Speaker Series Webinar March 9, 2017 11AM (EST)</td>
<td><i class="fa fa-paperclip"></i></td>
<td>Mar 10</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><i class="fa fa-star-o"></i></td>
<td>Jetpack</td>
<td>Announcing some highly requested improvements and our new affiliate program</td>
<td></td>
<td>Mar 08</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><i class="fa fa-star-o"></i></td>
<td>Jetpack</td>
<td>Announcing some highly requested improvements and our new affiliate program</td>
<td></td>
<td>Mar 08</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><i class="fa fa-star-o"></i></td>
<td>Jetpack</td>
<td>Announcing some highly requested improvements and our new affiliate program</td>
<td></td>
<td>Mar 08</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><i class="fa fa-star-o"></i></td>
<td>Jetpack</td>
<td>Announcing some highly requested improvements and our new affiliate program</td>
<td></td>
<td>Mar 08</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><i class="fa fa-star-o"></i></td>
<td>Jetpack</td>
<td>Announcing some highly requested improvements and our new affiliate program</td>
<td></td>
<td>Mar 08</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><i class="fa fa-star-o"></i></td>
<td>Jetpack</td>
<td>Announcing some highly requested improvements and our new affiliate program</td>
<td></td>
<td>Mar 08</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Raw
script.js
(function(){
$('#msbo').on('click', function(){
$('body').toggleClass('msb-x');
});
}());
Raw
scripts
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.scss
body {
margin-top: 50px;
background-color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
letter-spacing: 0.01em;
color: #39464e;
}
.navbar-default {
background-color: #fff;
margin-left: 200px;
}
/*main side bar*/
.msb {
width: 200px;
background-color: #f5f7f9;
position: fixed;
left: 0;
top: 0;
right: auto;
min-height: 100%;
overflow-y: auto;
white-space: nowrap;
height: 100%;
z-index: 1;
border-right: 1px solid #ddd;
.navbar {
border: none;
margin-left: 0;
background-color: inherit;
}
.navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
margin-bottom: 20px;
background: #fff;
}
.navbar-nav {
.panel {
border: 0 none;
box-shadow: none;
margin: 0;
background: inherit;
}
li {
display: block;
width: 100%;
a {
padding: 15px;
color: #5f5f5f;
.glyphicon,
.fa {
margin-right: 8px;
}
}
}
}
.nb {
padding-top: 5px;
padding-left: 10px;
margin-bottom: 30px;
overflow: hidden;
}
}
/*sb: sidebar*/
/*nv: nav*/
ul.nv,
ul.ns {
position: relative;
padding: 0;
list-style: none;
}
.nv {
li {
display: block;
position: relative;
&::before {
clear: both;
content: "";
display: table;
}
a {
color: #444;
padding: 10px 25px;
display: block;
vertical-align: middle;
.ic {
font-size: 16px;
margin-right: 5px;
font-weight: 300;
display: inline-block;
}
}
}
/*ns: nav-sub*/
.ns {
li {
a {
padding: 10px 50px;
}
}
}
}
/*main content wrapper*/
.mcw {
margin-left: 200px;
position: relative;
min-height: 100%;
/*content view*/
.cv {
}
}
/*globals*/
a,
a:focus,
a:hover {
text-decoration: none;
}
.inbox {
.container-fluid {
padding-left: 0;
padding-right: 0;
}
ul,
li {
margin: 0;
padding: 0;
}
ul {
li {
list-style: none;
a {
display: block;
padding: 10px 20px;
}
}
}
}
.msb,
.mnb {
-moz-animation: slidein 300ms forwards;
-o-animation: slidein 300ms forwards;
-webkit-animation: slidein 300ms forwards;
animation: slidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mcw {
-moz-animation: bodyslidein 300ms forwards;
-o-animation: bodyslidein 300ms forwards;
-webkit-animation: bodyslidein 300ms forwards;
animation: bodyslidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body.msb-x {
.mcw,
.mnb {
margin-left: 0;
-moz-animation: bodyslideout 300ms forwards;
-o-animation: bodyslideout 300ms forwards;
-webkit-animation: bodyslideout 300ms forwards;
animation: bodyslideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.msb {
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
}
/* Slide in animation */
@-moz-keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
@-webkit-keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
@keyframes slidein {
0% {
left: -200px;
}
100% {
left: 0;
}
}
@-moz-keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
@-webkit-keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
@keyframes slideout {
0% {
left: 0;
}
100% {
left: -200px;
}
}
@-moz-keyframes bodyslidein {
0% {
left: 0;
}
100% {
margin-left: 200px;
}
}
@-webkit-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 0;
}
}
@keyframes bodyslidein {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
@-moz-keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-right: 0;
}
}
@-webkit-keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-left: 0;
}
}
@keyframes bodyslideout {
0% {
margin-left: 200px;
}
100% {
margin-left: 0;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment