Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"patient profile"
Bootstrap 3.3.0 Snippet by
urmisaha
3.3.0
jQuery
profile
Preview
HTML
CSS
JS
View Full Screen
Forked from
Fork
Fork this
Parent
2.3K
0 Fav
Post to Facebook
Tweet this
<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 ----------> <nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid" id="topnav"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle navbar-toggle-sidebar collapsed"> MENU </button> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown "> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Account <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">SETTINGS</li> <li class=""><a href="#">Privacy Setup</a></li> <li class=""><a href="#">Account Setup</a></li> <li class=""><a href="#">Help</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group text-center"> <input type="text" class="form-control input-sm" placeholder="Search"> </div> <button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container-fluid main-container"> <div class="col-md-2 sidebar"> <div class="row"> <!-- uncomment code for absolute positioning tweek see top comment in css --> <div class="absolute-wrapper"> </div> <!-- Menu --> <div class="side-menu"> <nav class="navbar navbar-default" role="navigation"> <!-- Main Menu --> <div class="side-menu-container"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span> Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-plane"></span> My Medical Records</a></li> <li><a href="#"><span class="glyphicon glyphicon-cloud"></span> My Medications</a></li> <!-- Dropdown--> <li class="panel panel-default" id="dropdown"> <a data-toggle="collapse" href="#dropdown1"> <span class="glyphicon glyphicon-user"></span> My Documents <span class="caret"></span> </a> <!-- Dropdown --> <div id="dropdown1" class="dropdown panel-collapse collapse"> <div class="panel-body"> <ul class="nav navbar-nav"> <li><a href="#"> My Health Details </a></li> <li><a href="#"> My Reports </a></li> <li><a href="#"> My Uploads </a></li> </ul> </div> </div> </li> <li><a href="#"><span class="glyphicon glyphicon-cloud"></span> Doctors and Clinics </a></li> <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Medical Calendar</a></li> <li class="panel panel-default" id="dropdown"> <a data-toggle="collapse" href="#dropdown2"> <span class="glyphicon glyphicon-user"></span> My Connections <span class="caret"></span> </a> <!-- Dropdown --> <div id="dropdown2" class="dropdown panel-collapse collapse"> <div class="panel-body"> <ul class="nav navbar-nav"> <li><a href="#"> Friends </a></li> <li><a href="#"> Requests </a></li> <li><a href="#"> Messages </a></li> <li><a href="#"> Notifications </a></li> </ul> </div> </div> </li> </ul> </div><!-- /.navbar-collapse --> </nav> </div> </div> </div> <div class="col-md-10 content"> <div class="panel panel-default"> <div class="panel-heading" style="background-color: #0dceae;"> My Medical Journal </div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <footer class="pull-left footer"> <p class="col-md-12"> <hr class="divider"> Copyright © 2015 <a href="http://www.pingpong-labs.com">Gravitano</a> </p> </footer> </div>
#topnav { background-color: #018f78; border : 0; color: #fff; } .navbar-default .navbar-nav>li>a { color: #000; margin-left: 10px; padding:10px; } .navbar-default .navbar-nav>li>a { border: 1px solid #eee; } h1.page-header { margin-top: -5px; } .sidebar { padding-left: 0; } .container-fluid { background: #E6FBF8; padding: 15px 0 0 0; margin-top: -20px; } .main-container { background: #E6FBF8; padding: 15px 0 0 0; margin-top: -20px; } .footer { width: 100%; padding: 15px; background-color: #018f78; color: #fff; } :focus { outline: none; } .side-menu { position: relative; width: 100%; height: 100%; } .side-menu .navbar { border: none; background-color: #c3f1eb; } .side-menu .navbar-header { width: 100%; border-bottom: 1px solid #e7e7e7; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { background-color: #0dceae; margin-right: -1px; } .side-menu .navbar-nav a:hover { background-color: #c3f1eb; margin-right: -1px; border-right: 5px solid #20DDBE; } .side-menu .navbar-nav a { background-color: #c3f1eb; margin-right: -1px; color: #333; } .side-menu .navbar-nav a:hover { background-color: #0dceae; margin-right: -1px; /*border-right: 5px solid #e7e7e7;*/ } .side-menu .navbar-nav li { display: block; width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav li a { padding: 15px; } .side-menu .navbar-nav li a .glyphicon { padding-right: 10px; } .side-menu #dropdown { border: 0; margin-bottom: 0; border-radius: 0; background-color: transparent; box-shadow: none; } .side-menu #dropdown .caret { float: right; margin: 9px 5px 0; } .side-menu #dropdown .indicator { float: right; } .side-menu #dropdown > a { border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body { padding: 0; background-color: #f3f3f3; } .side-menu #dropdown .panel-body .navbar-nav { width: 100%; } .side-menu #dropdown .panel-body .navbar-nav li { padding-left: 15px; border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body .navbar-nav li:last-child { border-bottom: none; } .side-menu #dropdown .panel-body .panel > a { margin-left: -20px; padding-left: 35px; } .side-menu #dropdown .panel-body .panel-body { margin-left: -15px; } .side-menu #dropdown .panel-body .panel-body li { padding-left: 30px; } .side-menu #dropdown .panel-body .panel-body li:last-child { border-bottom: 1px solid #e7e7e7; } .side-menu #search-trigger { background-color: #f3f3f3; border: 0; border-radius: 0; position: absolute; top: 0; right: 0; padding: 15px 18px; } .side-menu .brand-name-wrapper { min-height: 50px; } .side-menu .brand-name-wrapper .navbar-brand { display: block; } .side-menu #search { position: relative; z-index: 1000; } .side-menu #search .panel-body { padding: 0; } .side-menu #search .panel-body .navbar-form { padding: 0; padding-right: 50px; width: 100%; margin: 0; position: relative; border-top: 1px solid #e7e7e7; } .side-menu #search .panel-body .navbar-form .form-group { width: 100%; position: relative; } .side-menu #search .panel-body .navbar-form input { border: 0; border-radius: 0; box-shadow: none; width: 100%; height: 50px; } .side-menu #search .panel-body .navbar-form .btn { position: absolute; right: 0; top: 0; border: 0; border-radius: 0; background-color: #f3f3f3; padding: 15px 18px; } /* Main body section */ .side-body { margin-left: 310px; } /* small screen */ @media (max-width: 768px) { .side-menu { position: relative; width: 100%; height: 0; border-right: 0; } .side-menu .navbar { z-index: 999; position: relative; height: 0; min-height: 0; background-color:none !important; border-color: none !important; } .side-menu .brand-name-wrapper .navbar-brand { display: inline-block; } /* Slide in animation */ @-moz-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-webkit-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-moz-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @-webkit-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } /* Slide side menu*/ /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */ .side-menu-container > .navbar-nav.slide-in { -moz-animation: slidein 300ms forwards; -o-animation: slidein 300ms forwards; -webkit-animation: slidein 300ms forwards; animation: slidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .side-menu-container > .navbar-nav { /* Add position:absolute for scrollable menu -> see top comment */ position: fixed; left: -300px; width: 300px; top: 43px; height: 100%; border-right: 1px solid #e7e7e7; background-color: #f8f8f8; overflow: auto; -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @-moz-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-webkit-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-moz-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @-webkit-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } /* Slide side body*/ .side-body { margin-left: 5px; margin-top: 70px; position: relative; -moz-animation: bodyslideout 300ms forwards; -o-animation: bodyslideout 300ms forwards; -webkit-animation: bodyslideout 300ms forwards; animation: bodyslideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .body-slide-in { -moz-animation: bodyslidein 300ms forwards; -o-animation: bodyslidein 300ms forwards; -webkit-animation: bodyslidein 300ms forwards; animation: bodyslidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Hamburger */ .navbar-toggle-sidebar { border: 0; float: left; padding: 18px; margin: 0; border-radius: 0; background-color: #f3f3f3; } .panel>.title { background-color: #000; } .panel-body { background-color: #c3f1eb; } /* Search */ #search .panel-body .navbar-form { border-bottom: 0; background-color: #c3f1eb; } #search .panel-body .navbar-form .form-group { margin: 0; } .side-menu .navbar-header { /* this is probably redundant */ position: fixed; z-index: 3; background-color: #f8f8f8; } /* Dropdown tweek */ #dropdown .panel-body .navbar-nav { margin: 0; }
$(function () { $('.navbar-toggle-sidebar').click(function () { $('.navbar-nav').toggleClass('slide-in'); $('.side-body').toggleClass('body-slide-in'); $('#search').removeClass('in').addClass('collapse').slideUp(200); }); $('#search-trigger').click(function () { $('.navbar-nav').removeClass('slide-in'); $('.side-body').removeClass('body-slide-in'); $('.search-input').focus(); }); $('.timeline-panel').click(function() { $('.timeline-body', this).toggle(); // p00f }); });
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76
