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 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 ...
@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 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 Hamburger Icon Styles
Created November 14, 2013 05:14
#hamburger-icon {
display: none;
float: left;
width: 100%;
height: 50px;
margin: 0 0 20px 0;
padding: 0 20px;
line-height: 50px;
background: #cccccc;
cursor: pointer;
@devilshaircut
devilshaircut / Hamburger Menu Top Bar Styles
Created November 14, 2013 05:14
nav {
display: block;
width: 100%;
height: 50px;
padding: 0 100px;
margin: 0 0 20px 0;
line-height: 50px;
background: #cccccc;
position: fixed;
z-index: 7;
@devilshaircut
devilshaircut / Hamburger Menu Markup
Created November 14, 2013 05:15
<div id="page-content">
<h3>A Header</h3>
<p>A Paragraph</p>
</div>
<!-- #page-content -->
<div id="hamburger-icon">
Hamburger.
</div>
<!-- #hamburger-icon -->
@devilshaircut
devilshaircut / Hamburger Menu Expanded State Styles
Created November 14, 2013 05:20
body.nav-expanded {
#page-content {
left: 75%;
}
#hamburger-icon {
left: 75%;
}
}
@devilshaircut
devilshaircut / Hamburger Menu Boilerplate
Created November 14, 2013 05:35
@import "compass/reset"; // As with all projects, override ludicrous browser default styles.
@import "compass/css3"; // We will use some CSS3 transitions (among other things) to make the interface more usable.
@devilshaircut
devilshaircut / Hamburger Menu Touch Device Settings
Last active December 28, 2015 07:09
Hamburger Menu Touch Device Settings
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
@devilshaircut
devilshaircut / gist:9147043
Created February 22, 2014 01:13
csemjacobs
7:26 Okay, I'm going to head out in a few mins but since I got this topic started. Time to end it with some quick questions.
7:26 1 question per person please.
grimlock
7:26 42
jaironkalach
7:26 pulls up his list and looks for a quick one.
indy
7:26 yellow
7:26 no, blue!