Bootstrap Snippet Svbtle Inspired Menu using HTML CSS Bootstrap jQuery

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container">
    <div class="row">
        <div class="[ col-xs-12 col-sm-6 col-md-4 ]">
            <h2>SVBTL MENU</h2>
            <span class="console"></span>
            <p>So When I came across this site called <a href="https://svbtle.com">Svbtle</a> today (June 25th, 2014) and before even reading the article that brought me to the site I feel in love with the design. It was so simple it was beautiful. I wanted to recreate the menu so here is my attempt.</p>
        </div>        
    </div>
</div>
<nav class="animate">
    <p>Mouse0270 created this snippet on <strong>Bootsnipp</strong> network.</p>
    <ul>
        <li>
            <a href="https://twitter.com/mouse0270">@mouse0270 on twitter</a>
        </li>
        <li>
            <a href="https://facebook.com/rem.mcintosh">Learn More about me on Facebook</a>
        </li>
        <li>
            <a href="http://bootsnipp.com/mouse0270">Snippets</a>
        </li>
        <li>
            <a href="https://github.com/mouse0270">Projects</a>
        </li>
        <li>
            <a href="http://bootsnipp.com/user/snippets/www.linkedin.com/in/remcintosh/">Résumé</a>
        </li>
    </ul>
    <div class="divider"></div>
    <h4>Thanks To</h4>
    <ul>
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
@import url(http://fonts.googleapis.com/css?family=Anton|Maven+Pro:500,700);
body {
    font-family: 'Maven Pro', sans-serif;
}
h2 {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
}
.animate {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.nav-controller {
    position: fixed;
    top: 15px;
    right: 15px;
    padding: 5px 6px 1px;
    border: 5px solid rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    border-radius: 25px;
    font-size: 12pt;
    cursor: pointer;
    z-index: 300;
}
nav ~ .nav-controller > .controller-open {
    display: inline-block;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
$(function() {
    $('nav, .nav-controller').on('click', function(event) {
        $('nav').toggleClass('focus');
    });
    $('nav, .nav-controller').on('mouseover', function(event) {
        $('nav').addClass('focus');
    }).on('mouseout', function(event) {
        $('nav').removeClass('focus');
    })
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Svbtle Inspired Menu"
Bootstrap 3.1.0 Snippet by sinasafaei

Related: See More

Questions / Comments:

"Svbtle Inspired Menu" Bootstrap 3.1.0 Snippet by sinasafaei

Related: See More

Questions / Comments:

"Svbtle Inspired Menu"
Bootstrap 3.1.0 Snippet by sinasafaei