<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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 class="navbar-brand" href="#">Admin SiderBar</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Option 1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Option 2</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="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><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Account <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><span class="fa fa-user"></span> Profile</a></li>
<li><a href="#"><span class="fa fa-envelope-o"></span> Contact</a></li>
<li><a href="#"><span class="fa fa-cogs"></span> Settings</a></li>
<li class="divider"></li>
<li><a href="#"><span class="fa fa-power-off"></span> Log Out</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav sider-navbar">
<li id="profile">
<figure class="profile-userpic">
<img src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" class="img-responsive" alt="Profile Picture">
</figure>
<div class="profile-usertitle">
<div class="profile-usertitle-name">That Person</div>
<div class="profile-usertitle-title">Administrator</div>
</div>
</li>
<li class="sider-menu">
<ul>
<li class="active"><a href="#"><span class="fa fa-fw fa-dashboard"></span> Dashboard</a></li>
<li>
<a href="#" data-toggle="collapse" data-target="#submenu-1"><span class="fa fa-database"></span> Database <span class="fa fa-fw fa-caret-down"></span></a>
<ul id="submenu-1" class="collapse">
<li><a href="#">MySQL</a></li>
<li><a href="#">PostgreSQL</a></li>
<li><a href="#">Oracle</a></li>
</ul>
</li>
<li><a href="#"><span class="fa fa-folder"></span> Files</a></li>
<li>
<a href="#" data-toggle="collapse" data-target="#submenu-2"><i class="fa fa-cog"></i> System <span class="fa fa-fw fa-caret-down"></span></a>
<ul id="submenu-2" class="collapse">
<li><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i> Statistics</a></li>
<li><a href="#"><i class="fa fa-code"></i> API</a></li>
<li><a href="#"><span class="fa fa-exclamation-circle"></span> Error Log</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section id="page-keeper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1>Content Section</h1>
</div>
<div class="col-md-3">
<h3>Left Header</h3>
<p>
Admin SiderBar was inspired by may different admin menu style found on the W3 and combined for my own admin template. Feel free to use it. I hope it helps. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
<div class="col-md-9">
<h3>Right Header</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</section>
/*font Awesome http://fontawesome.io*/
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
body {
margin-top:45px;
}
/*--------------------------------------------------------------------------
Navbar Style
--------------------------------------------------------------------------*/
.navbar {
border-bottom-left-radius:0; /*Change bootstrap default border-radius for menu*/
}
@media(min-width:768px) {
.navbar .navbar-brand {
width:224px; /*Change the width of .navbar-brand to center text and align with .sider-navbar border-right*/
text-align: center;
}
}
/*--------------------------------------------------------------------------
Side Navigation
--------------------------------------------------------------------------*/
@media(min-width:768px) {
.sider-navbar {
position: fixed;
top: 51px; /*Change to reposition .sider-navbar from top*/
left: 225px;
width: 225px;
margin-left: -225px;
border-right:1px solid #E7E7E7; /*Change for right side border color*/
border-radius: 0;
overflow-y: auto;
background: #F8F8F8; /*Change for background color*/
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
}
.sider-navbar li.sider-menu {
}
.sider-navbar li.sider-menu ul {
width: 225px;
}
.sider-navbar li.sider-menu > ul > li,
.sider-navbar li.sider-menu ul li ul li{
border-top:1px solid #E7E7E7;/*Change for .sider-menu border color*/
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.sider-navbar li.sider-menu > ul > li:last-child {
border-bottom:1px solid #E7E7E7;/*Change for .sider-menu border color*/
}
.sider-navbar li.sider-menu > ul > li.active,
.sider-navbar li.sider-menu > ul > li:hover,
.sider-navbar li.sider-menu ul li ul li:hover{
border-right:6px solid #dddddd;
}
.sider-navbar li.sider-menu ul li ul li:hover{
background:#FFFFFF;/*Change for .sider-menu border color*/
}
.sider-navbar li.sider-menu ul li a {
outline: none;
padding:15px;
}
}
.sider-navbar li.sider-menu ul {
list-style:none;
padding: 0;
}
.sider-navbar li.sider-menu ul li a {
display: block;
padding:15px;
text-decoration: none;
color:#5E5E5E;/*Change for .sider-menu color*/
}
.sider-navbar li.sider-menu ul li ul {
background-color:#f3f3f3;/*Change for .sider-menu background-color*/
}
/*--------------------------------------------------------------------------
Profile container
Thanks to keenthemes' bootstrap snippet for a starting point for the styles
http://bootsnipp.com/snippets/featured/user-profile-sidebar
--------------------------------------------------------------------------*/
#profile {
}
.profile-userpic img {
float: none;
margin: 12px auto 0;
padding:6px;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
border-left: 4px solid #333333;
border-right: 4px solid #333333;
}
.profile-usertitle {
text-align: center;
margin-top: 16px;
color: #333333;
}
.profile-usertitle-name {
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-title {
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
/*Hide profile picture on smaller devices*/
@media(max-width:768px) {
#profile {
display:none;
}
}
/*--------------------------------------------------------------------------
Page Keeper
Setup layout so the main content will be to the right of .sider-navbar
--------------------------------------------------------------------------*/
@media(min-width:768px) {
#page-keeper {
width: 100%;
padding: 10px 10px 10px 225px;
}
}
