Bootstrap Snippet Slide Form My Profile 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.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 ---------->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <button id="my-profile" class="btn btn-info text-info btn-outline">My Profile</button>
        </div>
    </div>
</div>
<div class="overlay"></div>
<div class="slidable-nav">
  <div class="nav-top">
        <div class="nav-avatar">
            <div class="myimg">
                <div class="myavatar">
                    <img src="https://scontent.fbkk1-5.fna.fbcdn.net/v/t1.0-1/p240x240/19959271_1422340951164915_5064915005517635211_n.jpg?oh=d00714227f317f04f4733895087fca15&oe=5ACE9FFD">
                </div>
                <div class="nav-status online"></div>
            </div>
            <div class="myname">
                Nattapadtanasak Kongpetsak
                <div class="nav-contact">
                    <div class="nav-list-menu">
                        <a href="javascript:void(0)" class="btn-contact"><span class="glyphicon glyphicon-envelope"></span></a>
                    </div>
                    <div class="nav-list-menu">
                        <a href="javascript:void(0)" class="btn-contact"><span class="glyphicon glyphicon-heart"></span></a>
                    </div>
                    <div class="nav-list-menu">
                        <a href="javascript:void(0)" class="btn-contact"><span class="glyphicon glyphicon-inbox"></span></a>
                    </div>
                </div>
            </div>
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
.opened {
    opacity: 1;
    z-index: 100;
    transition: all .3s linear;
}
.overlay.opened {
    background-color: rgba(0,0,0,.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.slidable-nav {
    position: fixed;
    top: 0;
    background-color: #fff;
    bottom: 0;
    right: -100%;
    width: 400px;
    z-index: 101;
    transition: right .7s;
    -webkit-transition: right .5s;
}
.slidable-nav > .nav-top > .nav-avatar {
    width: 100%;
    height: 100%;
    display: flex;
}
.slidable-nav > .nav-top > .nav-avatar > .myimg > .myavatar {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}
.slidable-nav > .nav-top > .nav-avatar > .myimg {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
    $("#my-profile").click(function() {
        if ($(".slidable-nav").hasClass("opened")) {
            $(".slidable-nav, .overlay").removeClass("opened");
        } else {
            $(".slidable-nav, .overlay").addClass("opened");
        }
    });
    
    $(".slidable-close, .overlay").click(function() {
        $(".slidable-nav, .overlay").removeClass("opened");
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Slide Form My Profile "
Bootstrap 3.0.0 Snippet by bnk2972

Related: See More

Questions / Comments:

"Slide Form My Profile " Bootstrap 3.0.0 Snippet by bnk2972

Related: See More

Questions / Comments:

"Slide Form My Profile "
Bootstrap 3.0.0 Snippet by bnk2972