Skip to content

Instantly share code, notes, and snippets.

@guyjin

guyjin/index.html

Created August 13, 2014 19:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save guyjin/a547e5374d886521e1c1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save guyjin/a547e5374d886521e1c1 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Ben Vaughan.
Raw
index.html
<div class="container">
<div class="menu">
<div class="trigger">
<span class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="title">menu</span>
</span>
</div>
<div id="sectionLinks">
<ul id="sectionMenu">
<li class="homeLink level1">
<a href="<?php echo $web_root ?>/" class="local-nav">AQM</a>
</li>
<li class="absLink level1">
<a href="<?php echo $web_root ?>/abs/" class="local-nav">
Aviation Business System
</a>
<ul class="subnavList">
<li>
<a href="index.php" class="subnav">ABS Support Home</a>
</li>
<li><a href="training.php" class="subnav">ABS Training</a></li>
<li><a href="faq.php" class="subnav">FAQs</a></li>
<li><a href="contacts.php" class="subnav">Points of Contact</a></li>
<li><a href="call.php" class="subnav">Conference Call</a></li>
<li><a href="reports.php" class="subnav">ABS Reports</a></li>
<li class="last"><a href="http://ibs.fs.fed.us/aviation" target="_blank" class="subnav">ABS
Application</a></li>
</ul>
</li>
<li class="gaLink level1">
<a href="<?php echo $web_root ?>/grants/" class="local-nav">
Grants &amp; Agreements
</a>
<ul class="subnavList">
<li>
<a href="PolicyAndRegs.php" class="subnav">Policies &amp; Regulations</a>
</li>
<li class="last">
<a href="RefLinks.php" class="subnav">Resource Links</a>
</li>
</ul>
</li>
<li class="ipLink level1">
<a href="<?php echo $web_root ?>/incident/" class="local-nav">
Incident Procurement
</a>
<ul class="subnavList">
<li>
<a href="<?php echo $web_root ?>/abs/" class="subnav">
Aviation Business System
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/vendors.php" class="subnav">Being a Vendor</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/buyingteam.php" class="subnav">Buying Team</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/teamtoolkit.php" class="subnav">Buying Team Toolkit</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/communications.php" class="subnav">
Communications
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/contacts.php" class="subnav">
Contacts
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/entities.php" class="subnav">
Cooperating Entities
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/fessaa.php" class="subnav">
FESSAA
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/fire.php" class="subnav">
Fire/Other Resources
</a>
</li>
<li>
<a href="http://www.fs.fed.us/fire/contracting/" target="_blank" class="subnav">
National Contracts
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/eera.php" class="subnav">
Preseason Agreement Information
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/ref_reg.php" class="subnav">
References / Regulations
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/agreementreports.php" class="subnav">
Regional Agreements &amp; Reports
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/solicitations.php" class="subnav">Solicitations</a>
</li>
<li class="last">
<a href="<?php echo $web_root ?>/incident/vipr.php" class="viprnav subnav">
VIPR
</a>
<ul class="subsubNav">
<li>
<a href="<?php echo $web_root ?>/incident/dispatchlookup.php" class="subnavChild">Dispatch
Center Lookup</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/dispatch.php" class="subnavChild">
Dispatch Priority Lists
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/faq.php" class="subnavChild">FAQs</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/keyLinks.php" class="subnavChild">Key Links</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/eauth.php " class="subnavChild">USDA
eAuthentication</a>
</li>
<li>
<a href="<?php echo $web_root; ?>/incident/vendorapp.php" class="subnavChild">Vendor
Application</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/vendorsupport.php" class="subnavChild">Vendor
Support</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/vipragreements.php" class="subnavChild">
VIPR Preseason Agreements
</a>
</li>
<li>
<a href="<?php echo $web_root ?>/incident/viprfinance.php" class="subnavChild">VIPR Finance
Copies</a>
</li>
<li class="last">
<a href="<?php echo $web_root; ?>/incident/viprreports.php" class="subnavChild">VIPR
Reports</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- <li class="arraLink level1">
<a href="<?php echo $web_root ?>/arra/" class="local-nav">
American Recovery and Reinvestment Act
</a>
</li> -->
<li class="traineeLink level1 last">
<a href="<?php echo $web_root ?>/jobsoverview.php" class="local-nav">AQM Job Opportunities</a>
<ul class="subnavList">
<li><a href="jobsoverview.php" class="subnav">AQM Jobs Overview</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content">
<h2>
Lorem
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae veritatis soluta, atque excepturi fugit, omnis odio, eligendi asperiores modi tempora quia accusantium earum ratione commodi dignissimos architecto. Sequi quas, vel.</p>
<p>Pariatur aspernatur distinctio libero accusantium at sunt sit cum iste odio sapiente repudiandae voluptates dolorum veritatis eos cumque voluptatem non officia accusamus consequuntur rem consectetur quisquam repellat, beatae magni. Ratione!</p>
<p>Dolores consectetur quidem dolorem officia fugit, at enim sed labore nulla quisquam id cumque ullam consequuntur deserunt temporibus, ipsa, reprehenderit quis doloremque iure pariatur blanditiis. Fuga molestias, nobis quod vero!</p>
<p>Ut quas explicabo rerum, doloribus officia temporibus quaerat tempore a voluptates, dolore fugiat itaque unde porro repudiandae nam aspernatur neque accusantium alias. Corrupti fugiat perferendis eos esse sequi adipisci assumenda!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut ex illum maxime, dolore nesciunt, reprehenderit alias assumenda vitae cumque, itaque asperiores maiores dicta corporis atque unde incidunt, tempore saepe necessitatibus.</p>
<p>Aspernatur animi, vero atque! Dolorum maxime magni tempora quasi quia, nulla consectetur, numquam iste ipsum explicabo excepturi obcaecati dolore neque expedita ea, optio perspiciatis ut facere animi, sit nostrum eaque?</p>
<p>Ipsam, architecto? Quidem impedit omnis, officia quas consectetur, nostrum. Distinctio, quo perspiciatis, dolores, veritatis atque, sapiente modi aperiam quidem sit ipsum maxime. Veritatis explicabo temporibus neque iure odit, et laudantium.</p>
<p>Quidem accusamus recusandae tenetur aspernatur, nesciunt in, illum, consequatur placeat dignissimos enim consequuntur. Ipsam doloribus, fuga aperiam, asperiores iste aliquid nostrum, atque vel debitis magnam cupiditate tenetur labore incidunt molestiae!</p>
<p>Ipsam doloribus fugiat soluta, explicabo ullam molestiae dicta consequatur voluptate omnis asperiores nobis aliquid tempore, non neque dignissimos sequi magnam possimus deleniti unde ex magni reprehenderit recusandae! Quaerat illum, officia!</p>
<p>Accusantium, enim consectetur suscipit praesentium, quaerat et hic totam nam obcaecati voluptatibus porro, debitis doloremque laboriosam modi ut deserunt eos. Quis porro architecto beatae incidunt cumque, veniam doloremque laborum ipsam!</p>
<p>Deserunt praesentium similique excepturi laborum officia ipsum rerum voluptates ratione, dicta id minus odio nostrum vel commodi quo explicabo iste molestiae ab sapiente, assumenda laudantium? Voluptatibus doloremque sequi iure natus.</p>
<p>Deleniti modi adipisci error, esse deserunt minus architecto aperiam quisquam, qui illum assumenda vitae, sapiente soluta aspernatur ut sit fuga distinctio. Saepe perspiciatis iste tenetur, voluptates officia deserunt optio enim.</p>
<p>Doloremque laudantium numquam explicabo quas! Officiis natus incidunt vitae maxime, odit doloribus et voluptatibus veniam eligendi provident voluptatem laborum recusandae accusamus possimus optio quo reiciendis rerum cupiditate asperiores corporis. Modi.</p>
<p>Placeat provident nulla explicabo fuga mollitia voluptatum consectetur velit non similique, iusto, soluta reiciendis est et iure ut eum ad exercitationem, alias nam earum natus, dignissimos vero. Aspernatur, omnis, autem.</p>
<p>Animi repellat, ad omnis molestias illo earum et, rem aspernatur pariatur deleniti, deserunt optio officiis voluptatibus soluta nemo amet sequi minima voluptatum. Doloremque voluptatibus assumenda consectetur repudiandae laudantium, vero totam!</p>
<p>Nihil placeat quo dolorum sunt, iusto, repellendus consequuntur similique reprehenderit. Repellendus aperiam, nihil atque id odio ducimus et, quidem amet debitis! Maxime, illum, ullam. Asperiores amet sapiente unde omnis voluptatum!</p>
<p>Dolorum qui, labore odio sequi, aliquam non. Odit magni nostrum sed, alias perspiciatis voluptate nesciunt tenetur blanditiis velit amet voluptatem nisi aliquid corporis veritatis sunt delectus fugit molestiae officiis quibusdam.</p>
<p>Doloremque voluptate, quasi. Vero ipsam mollitia hic deserunt vitae quis minima fugiat et quae expedita repellendus ad, eum illo rerum ipsum, placeat vel repellat ducimus non dignissimos ea debitis minus?</p>
<p>At saepe, praesentium quo ipsam? Unde alias quae, sit officia omnis iure, praesentium autem fugit est iusto ratione vitae accusamus explicabo perspiciatis excepturi aut animi, tenetur magni at. Necessitatibus, quia.</p>
<p>Fugit, harum. Incidunt dolor architecto rerum commodi est, odit saepe totam, cum facilis, praesentium, iure necessitatibus repudiandae minus. Eveniet et, corporis vel illum dicta eligendi deleniti quas vitae officia quasi!</p>
<p>Dolorem, omnis unde fugit dolore. Quidem id possimus, ea repellat libero praesentium similique, repudiandae officiis fugit illo animi, nemo deleniti voluptatem cumque at quis sequi eum error dolorem sint accusamus.</p>
<p>Obcaecati velit saepe soluta quo suscipit eius, perspiciatis quidem aspernatur totam qui impedit dolores nam alias accusamus deserunt magnam, fugiat sapiente voluptatum tempora iste consequatur voluptate. Quo amet, necessitatibus possimus!</p>
<p>Voluptas quo nisi repellendus nobis ipsa ut iste aperiam quas earum distinctio aliquid voluptate maxime, beatae corporis temporibus fugiat id unde, quos fuga commodi eveniet reiciendis. Eos, repudiandae odio fugit!</p>
<p>Voluptatibus quibusdam ea distinctio dolorum quasi libero odio adipisci repellendus illum natus eaque, nemo eius aliquid error optio cumque dicta architecto. Aut dignissimos consequatur, ab neque nulla natus cupiditate similique?</p>
<p>Et adipisci illum minus totam debitis neque a sunt odit error quos illo consequuntur dolore qui, sint. Laudantium cupiditate, est omnis. Et praesentium harum, doloribus dicta ipsum qui laborum voluptatem.</p>
<p>Excepturi atque ducimus at fugiat delectus minus corporis, a totam provident explicabo. Error tempora quasi, consectetur aliquam, ipsum repellendus perspiciatis praesentium mollitia! Incidunt reiciendis suscipit, illo. Odit iste iure numquam!</p>
<p>Ea fugiat aliquam libero nemo repellendus placeat iste maxime rem ipsum itaque dolorum perspiciatis deleniti, alias temporibus ratione voluptatem doloremque vitae, enim nam quisquam, eaque. Temporibus voluptatum cumque dolorem eveniet.</p>
<p>Molestias modi, soluta! Eaque nam nobis unde vero, consectetur neque voluptatibus tempore, aliquam error voluptatem eius illo nulla tempora quam, eveniet quo, in sunt similique harum? Laborum, laudantium, blanditiis! Esse.</p>
<p>Consectetur numquam incidunt, dolores dolore excepturi officiis, labore quaerat libero ipsam, cumque maiores eaque possimus quasi rem veniam aperiam omnis facilis, optio ducimus voluptatem. Sed rerum dicta nostrum animi quam?</p>
<p>Praesentium delectus impedit, veniam, cumque similique accusantium minima, repudiandae ratione voluptatibus deserunt eaque cupiditate dolorum assumenda quas consequatur, sit harum ut ipsam ipsa! Voluptas veritatis doloribus facere soluta expedita vero.</p>
<p>Vel quidem repellat, amet eum at mollitia laborum debitis qui labore facilis harum corporis veniam ab magnam non perspiciatis. Ducimus distinctio amet similique nemo alias reprehenderit! Corporis officia ipsa ipsam.</p>
<p>Aliquam laborum tempora error nihil aliquid natus omnis quas. Laudantium necessitatibus aliquam sit hic eveniet voluptate vero aut error fuga officiis voluptatum explicabo eum, harum tempora velit enim est reiciendis?</p>
<p>Autem voluptate ipsa quo totam vitae rerum ab, voluptatibus? Odio quaerat, officia dolore deleniti! Magni nemo, quos, ab ad rerum totam architecto. Iste expedita tempore deleniti nostrum aliquid id, quam.</p>
<p>Et tempore architecto modi, expedita labore, accusamus ipsa quisquam impedit amet quis molestiae aperiam dolor, ipsam ut ab iusto illum non debitis commodi autem. Similique consectetur minima ad saepe alias.</p>
<p>Eligendi eos fugit ipsam dolorem illo corrupti accusamus veniam vero laborum fugiat quisquam expedita reiciendis provident veritatis, recusandae odio. Ipsa quia quasi deleniti minima molestias accusamus explicabo itaque debitis impedit!</p>
<p>Repudiandae accusantium, dolor fugiat hic facilis, nobis iure ullam quas eaque ipsum perferendis expedita quae dignissimos consectetur esse delectus adipisci, sint. Neque natus ipsum similique, sapiente repellendus laborum. Architecto, blanditiis.</p>
</div>
</div>
Raw
script.js
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(document, "mouseleave", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
activateMenu('close');
}
});
function setupMenu() {
$('.trigger').on('click', function() {
activateMenu('open');
});
$('.menu').on('mouseleave', function() {
activateMenu('close');
})
}
function showMenu() {
$('.content').transition({x:50},500,'ease');
}
function activateMenu(state) {
var matrix = $('.content').css('transform');
var values = matrix.match(/-?[0-9\.]+/g);
if(state == 'open') {
$('.trigger').stop().transition({y: -50},350,'easeOutQuint');
$('.content').stop().transition({x: 200},500,'easeOutQuint');
$('.menu').stop().transition({backgroundColor: '#e7ddcf'}, 500);
$('#sectionLinks').stop().transition({opacity: 1,y: -125},350);
} else if(state == 'close') {
$('.trigger').stop().transition({y: 0},350, 'easeOutQuint');
$('.content').stop().transition({x: 50,},500,'easeOutQuint');
$('.menu').stop().transition({backgroundColor: '#2e2820'}, 500);
$('#sectionLinks').stop().transition({opacity: 0,y: 125},300, 'easeOutQuint');
}
}
setupMenu();
showMenu();
Raw
style.css
* {
font-family: "Open Sans";
}
html:root {
font-size: 16px;
};
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
display: flex;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
overflow: hidden;
}
.menu {
width: 200px;
background-color: #2e2820;
display: flex;
color: #fff;
position: relative;
z-index: 1;
}
#sectionLinks {
opacity: 0;
position: absolute;
width: 200px;
top: 150px;
left: 0;
}
#sectionLinks ul,
#sectionLinks li {
margin: 0;
padding: 0;
list-style-type: none;
}
#sectionLinks>ul>li>a {
color: #000;
text-decoration: none;
font-size: 13px;
font-weight: 600;
display: block;
line-height: 2.5;
padding-left: 15px;
}
#sectionLinks>ul>li>a:hover {
background-color: #2e2820;
color: #fff;
}
.subnavList {
display: none;
}
.trigger {
background-color: #54814e;
font-size: 12px;
text-align: center;
height: 50px;
width: 50px;
transition: color .35s ease;
box-sizing: border-box;
color: #fff;
}
.trigger:hover {
cursor: pointer;
}
.hamburger {
padding-top: 6px;
display: block;
}
.line {
background-color: #fff;
height: 3px;
width: 22px;
display: block;
margin: 3px auto;
transition: background .35s ease;
}
.content {
flex: 1;
margin-left: -200px;
background-color: #fff;
position: relative;
z-index: 3;
padding: 0 50px;
margin-right: 50px;
overflow-y: scroll;
}
p,h2 {
max-width: 600px;
margin: 1em auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment