Skip to content

Instantly share code, notes, and snippets.

@bot-nosense

bot-nosense/index.html

Created April 13, 2023 11:03
Show Gist options
  • Save bot-nosense/a6d667b99dd0c50c5bc0ce18a4f84a87 to your computer and use it in GitHub Desktop.
Save bot-nosense/a6d667b99dd0c50c5bc0ce18a4f84a87 to your computer and use it in GitHub Desktop.
Download ZIP
SideNav
Raw
index.html
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
<h1 class="text-center">Bootstrap Sidebar</h1>
<h2 class="small text-center">Second Header</h2>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
</div>
</div>
</div>
</div>
</div>
</body>
Raw
script.js
$(document).ready(function(){
$("#menu-toggle").click(function(e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.css
/* Sidebar */
#sidebar-wrapper{
z-index:1;
position: absolute;
width:0;
height:100%;
overflow-y:hidden;
background: #5b4282;
opacity:0.9;
transition:all .5s;
display:flex;
align-items:center;
}
/* Main Content */
#page-content-wrapper{
width: 100%;
position: absolute;
padding:15px;
transition:all .5s;
}
#menu-toggle{
transition:all .3s;
font-size:2em;
}
/* Change the width of the sidebar to display it*/
#wrapper.menuDisplayed #sidebar-wrapper{
width:250px;
}
#wrapper.menuDisplayed #page-content-wrapper{
padding-left:250px;
}
/* Sidebar styling */
.sidebar-nav{
padding:0;
list-style:none;
transition:all .5s;
width:100%;
text-align:center;
}
.sidebar-nav li{
line-height:40px;
width:100%;
transition:all .3s;
padding:10px;
}
.sidebar-nav li a {
display:block;
text-decoration:none;
color:#ddd;
}
.sidebar-nav li:hover{
background:#846bab;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment