<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<a class="navbar-brand" href="#">BS <strong>Hover Sidebar</strong></a>
<br class="hidden-lg-up">
<br class="hidden-lg-up">
<ul class="nav navbar-nav hidden-lg-up">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" title="Go to About Us section">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume" title="Navigate to Jonathan Adcox IT Resume">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills" title="Navigate to 'Our Services' section">Skills</a>
</li>
</ul>
<ul class="nav navbar-nav hidden-md-down float-lg-right">
<li class="nav-item">
<button id="menu-toggle" href="#" class="navbar-toggler float-lg-right toggle" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation"></button>
</li>
</ul>
<form class="form-inline float-lg-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<nav id="sidebar-wrapper" class="navbar-dark bg-primary">
<ul class="sidebar-nav">
<a id="menu-close" href="#" type="button" class="btn btn-danger close hidden-lg-up float-xs-right toggle" data-dismiss="sidebar-wrapper" aria-label="Close"></a>
<li class="sidebar-brand">
<a href="#top">BS <strong>Hover Sidebar</strong></a>
</li>
<li>
<a href="#top" title="Go to Top">Home</a>
</li>
<li>
<a href="#about" title="Go to About Us section">About</a>
</li>
<li>
<a href="#resume" title="Navigate to Jonathan Adcox IT Resume">Resume</a>
</li>
<li>
<a href="#skills" title="Navigate to 'Our Services' section">Skills</a>
</li>
</ul>
</nav>
</div>
</nav>
<div class="container">
<div class="row">
<h2 class="text-xs-center">Demo Header</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan mi eros, bibendum pellentesque augue maximus sed. Vestibulum interdum purus at luctus consequat. Phasellus ac aliquam massa. In at cursus velit. Ut purus purus, consequat ac elit et, mattis pellentesque leo. Aliquam luctus est sed urna sollicitudin, sed interdum felis volutpat. In sed dolor ac turpis porttitor interdum. Vestibulum egestas urna nec ligula finibus tincidunt. Quisque non augue eros. In dignissim, ex nec scelerisque ultrices, arcu dui consectetur ante, sed feugiat risus sem varius lectus. Maecenas non imperdiet tortor. In vel fringilla urna, in scelerisque nibh.
</p>
</div>
<div class="row">
<h2 class="text-xs-center">I am Viewport Responsive</h2>
<p>
Change the screen size. notice how the sidebar disapears? Notice how the navbar is filled with links. It is a simple hide effect with Bootstrap.
</p>
</div>
<hr>
</div>
/* Global Styles */
*, *:before, *:after{
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body{
width: 100%;
height: 100%;
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
overflow-x:hidden;
margin-top:55px;
}
html{
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6{
margin: 0 0 35px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 800;
letter-spacing: 1px;
}
section{
padding-bottom:5%;
}
.row{
position:relative;
}
.row:first-child{
position: relative;
margin-top:80px !important;
}
/* BS4 CSS that seems not to work */
.float-xs-left {
float: left!important
}
.float-xs-right {
float: right!important
}
.float-xs-none {
float: none!important
}
@media (min-width:576px) {
.float-sm-left {
float: left!important
}
.float-sm-right {
float: right!important
}
.float-sm-none {
float: none!important
}
}
@media (min-width:768px) {
.float-md-left {
float: left!important
}
.float-md-right {
float: right!important
}
.float-md-none {
float: none!important
}
}
@media (min-width:992px) {
.float-lg-left {
float: left!important
}
.float-lg-right {
float: right!important
}
.float-lg-none {
float: none!important
}
}
@media (min-width:1200px) {
.float-xl-left {
float: left!important
}
.float-xl-right {
float: right!important
}
.float-xl-none {
float: none!important
}
}
@-ms-viewport {
width: device-width;
}
.navbar-fixed-top{
z-index:2000 !important;
}
/* Sidebar Nav Styles */
#sidebar-wrapper {
z-index: -1 !important;
position: fixed;
right: 0;
width: 250px;
height: 100%;
margin-right: -250px;
overflow-y: auto;
/* background: #0275d8; */
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.sidebar-nav {
position: absolute;
top: 12%;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
font-size: 110%;
font-weight: 800;
text-transform: uppercase;
outline: none;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: -1;
height: 100%;
width: 3px;
/* background-color: #1c1c1c; */
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a !important;
}
.sidebar-nav li:nth-child(2):before {
color: #fff;
background-color: #1a1a1a !important;
}
.sidebar-nav li:nth-child(3):before {
background-color: #ec1b5a !important;
}
.sidebar-nav li:nth-child(4):before {
background-color: #79aefe !important;
}
.sidebar-nav li:nth-child(5):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(6):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(7):before {
background-color: #7d5d81 !important;
}
.sidebar-nav li:nth-child(8):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(9):before {
background-color: #2d2366 !important;
}
.sidebar-nav li:nth-child(10):before {
background-color: #35acdf;
}
.sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 44px;
font-size: 18px;
line-height: 1.43;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
box-shadow: none;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
$(document).ready(function()
{
// Closes the sidebar menu on menu-close button click event
$("#menu-close").click(function(e) //declare the element event ...'(e)' = event (shorthand)
{
// - will not work otherwise")
$("#sidebar-wrapper").toggleClass("active"); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
/*!
======================= Notes ===============================
* see: .sidebar-wrapper.active in: style.css
==================== END Notes ==============================
*/
}); //Close 'function()'
// Open the Sidebar-wrapper on Hover
$("#menu-toggle").hover(function(e) //declare the element event ...'(e)' = event (shorthand)
{
$("#sidebar-wrapper").toggleClass("active",true); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
});
$("#menu-toggle").bind('click',function(e) //declare the element event ...'(e)' = event (shorthand)
{
$("#sidebar-wrapper").toggleClass("active",true); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
}); //Close 'function()'
$('#sidebar-wrapper').mouseleave(function(e) //declare the jQuery: mouseleave() event
// - see: ('//api.jquery.com/mouseleave/' for details)
{
/*! .toggleClass( className, state ) */
$('#sidebar-wrapper').toggleClass('active',false); /* toggleClass: Add or remove one or more classes from each element
in the set of matched elements, depending on either the class's
presence or the value of the state argument */
e.stopPropagation(); //Prevents the event from bubbling up the DOM tree
// - see: ('//api.jquery.com/event.stopPropagation/' for details)
e.preventDefault(); // Prevent the default action of the event will not be triggered
// - see: ('//api.jquery.com/event.preventDefault/' for details)
});
});
