Skip to content

Instantly share code, notes, and snippets.

View devilshaircut's full-sized avatar

Jason B. devilshaircut

View GitHub Profile
@devilshaircut
devilshaircut / Hamburger Menu Page Content Styles
Last active December 28, 2015 07:08
#page-content {
display: block;
width: 100%;
min-height: 100%;
padding: 70px 100px 40px 100px;
background: #ffffff;
position: relative;
z-index: 5;
@include box-sizing(border-box);
@include box-shadow(0 0 7px #000000);
@devilshaircut
devilshaircut / Hamburger Menu Base Styles
Last active December 28, 2015 07:09
html {
height: 100%;
}
body {
height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
min-width: 320px;
@devilshaircut
devilshaircut / Hamburger Menu JavaScript
Created November 13, 2013 23:00
$(document).ready(function() {
$("#hamburger-icon").click(function() { // When the user clicks the #hamburger-icon HTML element ...
$("body").toggleClass("nav-expanded"); // ... toggle the <body> tag's ".nav-expanded" class on or off.
});
$("nav > ul > li > a").click(function() { // When the user clicks a navigation item in the hamburger menu ...
$("body").removeClass("nav-expanded"); // ... remove the ".nav-expanded" class (if it exists) from the <body> tag.
}); // This makes the menu a bit nicer to interact with for our users.
});
$(window).resize(function() { // When the window resizes ...