Bootstrap Snippet mobile using HTML CSS 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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ---------->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/snap.svg-min.js"></script>
<section  class="screen clearfix">
    
    <a href="#" id="menu" data-path-hover="M251,422c135.4,0,239.7,50,239.7,50v393.3H-10.8V472
    C-10.8,472,109.9,422,251,422L251,422z M251,422L251,422c135.4,0,239.7,50,239.7,50 M251,422C248.6,424.4,251,422,251,422 M251,422
    C248.6,424.4,251,422,251,422 M251,422C248.6,424.4,251,422,251,422"  data-path-hover2="M251,472c135.4,0,239.7,0,239.7,0v393.3H-10.8V472
    C-10.8,472,109.9,472,251,472L251,472z M251,472L251,472c135.4,0,239.7,0,239.7,0 M251,472C248.6,474.4,251,472,251,472 M251,472
    C248.6,474.4,251,472,251,472 M251,472C248.6,474.4,251,472,251,472">
        <figure>
            <svg viewBox="0 0 480 852" preserveAspectRatio="none"><path id="open" d="M434.7,771.3c16,0,28.9,13,28.9,28.9s-13,28.9-28.9,28.9
    s-28.9-13-28.9-28.9S418.8,771.3,434.7,771.3z"/>
        </figure>
    </a>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/more.png" id="more" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/menu-items.png" id="menu-items" />    
    <div id="close">
        <div class="cy"></div>
        <div class="cx"></div>
    </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
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
/*  Reset & General
---------------------------------------------------------------------- */
* { margin: 0px; padding: 0px; }
body {
    background: #26272c;
    font-family: "Open Sans", sans-serif; 
}
.screen{
    margin: 50px auto 120px;
    width:480px;
    height:8526px;  
    position:relative;
    background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/screen1.png") 0 0 no-repeat;
}
.screen a {
    width:480px;
    height:852px;
}
figure {
    position: relative;
    overflow: hidden;   
    width:480px;
    height:852px;
}
svg {
    position: absolute;
    top: -1px; /* fixes rendering issue in FF */
top:0;
left: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
$(document).ready(function(){
        (function() {
    
    function init() {
        var speed = 250,
            easing = mina.backout;
        [].slice.call ( document.querySelectorAll( '.screen > a' ) ).forEach( function( el ) {
            var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                pathConfig = {
                    from : path.attr( 'd' ),
                    to : el.getAttribute( 'data-path-hover' ),
                    to2: el.getAttribute( 'data-path-hover2' )
                };
            $('#more, #open').click(function() {
                path.animate( { 'path' : pathConfig.to }, 150, mina.easeIn );
                $('#more').fadeOut("fast");
                setTimeout(function(){$('#menu-items').addClass('animate'); }, 100);                
                setTimeout(function(){                                      
                    path.animate( { 'path' : pathConfig.to2 }, 230, mina.elastic );
                    $('#close').show();
                    $('.cx, .cy').addClass('s1');
                    setTimeout(function(){$('.cx, .cy').addClass('s2');}, 100);
                    setTimeout(function(){$('.cx, .cy').addClass('s3');}, 200);
                }, 150);
            } );
            $("#close").click(function() {              
                path.animate( { 'path' : pathConfig.from }, speed, mina.easeout );                      
                $('#menu-items').removeClass('animate').addClass('animate-back');
                $('.cx, .cy').removeClass('s1 s2 s3');
                $('#more').fadeIn(400);
                setTimeout(function(){
                    $('#menu-items').removeClass('animate-back');
                    $('#close').hide();
                }, 400);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"mobile" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"mobile"
Bootstrap 3.0.0 Snippet by evarevirus