<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 &COPY; 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 }); });