"Hover-toggle Sidebar Navigation"
Bootstrap 3.3.0 Snippet by blayderunner123

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<a id="to-top" class="btn btn-lg btn-dark" href="#top">
<span class="sr-only">Toggle to Top Navigation</span>
<i class="fa fa-chevron-up"></i>
</a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-danger pull-right hidden-md hidden-lg toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top">Bootstrap <strong>Hover SidNav</strong></a>
</li>
<li>
<a href="#top" title="Go to Top">Home</a>
</li>
<li>
<a href="#" title="Go to About Us section">About</a>
</li>
<li>
<a href="#" title="Navigate to Jonathan Adcox IT Resume">Resume</a>
</li>
<li>
<a href="#" title="Navigate to 'Our Services' section">Skills</a>
</li>
<!-- Future Development
<li>
<a href="#portfolio">Portfolio</a>
</li> -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@charset "utf-8";
*, *: 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;
}
html {
width: 100%;
height: 100%;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 0;
width: 250px;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #222;
-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: 0;
width: 250px;
margin: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!
* Sidebar.js - Bootstrap Sidebar Hover Event toggle attribute
* onHover
* Version: v3.1.4
* LGPL v3 LICENSE INFO
* This file is part of a Sidebar Bootstrap Element. Copyright
* 2015 Soldier-up Designs - Website Development Company.
* sidebar.js is a free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* sidebar.js is distributed as a free tool that can help you
* add a few extra dynamics to your Web Design code. However,
* this code and any associated code "IS" "WITHOUT ANY WARRANTY";
* without even the implied warranty of "MERCHANTABILITY" or
* "FITNESS FOR A PARTICULAR PURPOSE". See the GNU Lesser
* General Public License for more details.
*/
/*!
======================= Notes ===============================
* Used to close Sidebar on jQuery Element "Mouseleave" Event
* This was a pain in the Ass to create
* and to not break the rest of the jQuery
* and Bootstrap API Script ()Did that once or twice in
- Development)
========== END Crude Vocabulary (...and notes) ==============
*/
/*!
================= ^ Ranting Stops Here ^ ====================
==================== Code Starts Below ======================
*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: