<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> </div> <a href="javascript:void(0)" class="btn-nav-close slidable-close pull-right"><span class="glyphicon glyphicon-remove"></span></a> </div> <div class="nav-body"> <form> <div class="row"> <div class="col-md-12 col-sm-12 col-12"> <div class="form-group"> <h3 class="panel-title">Profile</h3> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6 col-6"> <div class="form-group"> <input type="text" class="form-control b-r-0" id="first_name" placeholder="First Name"> </div> </div> <div class="col-md-6 col-sm-6 col-6"> <div class="form-group"> <input type="text" class="form-control b-r-0" id="last_name" placeholder="Last Name"> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-12"> <div class="form-group"> <input type="email" class="form-control b-r-0" id="email" placeholder="Email"> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-12"> <div class="form-group"> <input type="text" class="form-control b-r-0" id="phone" placeholder="Phone"> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-12"> <div class="form-group"> <textarea col="3" class="form-control b-r-0" placeholder="Address 1"></textarea> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-12"> <div class="form-group"> <textarea col="3" class="form-control b-r-0" placeholder="Address 2"></textarea> </div> </div> </div> </form> </div> <div class="nav-footer text-right"> <button class="btn btn-default slidable-close b-r-0">Close</button> <button class="btn btn-info b-r-0">Save</button> </div> </div>

.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 { position: relative; width: 80px; height: 80px; margin-top: 10px; } .slidable-nav > .nav-top > .nav-avatar > .myname { height: 80px; margin-left: 10px; } .slidable-nav > .nav-top > .nav-avatar > .myimg > .myavatar > img { width: 100%; height: 100%; cursor: pointer; } .slidable-nav > .nav-top > .nav-avatar > .myimg > .myavatar > img:hover { opacity: .5; } .slidable-nav.opened { right: 0; } .slidable-nav > .nav-top { height: 100px; background: #46b8da; padding: 0 15px; color: #fff; line-height: 55px; font-size: 20px; } .slidable-nav > .nav-footer { height: 60px; padding: 10px 20px 15px; } .slidable-nav > .nav-body { height: calc(100% - 160px); overflow-x: hidden; overflow-y: auto; padding: 15px 20px; width: 100%; } .btn-nav-close { position: absolute; right: 0; top: 0; margin-right: 10px; z-index: 500; color: #fff; font-size: 15px; } .btn-nav-close:hover, .btn-nav-close:focus, .btn-nav-close:active { color: #ddd; } .nav-contact { display: flex; justify-content: flex-end; } .nav-list-menu { margin-left: 10px; } .btn-contact { color: #fff; } .btn-contact:hover, .btn-contact:focus, .btn-contact:active { color: #ddd; } .nav-status { position: absolute; height: 20px; width: 20px; bottom: 0; right: 0; z-index: 100; border: 2px solid #fff; border-radius: 50%; } .nav-status.online { background-color: #4de54d; } body { background-color: #e1e1e1; } .container { background-color: #fff; padding: 50px; } .btn-outline { background: #fff; border-radius: 0px; } .text-info { color: #46b8da; } .b-r-0 { border-radius: 0px; } .box-outline { border-top: 1px solid #fff; border-right: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 2px solid #ddd; box-shadow: none; }

$(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"); }); });