Skip to content

Instantly share code, notes, and snippets.

@bmcminn

bmcminn/index.html

Created December 28, 2017 22:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bmcminn/1ab50da18bde75f39bc88e8292a5a847 to your computer and use it in GitHub Desktop.
Save bmcminn/1ab50da18bde75f39bc88e8292a5a847 to your computer and use it in GitHub Desktop.
Download ZIP
Example web app interface with sticky topnav and offscreen navigation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>App Shell Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></style>
<style>
/* @sauce: https://www.paulirish.com/2012/box-sizing-border-box-ftw/
apply a natural box layout model to all elements, but allowing components to change
*/
html {
box-sizing: border-box;
overflow-y: scroll;
width: 100vw;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.44;
font-family: sans-serif;
font-size: 1rem;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<style>
:root {
/* BREAKPOINTS */
--bp-mobile: 480px;
--bp-tablet: 768px;
--bp-lappy: 1024px;
--bp-desktop: 1140px;
/* LAYOUT DIMENSIONS*/
--bar-height: 60px;
--sidebar-width: 320px;
--topbar-height: var(--bar-height);
--footerbar-height: var(--bar-height);
--webkit-scrollbar-width: 17px;
--main-container-width: calc(100vw - var(--sidebar-width));
/* UI COLOR PALETTE */
--blue: #6B84FF;
--gray-light: #e3e3e3;
/* COMPONENT DIMENSIONS */
--border-radius: 2px;
/* COMPONENT COLORS */
--border-color: var(--gray-light);
--info-color: var(--blue);
}
.btn {
border-radius: var(--border-radius);
font-size: 1.2rem;
padding: 0.5rem 1rem;
}
.btn-info {
color: #fff;
border: 0;
background-color: var(--info-color);
appearance: none;
}
.app-sidebar {
width: var(--sidebar-width);
position: fixed;
z-index: 1000;
height: 100%;
height: 100vh;
left: 0;
border-right: 1px solid var(--border-color);
background-color: #fff;
transform: translate(-100%, 0);
transition: transform ease 0.3s;
}
.app-sidebar.open {
transform: translate(0,0);
}
#main-nav-toggle {
position: absolute;
right: -60px;
top: calc(var(--topbar-height)/4);
}
.app-sidebar.open #main-nav-toggle {
right: 1rem;
}
.app-sidebar.open #main-nav-toggle i:before {
content: "\f00d";
}
.app-main-container {
position: relative;
padding-top: var(--topbar-height);
z-index: 100;
}
.app-top-bar {
position: fixed;
height: var(--topbar-height);
width: 100%;
background-color: #f90;
top: 0;
}
.app-view-container {
}
@media (min-width: 1024px) {
.app-sidebar {
left: 0;
transform: none;
transition: none;
}
#main-nav-toggle {
display: none;
}
.app-main-container {
width: var(--main-container-width);
margin-left: auto;
padding-bottom: --footerbar-height;
}
.app-top-bar {
width: var(--main-container-width);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body>
<div class="app-sidebar" id="main-nav">
<button class="btn btn-info" id="main-nav-toggle"><i class="fa fa-bars"></i></button>
<header>
App Logo Here
</header>
<nav class="app-navbar" role="navigation">
<ul>
<li><a href="/FESJKLFE">Test</a></li>
<li><a href="/FESJKLFE">Test</a></li>
<li><a href="/FESJKLFE">Test</a></li>
<li><a href="/FESJKLFE">Test</a></li>
<li><a href="/FESJKLFE">Test</a></li>
</ul>
</nav>
<footer>
&copy; 2017 Brandtley McMinn.
</footer>
</div>
<div class="app-main-container">
<nav class="app-top-bar">
Top Navbar
</nav>
<main class="app-view-container" role="main">
<header class="app-view-header">
<h1>View Title Here</h1>
</header>
<div class="app-view-container container">
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
App stuff goes here<br>
</div>
<footer class="app-view-footer"></footer>
</main>
<footer class="app-footer">
<ul class="social-links">
<li><a href="SDJFKSLDFJSDL">Link</a></li>
<li><a href="SDJFKSLDFJSDL">Link</a></li>
<li><a href="SDJFKSLDFJSDL">Link</a></li>
<li><a href="SDJFKSLDFJSDL">Link</a></li>
</ul>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function($){
let $mainNav = $('#main-nav');
let $doc = $(document);
let sidebarOpenClass = 'open';
const toggleMainNav = function (e) {
e.preventDefault();
$mainNav.toggleClass(sidebarOpenClass);
var clickAway = function (e) {
if ($mainNav[0] !== e.target
&& !$.contains($mainNav[0], e.target)
) {
$mainNav.removeClass(sidebarOpenClass);
$(document.body).off('click', clickAway);
}
};
$(document.body).on('click', clickAway);
}
$doc.on('click', '#main-nav-toggle', toggleMainNav);
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment