Skip to content

Instantly share code, notes, and snippets.

@juliaogris

juliaogris/index.html

Last active February 22, 2017 06:12
Show Gist options
  • Save juliaogris/b8546274f780a020531b3708b3af37c5 to your computer and use it in GitHub Desktop.
Save juliaogris/b8546274f780a020531b3708b3af37c5 to your computer and use it in GitHub Desktop.
Download ZIP
Minimalist HTML, CSS, JS Navigation - demo: https://goo.gl/S7ZF8W
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple nav</title>
<link rel=stylesheet href="styles.css" />
<script type="text/javascript" src="script.js" async defer></script>
</head>
<body>
<nav class="nav">
<div class='hamburger'>☰</div>
<div class='brand'>Awesomeness</div>
<div class='nav-items'>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#dashboard">Dashboard</a></li>
<li><a href="#history">History</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="logout">Log out</div>
</div>
</nav>
<div class="content">
<h2> <a name="home" class="anchor"> Home </a> </h2>
<p>Lorem ipsum dolor sit amet, cum ea oblique eruditi alienum, errem dolor accusata mea eu. Et errem delicata eum, aperiam antiopam assentior eam ei, quo eu primis mandamus. Et maiorum principes consequuntur est, an mea reque omnes torquatos. Sonet persecuti ad quo. Id movet audiam signiferumque sed, id cum vivendo legendos honestatis, ei persius detracto assentior nam. In fierent eloquentiam sit, disputando reformidans ea usu, ius id tollit recteque intellegam.</p>
<h2> <a name="dashboard" class="anchor">Dashboard </a></h2>
<h2><a name="history" class="anchor"> History </a></h2>
<h2><a name="history" class="anchor"> About </a></h2>
</div>
</body>
</html>
Raw
script.js
(function () {
function fillWithText () {
const content = document.querySelector('.content')
const lorem = document.querySelector('p').textContent
const h2s = document.querySelectorAll('h2')
const times = (n, f) => { while (n-- > 0)f() }
h2s.forEach(h2 => {
times(3, () => {
const p = document.createElement('p')
p.textContent = lorem
content.insertBefore(p, h2.nextSibling)
})
})
}
function hideSideNav () {
const hamburger = document.querySelector('.hamburger')
const navItemsClasses = document.querySelector('.nav-items').classList
navItemsClasses.remove('active')
hamburger.textContent = '☰'
}
function onHamburgerClick () {
const hamburger = document.querySelector('.hamburger')
const navItemsClasses = document.querySelector('.nav-items').classList
if (navItemsClasses.toggle('active')) {
hamburger.textContent = '<'
} else {
hamburger.textContent = '☰'
}
}
function initialize () {
fillWithText()
const hamburger = document.querySelector('.hamburger')
hamburger.addEventListener('click', onHamburgerClick)
const navItems = document.querySelectorAll('.nav-items a')
navItems.forEach(item => {
item.addEventListener('click', hideSideNav)
})
}
initialize()
})()
Raw
styles.css
/* resets */
html, body, div, span, h1, h2, h3, a, nav, li, ul, a {
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
nav {
display: block;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* general styling */
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777777;
}
h2 {
font-size: 110%;
font-weight: bold;
}
p {
font-size: 80%;
}
/* navigation */
.nav {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 42px;
line-height: 18px;
border-bottom: 1px solid #eeeeee;
background: white;
box-shadow: 4px 4px 1px rgba(255, 255, 255, 0.6);
}
.nav .brand {
display: inline-block;
border: 0px solid grey;
font-size: 17px;
padding: 11px 15px 11px 15px;
line-height: 18px;
}
.nav-items {
padding-left: 15px;
display: inline-block;
border: 0px solid red;
background: white;
}
.nav-items ul {
border: 0px solid green;
}
.nav-items li {
display: inline-block;
font-size: 13px;
border: 0px solid grey;
padding: 7px 15px 7px 15px;
text-align: center;
}
.nav-items li a {
text-decoration: none;
color: #777777;
}
.nav-items li a:hover {
color: #d9230f;;
}
.nav-items .logout {
position: absolute;
right: 0;
top: 0;
font-size: 13px;
border: 0px solid grey;
padding: 11px 15px 11px 15px;
}
.nav .hamburger {
display: none;
}
.anchor:before {
content: '';
display: block;
position: relative; width: 0;
height: 45px;
margin-top: -45px;
}
@media (max-width: 600px) {
.nav .hamburger {
display: inline-block;
font-size: 17px;
padding: 11px 15px 11px 15px;
line-height: 18px;
border-right: 1px solid #eeeeee;
width: 40px;
}
.nav .logout {
position: static;
margin-top: 36px;
border-top: 1px solid #eeeeee;
}
.nav-items {
padding: 15px;
position: absolute;
left: 0;
top: 41px;
border: 1px solid #eeeeee;
width: 40vw;
height: 100vh;
box-shadow: 2px 2px 1px rgba(255, 255, 255, 0.7);
transform: translateX(-40vw);
transition: all 150ms ease-out;
}
.nav-items.active {
transform: translateX(0);
transition: all 150ms ease-in;
}
.nav li {
display: block;
text-align: left;
border-bottom: 1px solid #eeeeee;
}
.nav li:last-child {
border-bottom: none;
}
}
/* rest of page */
.content {
position: absolute;
top: 40px;
padding: 30px;
z-index: -1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment