Skip to content

Instantly share code, notes, and snippets.

@mattisbusycom
Created July 28, 2015 11:55
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mattisbusycom/8f774cd1ec8b11901eaf to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Codeply preview</title>
<base target="_self">
<meta name="description" content="A layout with fixed width sidebar on the left, and fluid width content area on the right. The left side collapses on smaller devices such as tablets and smartphones." />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" value="notranslate">
<link rel="shortcut icon" href="/img/codeply_ico.jpg">
<!--stylesheets / link tags loaded here-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style type="text/css">body,html,.row-offcanvas {
height:100%;
}
body {
padding-top: 50px;
}
.briefcase-btn-group {
margin-top: 8px;
margin-right: 20px;
}
.navbar {
border-bottom: 1px solid #c0c0c0;
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color:#f5f5f5;
float: left;
height:100%;
position:relative;
overflow-y:auto;
overflow-x:hidden;
padding-top: 20px;
}
#main {
height:100%;
overflow:auto;
}
/*
* off Canvas sidebar
* --------------------------------------------------
*/
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width:calc(100% + 220px);
}
.row-offcanvas-left
{
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}</style>
</head>
<body >
<div class="navbar navbar-clint navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="glyphicon glyphicon-chevron-right"></i> CLINT
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Browse</a></li>
<li><a href="#manage">Manage</a></li>
<li><a href="#control">Control</a></li>
</ul>
<div class="navbar-right">
<!-- Large button group -->
<div class="btn-group briefcase-btn-group pull-left">
<button class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Briefcase 1 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
</div><!--/.nav-collapse -->
</div><!--/.navbar -->
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="/browse/sites">Sites</a></li>
<li><a href="/browse/searches">Searches</a></li>
<li><a href="/browse/listings">Listings</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="col-md-12">
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
</p>
<h2>
<i class="glyphicon glyphicon-certificate"></i> My Briefcases
</h2>
<div class="row">
<div class="col-md-12">
<!-- content -->
<!-- // content -->
</div>
</div>
</div>
</div>
</div><!--/row-offcanvas -->
<script>
// sandbox disable popups
if (window.self !== window.top && window.name!="view1") {;
window.alert = function(){/*disable alert*/};
window.confirm = function(){/*disable confirm*/};
window.prompt = function(){/*disable prompt*/};
window.open = function(){/*disable open*/};
}
// prevent href=# click jump
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for(var i=0; i < links.length; i++) {
if(links[i].href.indexOf('#')!=-1) {
links[i].addEventListener("click", function(e) {
console.debug("prevent href=# click");
if (this.hash) {
if (this.hash=="#") {
e.preventDefault();
return false;
}
else {
/*
var el = document.getElementById(this.hash.replace(/#/, ""));
if (el) {
el.scrollIntoView(true);
}
*/
}
}
return false;
})
}
}
}, false);
</script>
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment