<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 ---------->
<!-- jQuery Easing API -->
<body data-spy="scroll" data-target="#navbarResponsive" data-offset="51">
<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>
<nav id="sidebar-wrapper">
<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>
<form class="form-inline float-lg-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-danger" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<section class="row section-header" id="link1" name="link1">
<div class="jumbotron feature">
<div class="container">
<h1><i class="fa fa-exchange" aria-hidden="true"></i> Dramatically Engage</h1>
<p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
<p><a type="button" class="btn btn-primary" href="#">Engage Now</a></p>
</div>
</div>
</section>
<section class="row section-header" id="link2" name="link2">
<div class="jumbotron feature">
<div class="container">
<h1><i class="fa fa-cogs" aria-hidden="true"></i> Proactively envisioned</h1>
<p>multimedia based expertise and cross-media growth strategies.</p>
<p><a type="button" class="btn btn-secondary" href="#">Envision Now</a></p>
</div>
</div>
</section>
<section class="row section-header" id="link3" name="link4">
<div class="jumbotron feature">
<div class="container">
<h1><i class="fa fa-anchor" aria-hidden="true"></i> Seamlessly visualize</h1>
<p>quality intellectual capital without superior collaboration and idea-sharing.</p>
<p><a type="button" class="btn btn-primary" href="#">Visualize Now</a></p>
</div>
</div>
</section>
<section class="row section-header" id="link4" name="link4">
<div class="jumbotron feature">
<div class="container">
<h1><i class="fa fa-bar-chart" aria-hidden="true"></i> Holistically Personificate</h1>
<p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
<p><a type="button" class="btn btn-secondary" href="#">Personificate Now</a></p>
</div>
</div>
</section>
<section class="row section-header" id="link5" name="link5">
<div class="jumbotron feature">
<div class="container">
<h1><i class="fa fa-database" aria-hidden="true"></i> Efficiently unleash</h1>
<p>cross-media information without cross-media value.</p>
<p><a type="button" class="btn btn-primary" href="#">Unleash Now</a></p>
</div>
</div>
</section>
<section class="row section-header" id="link6" name="link6">
<div class="jumbotron feature">
<div class="container">
<h1><i class="fa fa-tasks" aria-hidden="true"></i> Completely Synergize</h1>
<p>One-to-one customer service with robust ideas and Completely synergized resources.</p>
<p><a type="button" class="btn btn-secondary" href="#">Synergize Now</a></p>
</div>
</div>
</section>
<section class="row section-header" id="link7" name="link7">
<div class="jumbotron feature">
<div class="container">
<h1><i class="fa fa-unlock" aria-hidden="true"></i> Empower Platforms</h1>
<p>Quickly maximize timely deliverables for real-time schemas.</p>
<p><a type="button" class="btn btn-primary" href="#">Empower Now</a></p>
</div>
</div>
</section>
<section class="row section-header" id="link8" name="link8">
<div class="jumbotron feature">
<div class="container">
<h1><i class="fa fa-puzzle-piece" aria-hidden="true"></i> Visualize Quality</h1>
<p>Proactively envisioned multimedia based expertise and cross-media growth strategies.</p>
<p><a type="button" class="btn btn-secondary" href="#">Visualize Now</a></p>
</div>
</div>
</section>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Bootstrap 4 Alpha JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
</body>
/* 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:3.5em;
position: relative;
}
html {
position: relative;
min-height: 100%;
width: 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;
}
.row{
position:relative;
}
.row:first-child{
position: relative;
}
a:hover{
text-decoration:none;
}
/* 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:10000 !important;
}
.nav-link:link,
.nav-link:visited,
.navbar-brand{
color:#666;
}
.nav-link:focus,
.nav-link:hover,
.nav-link.active,
.nav-link:active,
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand.active,
.navbar-brand:active{
color:#dddddd;
font-weight: bold;
}
.inactive-link {
pointer-events: none;
cursor: default;
}
.inactive-link:hover,
.inactive-link:focus{
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}
/* 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;
background: rgb(2, 117, 216);
-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;
z-index:-1;
}
.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;
}
.navbar-toggler{
color:#515151;
border: solid #515151 1px;
z-index:5000;
}
.row > .feature,
.row > .feature:before,
.row > .feature:after,
section:before,
section:after{
margin-top:0px;
margin-bottom: 0px;
}
.row,.container, section{
z-index:1800;
}
.section-header .feature .container{
min-width:350px;
height: 360px;
display: table;
}
.section-header:nth-child(odd) > .feature{
background: yellowgreen;
color: greenyellow;
}
.section-header:nth-child(even) > .feature{
background: greenyellow;
color: yellowgreen;
}
/*.section-header:nth-child(odd){
border-bottom: 15px solid #eeeeee;
}
.section-header:nth-child(even){
border-bottom: 15px solid #dddddd;
}*/
$(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)
});
});
