HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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 ---------->
<header>
    <div class="container">
        <div class="col-xs-12 col-sm-6 col-sm-offset-3">
            <div class="alert alert-info vertical-center">
                <p>This snippet will not work correctly when viewed outside of fullscreen on Bootsnipp. To view this snippet in fullscreen click on the button in the top right hand corner or if you are in fullscreen click on the same button to return to Bootsnipp! </p>
            </div>
        </div>
    </div>
</header>
<div class="container">
    <div class="hidden-xs col-sm-3">
        <div class="fading-side-menu" data-spy="affix" data-offset-top="350">
            <h5>Table of Contents</h5><hr class="no-margin">
            <ul class="list-unstyled">
                <li>
                    <a href="#intro">
                        <span class="fa fa-angle-double-right text-primary"></span>Introduction
                    </a>
                </li>
                <li>
                    <a href="#getting-started">
                        <span class="fa fa-angle-double-right text-primary"></span>Getting started
                    </a>
                </li>
                <li>
                    <a href="#setting-up-our-page">
                        <span class="fa fa-angle-double-right text-primary"></span>Setting up our page
                    </a>
                </li>
                <li>
                    <a href="#conclusion">
                        <span class="fa fa-angle-double-right text-primary"></span>Conclusion
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
/* FOR DEMO ONLY */
/* Import Bootswatch paper theme because it isn't provided by Bootsnipp and it is awesome! */
@import url(//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/paper/bootstrap.min.css);
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css);
/* WHAT YOU NEED */
.fading-side-menu.affix-top {
    opacity: 1;
    transition: opacity 1s
}
.fading-side-menu.affix {
    top: 11.5px;
}
.fading-side-menu.affix {
    opacity: 0.2;
    transition: opacity 5s
}
.fading-side-menu.affix:hover {
    opacity: 1;
    transition: opacity 0.3s
}
/* RECOMMENDED STYLING BUT NOT REQUIRED */
.fading-side-menu a {
    color: rgb(102, 102, 102);
}
.fading-side-menu a .fa {
    padding-right:15px;
}
/* FOR DEMO ONLY */
body {
    background-color: rgb(255, 255, 255);
    font-size: 16px;
}
header {
    background: url('https://unsplash.imgix.net/photo-1427955569621-3e494de2b1d2?fit=crop&fm=jpg&h=700&q=75&w=1050') no-repeat center bottom;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* THOUGH THIS PLUGIN DOES NOT CONTAIN
ANY JAVASCRIPT ITSELF, IT DOES REQUIRE
THE BOOTSTRAP AFFIX PLUGIN. */
/* START OF DEMO JS - NOT NEEDED */
$(function () {
    if (window.location == window.parent.location) {
        $('#fullscreen').html('<span class="fa fa-compress"></span>');
        $('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/rVnOR');
        $('#fullscreen').attr('title', 'Back To Bootsnipp');
    }    
    $('#fullscreen').on('click', function(event) {
        event.preventDefault();
        window.parent.location =  $('#fullscreen').attr('href');
    });
    $('#fullscreen').tooltip();
});
/* END DEMO OF JS - THAT IS RIGHT NO ADDITONAL JAVASCRIPT NEEDED FOR THIS SNIPPET */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Fading Side Menu - Lets Focus on Content"
Bootstrap 3.3.0 Snippet by aahz

Related: See More

Questions / Comments:

"Fading Side Menu - Lets Focus on Content" Bootstrap 3.3.0 Snippet by aahz

Related: See More

Questions / Comments:

"Fading Side Menu - Lets Focus on Content"
Bootstrap 3.3.0 Snippet by aahz