Push Navigation (JS, SCSS)

In this example below you will see how to do a Push Navigation (JS, SCSS) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by StevenVentimiglia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright StevenVentimiglia ©
  • HTML
  • CSS
  • JavaScript
    <div id="mainContainer">
	<header>
		<div class="wrapper group">
			<div id="showNav" class="icon-menu"></div>
			<div id="showMenu" class="icon-bell"></div>
		</div>
	</header>
	<div class="wrapper">
		<div class="page">
			<div class="content">
				<h1>Untitled Page</h1>
				<p><b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti obcaecati ullam assumenda porro ea, rem corporis reprehenderit distinctio reiciendis laboriosam suscipit laborum harum explicabo ut in quas consequatur totam voluptas?</b></p>
				&nbsp;
				<p>
					<span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error amet doloribus magni blanditiis numquam itaque, eum delectus dolorum maxime consequuntur in aliquam ab rem nemo reiciendis dolores ex. Quos, doloremque.</span>
					<span>Aut numquam incidunt ea eaque explicabo natus dolorum dolor amet magni, debitis maxime, repudiandae est sint, ducimus sit molestiae excepturi voluptas quisquam accusantium vitae commodi porro obcaecati. Explicabo, aliquid aliquam!</span>
					<span>Dicta ipsum quasi eum? Quisquam necessitatibus magni, consequatur sapiente hic vero mollitia repudiandae amet aliquam odit est esse neque ipsa officiis ab quod! Doloribus at accusamus asperiores, modi libero voluptatem.</span>
					<span>Officia tempore eius molestiae amet odit sed explicabo? Consequuntur modi temporibus assumenda, cumque ullam magni amet, quas placeat corrupti sequi pariatur rerum molestias quo voluptatum nemo cupiditate, culpa minima optio!</span>
					<span>Cumque sunt pariatur soluta ullam! Dolores commodi eaque nulla ea! Officia aliquam similique eligendi dolores ab labore saepe cupiditate a, architecto iusto id in recusandae nemo, corporis voluptatem perspiciatis hic.</span>
					<span>Amet nemo architecto ratione recusandae cum sed voluptas atque, reiciendis vero repellendus optio nihil dolorum eos excepturi animi, illo iure! Adipisci magni aperiam illo mollitia? Assumenda quos molestias consequuntur eveniet.</span>
				</p>
			</div>
		</div>
	</div>
	<footer>
		<div class="wrapper">
			<div class="content"></div>
		</div>
	</footer>
</div>
<nav>
	<div class="close"></div>
	<h4>Menu</h4>
</nav>
<menu>MENU</menu>

/*Downloaded from https://www.codeseek.co/StevenVentimiglia/push-navigation-js-scss-BxeXOr */
    @import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/183117/icons.css';
// Sass
$space: 20px;
$color: #000;
$light: lighter($color, 50%);
$darker: darker($color, 50%);
// General
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
	color: #333;
	font-size: 14px;
	line-height: 1.25;
	font-family: Arial, Helvetica, sans-serif;
	background: #666;
	min-width: 320px;
	overflow-x: hidden;
}
#mainContainer {
	@extend .rel;
	min-width: 320px;
	background: #ccc;
	transition: all 0.5s ease-in-out;
}
.wrapper {
	@extend .rel;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
.page {
	min-height: $space*20;
	background: #eee;
}
.content {
	padding: $space;
}
.group {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}
.rel, .abs {
	display: block;
}
.rel {
	position: relative;
}
.abs {
	position: absolute;
}
// Pen
nav,
menu {
	@extend .abs;
	color: #666;
	width: 280px;
	height: 100%;
	top: 0;
	bottom: 0;
	padding: $space;
	background: #333;
	transition: all 0.5s ease-in-out;
	white-space: nowrap;
}
nav {
	left: -280px;
	padding-top: $space*3;
	h4 {
		font-size: 1.25em;
	}
	ul {
		padding-left: 10px;
		background: #222;
		li {
			margin-left: -10px;
			line-height: 2em;
			ul {
				display: none;
				background: #111;
				li {
					ul {
						background: #000;
						li {
						}
					}
				}
			}
		}
	}
}
menu {
	right: -280px;
}

header {
	background: #777;
	.icon-menu::before {
		float: left;
		color: #ccc;
		font-size: 2em;
		line-height: 2;
		margin-left: $space/2;
		cursor: pointer;
		@media screen and (min-width: 980px) {
			margin: 0;
		}
	}
	.icon-bell::before {
		float: right;
		color: #ccc;
		font-size: 1.5em;
		line-height: 2.65;
		margin-right: $space/2;
		cursor: pointer;
		@media screen and (min-width: 980px) {
			margin: 0;
		}
	}
}
.close {
	position: absolute;
	top: $space/1.5;
	right: $space/1.5;
	width: $space*1.5;
	height: $space*1.5;
	border-radius: 50%;
	background: #666;
	opacity: 0.25;
	transition: opacity 0.25s ease-in;
	cursor: pointer;
	overflow: hidden;
	text-shadow: 0 2px 0 rgba(0,0,0,0.35);
	&::after {
		content: 'x';
		position: absolute;
		top: 48%;
		left: 50%;
		color: #fff;
		font-size: 1.5em;
		font-weight: 500;
		transform: translate(-50%,-50%);
	}
	&:hover {
		opacity: 0.5;
		background: #555;
	}
}


/*Downloaded from https://www.codeseek.co/StevenVentimiglia/push-navigation-js-scss-BxeXOr */
    const main = document.getElementById('mainContainer');
const close = document.querySelector('.close')

const nav = document.querySelector('nav');
const showNav = document.getElementById('showNav')

const menu = document.querySelector('menu');
const showMenu = document.getElementById('showMenu')



let pos = 0;

showNav.addEventListener('click', () => {
	nav.style.left = "0";
	main.style.marginLeft = "280px";	
	main.style.marginRight = "-280px";	
	pos = 1;
});

close.addEventListener('click', () => {
	nav.style.left = "-280px";
	main.style.marginLeft = "0";
	main.style.marginRight= "0";	
	pos = 0;
});

Comments