Bootstrap Snippet Full slider with side-navigation using HTML CSS Bootstrap Javascript

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://www.jqueryscript.net/demo/Fullscreen-Responsive-Image-Slider-with-jQuery-Tinyslide/css/tinyslide.css" >
    <div id="main-wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <div>
                <a id="menu-toggle1" href="#" class="glyphicon glyphicon-arrow-left btn-menu toggle pull-right nav-arrow menu-toggle">
                    <i class="fa fa-delete"></i>
                </a>
            </div>
            <nav id="spy">
                <ul class="sidebar-nav nav">
                    <li class="">
                        <a href="#home11">
                            <span class="fa fa-home solo">Home</span>
                        </a>
                    </li>
                    <li>
                        <a href="#anch1" data-scroll>
                            <span class="fa fa-anchor solo">Anchor 1</span>
                        </a>
                    </li>
                    <li>
                        <a href="#anch2" data-scroll>
                            <span class="fa fa-anchor solo">Anchor 2</span>
                        </a>
                    </li>
                    <li>
                        <a href="#anch3" data-scroll>
                            <span class="fa fa-anchor solo">Anchor 3</span>
                        </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
#main-wrapper {
            transition: all 0.4s ease 0s;
        }
        div#main-wrapper.active::after {
            transition: all 0.89s ease 0s;
        }
        div#main-wrapper.active::after {
            content: "";
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            display: block;
            top: 0;
            z-index: 999;
        }
        #sidebar-wrapper {
            left: -250px;
            width: 250px;
            background: #f5feff;
            position: fixed;
            height: 100%;
            overflow-y: auto;
            z-index: 1000;
            transition: all 0.4s ease 0s;
        }
        #main-wrapper.active #sidebar-wrapper {
            left: 0px;
            box-shadow: 4px 2px 11px rgba(8, 25, 23, 0.25);
            border-right: 1px solid #2d4240;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
        
       
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Full slider with side-navigation"
Bootstrap 3.3.0 Snippet by abhijeetka

Related: See More

Questions / Comments:

"Full slider with side-navigation" Bootstrap 3.3.0 Snippet by abhijeetka

Related: See More

Questions / Comments:

"Full slider with side-navigation"
Bootstrap 3.3.0 Snippet by abhijeetka