"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header class="eaHeader animate"> <div class="section full-width"> <div class="content level0"> <div class="links align-left"> <a href="#" class="link current am-here">Home</a> <a href="#" class="link">Business</a> <a href="#" class="link">About us</a> <a href="#" class="link">Blog</a></div> <div class="links align-right"> <a href="#" class="link">My Account</a><a href="#" class="link">State<span class="icon-chevronDown no-underline"></span></a><a href="#" class="link search"><span class="icon-search"></span></a></div> </div> </div> <div class="section search-wrapper full-width"> <div class="search-bar animate"> <input class="search-input" type="text" placeholder="Search" /> <button class="btn btn-quaternary"><span class="icon-ctaArrow"></span></button> </div> </div> <div class="content level1"> <div class="eaLogo align-left "></div> <div class="links align-right"> <a href="#" id="megaElecAndGas" class="link level1 current-page"><span>Electricity and gas </span><span class="icon-chevronDown"></span></a> <a href="#" id="megaSolarAndBatteries" class="link level1">Solar and batteries <span class="icon-chevronDown"></span></a> <a href="#" id="megaBillsAndAccounts" class="link level1">Bills and accounts <span class="icon-chevronDown"></span></a> <a href="#" id="megaHelpAndSupport" class="link level1">Help and support <span class="icon-chevronDown"></span></a> <a href="#" class="link level1">State<span class="icon-chevronDown"></span></a> </div> </div> <div class="content level2"> <div class="megaMenu"> <div class="megaLinks megaElecAndGas "> <div class="wrapper co_l compon_ent-8-cols-self"><h3 class="megaMenu-subheading">Looking for the best electricity or gas deal?</h3> <div class="nav-three-column compon_ent-6-cols-self col1"> <a href="#" class="link level2 ">Compare electricity and gas plans<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Understand electricity and gas plans<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">How to compare plans<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 current-page">What is off peak electricity?<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">When to switch<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">What is tariff?<span class="icon-chevronRight"></span></a> </div> <div class="nav-three-column compon_ent-6-cols-self col2"> <a href="#" class="link level2">Moving house<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">How to disconnect and reconnect<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">New meters and installations<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Green energy plans<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Green energy options<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Energy saving and safety<span class="icon-chevronRight"></span></a> </div> </div> <div class="nav-three-column three-column-width col3"> <div class="widget component-three-column component-with-image-and-text coloured-bkgd"> <div class="component-image component-image-variable-height"></div> <div class="component-text-wrapper"> <h4 class="component-heading">Looking for cost savings, flexibility or want to avoid price rises?</h4> <p class="component-blurb">Electricity and gas plans to meet your needs.</p> <button class="btn btn-quaternary btn-bkgd-white">Pick a plan<span class="icon-ctaArrow"></span></button> </div> </div> </div> </div> </div> </div> <div class="content level2"> <div class="megaMenu"> <div class="megaLinks megaSolarAndBatteries "> <div class="wrapper co_l compon_ent-8-cols-self"> <h3 class="megaMenu-subheading">Take control of your household electricity with solar</h3> <div class="nav-three-column three-col_umn-width col1"> <a href="#" class="link level2 ">Solar power<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Solar power systems<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Solar power made easy<span class="icon-chevronRight"></span></a> </div> <div class="nav-three-column three-col_umn-width col2"> <a href="#" class="link level2 ">Battery storage<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Finance options<span class="icon-chevronRight"></span></a> <!-- <a href="#" class="link level2 ">NSW solar scheme<span class="icon-chevronRight"></span></a> --> </div> </div> <div class="nav-three-column three-column-width col3"> <div class="widget centered-content component-three-column coloured-bkgd"> <div class="component-icon"><span class="icon-callback"></span></div> <h4 class="component-heading">Request a callback</h4> <p class="component-blurb">Leave your details and we’ll call you back at a time that’s convenient for you.</p> <button class="btn btn-primary btn-bkgd-white">Have us call you<span class="icon-ctaArrow"></span></button> </div> </div> </div> </div> </div> <div class="content level2"> <div class="megaMenu"> <div class="megaLinks megaBillsAndAccounts "> <div class="wrapper "> <h3 class="megaMenu-subheading">Example meaningful subheading</h3> <div class="nav-three-column three-col_umn-width col1"> <a href="#" class="link level2 ">Manage your accounts<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Pay your bill<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Understand your bill<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Payment options<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Request a payment extension<span class="icon-chevronRight"></span></a> </div> <div class="nav-three-column three-col_umn-width col2"> <a href="#" class="link level2 ">Go carbon neutral<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Hardship policy<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Switch to eBilling<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Understand your meter<span class="icon-chevronRight"></span></a> <a href="#" class="link level2 ">Concessions<span class="icon-chevronRight"></span></a> </div> </div> <div class="nav-three-column three-column-width col3"> <div class="widget component-three-column component-with-image-and-text coloured-bkgd"> <div class="component-image component-image-variable-height"></div> <div class="component-text-wrapper"> <h4 class="component-heading">100% carbon neutral electricity in your home, and it won’t cost you an extra cent.</h4> <button class="btn btn-primary btn-bkgd-white">Change the future<span class="icon-ctaArrow"></span></button> </div> </div> </div> </div> </div> </div> <div class="content level2"> <div class="megaMenu"> <div class="megaLinks megaHelpAndSupport"> <div class="wrapper "> <h3 class="megaMenu-subheading">Helpful meaningful subheading</h3> <div class="nav-three-column three-col_umn-width col1"> <a href="#" class="link level2 not-a-link">Contact us</a> <a href="#" class="link level3 ">Billing and enquiries<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Electricity and gas plans<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Faults and emergencies<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Find an electricity distributor<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Meter installations or upgrades<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">View all contacts<span class="icon-chevronRight"></span></a> </div> <div class="nav-three-column three-col_umn-width col2"> <a href="#" class="link level2 not-a-link">Frequently asked questions</span></a> <a href="#" class="link level3 ">Accounts, bills and payments<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">My Account<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Carbon neutral<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Flexible pricing<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">Smart meters<span class="icon-chevronRight"></span></a> <a href="#" class="link level3 ">View all FAQ categories<span class="icon-chevronRight"></span></a> </div> </div> <div class="nav-three-column three-column-width col3"> <div class="widget centered-content component-three-column coloured-bkgd"> <div class="component-icon"><span class="icon-telephone"></span></div> <h4 class="component-heading">Contact us regarding your existing account</h4> <p class="component-blurb">Need help with your existing account?<br> Our friendly team are here to help.</p> <button class="btn btn-primary btn-bkgd-white">Contact us<span class="icon-ctaArrow"></span></button> </div> </div> </div> </div> </div> </header> <!-- <div class="section-banner "> <div class="section-banner-image group"></div> <div class="section-banner-wrapper"> <div class="section-banner-content"> <h1>Generation & assets</h1> <div class="blurb">EnergyAustralia owns and operates a portfolio of energy generation and storage facilities, including coal and gas assets.</div> </div> </div> </div> --> <!-- <section class="hero full-width"> <div class="content"> </div> Hero </section> --> <section class="image full-width"> <div class="content"> </div> Image </section> <nav class="quicklinks"> <div class="content"> <a href="#" class="link"> <span class="icon-GasElectricity"></span>Compare Plans </a> <a href="#" class="link"> <span class="icon-moving"></span>Move house </a> <a href="#" class="link"> <span class="icon-solar"></span>Solar and Batteries </a> <a href="#" class="link"> <span class="icon-avatar"></span>My Account </a> <a href="#" class="link"> <span class="icon-directDebit"></span>Pay a bill </a> <a href="#" class="link"> <span class="icon-question"></span>Help and support </a> </div> </nav> <section class="full-width-wrapper"> <div class="full-width-banner-image points-program-image"></div> <div class="single-column-wrapper points-program-content"> <h2>Points partnership.</h2> <a href="#" class="component-text-link secondary-link">Find out more<span class="icon-ctaArrow"></span></a> </div> </section> <section class="three-column-wrapper"> <h2>Put the sun to work with a solar and battery system.</h2> <div class="component-three-column three-column-width component-with-image"> <div class="component-image solar"></div> <a href="#" class="component-text-link">Solar power<span class="icon-chevronRight"></span></a> </div> <div class="component-three-column three-column-width component-with-image"> <div class="component-image battery-storage"></div> <a href="#" class="component-text-link">Battery and storage<span class="icon-chevronRight"></span></a> </div> <div class="component-three-column three-column-width component-with-image"> <div class="component-image payment-options"></div> <a href="#" class="component-text-link">Payment options<span class="icon-chevronRight"></span></a> </div> </section> [[[https://codepen.io/chrismoore/pen/gWwOQB]]]
/* Am linking to external css */ /* ea fonts */ /* http://codepen.io/chrismoore/pen/jyqrpL */ /* ea icons */ /* http://codepen.io/chrismoore/pen/XpdKwy */ /* section banners */ /* http://codepen.io/chrismoore/pen/RKqwWv */ /* components - three column */ /* http://codepen.io/chrismoore/pen/xgBOML */ /* points program */ /* http://codepen.io/chrismoore/pen/apxbaB */ /* Buttons and links */ /* http://codepen.io/chrismoore/pen/bqVNmB */ /* breakpoint overlay */ /* https://codepen.io/chrismoore/pen/QvjXdy */ /* grid overlay widget */ /* https://codepen.io/chrismoore/pen/gWwOQB */ /* common styles */ .animate { -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } body { padding-top: 127px; } .full-width { width: 100%; } .content { /* max-width: 1200px; */ padding-left:10px; padding-right:10px; margin-left:auto; margin-right:auto; display:flex; justify-content:center; } .content.level2 { max-width: 100%; padding:0; background:rgba(242, 242, 242, 0.5); /* darkest AAA grey */ background-color:#C2C2C2; /* doubled the luminosity of e9eae8 */ background-color:#D1D1D1; /* just freestyled */ background-color:#DBDBDB; background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(233,234,232,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(233,234,232,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(219,219,219,1) 0%,rgba(233,234,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* flipping the order: dark at top, light at bottom */ background: -moz-linear-gradient(top, rgba(244,244,244,1) 0%, rgba(233,234,232,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(233,234,232,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(233,234,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } /* header */ .eaHeader { width: 100%; background: #fff; border-top: 32px solid #d9d9d9; /* 85% luminosity */ position:absolute; top:0; box-shadow: -10px -15px 20px 10px rgba(0,0,0,0.15); z-index:99; } .eaHeader:after { /* content: ""; background: #e9eae8; left: 0; right: 0; bottom: 0; height: 2px; position: absolute; */ } .level0 { margin-top: -32px; } .align-left { /* flex-grow: 1; */ } .align-right { flex-grow: 1; justify-content: flex-end; } .links { display:flex; align-items: stretch; flex-grow: 1; flex-basis: 0; } a { font-size: 13px; line-height: 1.4; font-family: MSR700; text-decoration: none; color: #333; } .links a { line-height:32px; } .links a:hover { text-decoration: underline; } .links a:hover .no-underline { text-decoration: none; display:inline-block; } .links a.search:hover { text-decoration:none; color:#0d8924; } .links a:first-child { margin-left: 0; } .links a.current-section { font-family: MSR900; position:relative; } .nav-three-column { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; box-sizing:border-box; } .nav-three-column a:first-child { margin-top:20px; } .nav-three-column a:last-child { border-bottom:0; margin-bottom:40px; } .level0 { max-width: 1200px; } .level0 .links a.current-section:after { content:""; width: 0px; height: 0px; border: 8px solid transparent; border-left:6px solid #d9d9d9; border-right:6px solid #d9d9d9; border-top:0; background-color: #fff; position:absolute; z-index: 1; left:50%; transform: translateX(-50%); bottom:0px; } .level0 .link { margin-left:30px; color: #666; } .level0 .link.current-section { /* margin-left:30px; */ color: #333; } .level0 .link.current-section:hover { text-decoration: none; } .level0 .link.search { padding: 0 10px; margin-left:10px; min-width: 35px; text-align:center; } .level0 .links a.search.active:after { background-color: #bfbfbf; } .level0 .links a.search.open > span:before { content:"\e004"; font-size:12px; } .search-wrapper { background:#bfbfbf; width:100%; } .search-bar { height:0px; max-width: 1200px; overflow:hidden; margin: 0 auto; display:flex; justify-content: flex-end; align-items: center; position:relative; } .search-bar input { height: 45px; line-height:45px; padding: 0 40px 0 20px; border-radius: 2px; border:none; margin: 30px 0; width:100%; max-width: 47.91666%; margin-right:1.041666%; font-family:MSR500; font-size:16px; box-sizing: border-box; } .search-bar .btn { margin-bottom:0; position:absolute; right:1.041666%; top: 50%; transform: translateY(-50%); min-width:0; padding:5px 10px; } .level1 { height: 95px; max-width:1200px; /* background: #fff; */ /* max-width: 1200px; */ /* margin: 0 auto; */ position:relative; } .level1 .links a { height: auto; font-size: 18px; line-height:1.2; color: #666; font-family: MSR700; /* margin-left: 20px; */ padding:0 10px; display: flex; align-items: center; text-align:center; } .level1 .links a:last-child { display:none; } .level1 .links a:hover { text-decoration: none; position:relative; color:#333; } .level1 .link [class^="icon-"], .level1 .link [class*=" icon-"] { margin-top:-5px; font-size:20px; } .level1 .links .active { background-color: rgba(242, 242, 242, 0.5); /* background-color: rgba(219, 219, 219, 0.85); */ background-color: #dbdbdb; /* flipping the order: dark at top, lighter below */ background-color: #f4f4f4; color:#333; /* border-bottom:2px solid red; */ } .level1 .links .active:after, .level1 .links a:hover:after { /* content: ""; position:absolute; left:0; right:0; bottom:0; height:2px; background-color:#0d8924; z-index:1; */ } a.link.level1 { border-bottom:2px solid transparent; } a.link.level1.current-page { border-color:green; } a.link.level1.active { border-color:transparent; color: green; } .eaLogo { background-image: url(https://drive.google.com/uc?id=0B7VtXtcq_eQkRndOOG43Mjd1MDg); background-repeat: no-repeat; background-size: 100% auto; background-position: 0px 50%; width:100%; max-width:280px; margin-right:40px; } /* Hero */ .hero { /* background-color:pink; */ line-height:600px; text-align:center; min-height: 600px; } /* Quicklinks */ .quicklinks { background-color: #e9eae8; } .quicklinks .content { max-width: 1200px; align-items: center; justify-content: space-around; } .quicklinks .link { height: 120px; flex-direction: column; justify-content: center; align-items: center; display:flex; text-decoration:none; font-family:MSR900; color:#333; } .quicklinks .link span { color:#333; } .quicklinks span[class*="icon-"] { font-size: 40px; padding-bottom:13px; } /* mega menu */ .megaMenu { display:flex; flex-grow: 1; max-width:1200px; } .megaMenu-subheading { width:100%; margin-left:1.53846%; /* margin-left: calc(1.041666% + 10px); */ /* margin-top:40px; */ } /* .megaMenu:before { content: ""; border-top: 2px solid #e9eae8; position: absolute; left: 0; right: 0; top: 93px; z-index: 0; } */ .megaMenu .link { /* padding-left:10px; */ padding-left: 3.2258%; min-height: 35px; display: flex; align-items: center; line-height: 1.2; } .megaMenu .link:not(.not-a-link):hover { background: #0d8924; color: #fff; } .megaMenu .link:hover span { color: #fff; } .megaMenu .link.not-a-link:hover { cursor:default; } .megaLinks { height: 0; /* max-width:0; */ overflow:hidden; display: flex; flex-grow: 1; flex-wrap:wrap; } /* Mega menu links */ a.link.level2 { font-family: 'MSR500'; font-size: 18px; position: relative; } a.link.level2 + a.link.level2 { margin-top: 15px; } a.link.level3 { font-family: 'MSR300'; font-size: 16px; margin-left: 20px; } a.link.level2 + a.link.level2 { margin-top: 15px; } a.link.level3 + a.link.level2 { margin-top: 15px; } a.level3.current-page { font-family: MSR700; color:green; } /* text links */ .link [class^="icon-"], .link [class*=" icon-"] { color:#0d8924; margin-top: -2px; padding-left: 3px; } /* .level1 .links a span */ .link.search span { color:#333; font-size:16px; padding-left:0; } /* alternative left border link style */ .megaMenu.left-border .link { border-left: 2px solid #d9d9d9; margin-left:0; } .megaMenu.left-border .link.current-page { border-color:green; } /* widget */ .widget { /* background-color:#f4f4f4; */ display:flex; margin-top:0px; margin-bottom:40px; flex-grow:1; justify-content:center; align-items:center; color:#ccc; min-height:380px; box-sizing:border-box; } .widget.centered-content { text-align:center; justify-content: center; } .widget .btn { font-size:20px; } .widget .component-blurb + .btn-quaternary { margin-top:-10px; } .widget .component-image { background-image: url(https://www.energyaustralia.com.au/sites/default/files/styles/1x_col_feature_image/public/Mother%20and%20child%20planting%20tree.jpg?itok=xWIby4gc); } /* show/hide menu */ .megaLinks { } .reveal, .super-reveal { /* min-height:440px; */ height:auto; /* max-width:1200px; */ } .megaLinks.reveal, .megaLinks.super-reveal { padding-top:40px; } .image { height:600px; background-image: url(https://drive.google.com/uc?id=0B7VtXtcq_eQkeld3MGNFSmdKYWc); background-size:cover; background-position: 50%; } .megaLinks .nav-three-column .link { opacity: 0; } .megaLinks.reveal .nav-three-column .link, .megaLinks.super-reveal .nav-three-column .link { opacity: 1; } .megaLinks > .wrapper { display: flex; box-sizing: border-box; justify-content: space-between; align-content: flex-start; flex-wrap: wrap; width:67.708333%; } .megaLinks > .wrapper .col1 { width: 50.7692%; padding-right:3.0769%; } .megaLinks > .wrapper .col2 { width: 49.2307%; padding-right:3.0769%; } /* sticky */ @keyframes slideIn { 0% { top: -127px; } 100% { top: -32px; } } @keyframes slideBack { 0% { top: -65px; position:fixed; } 50% { top: -127px; } 51%{ position:absolute; } } @keyframes slideBackLogo { 0% { width: 50px; background-size: auto 65%; } 50% { width: 50px; background-size: auto 65%; } 100% { width:100%; } } @keyframes slideBackLevel1 { 0% { height: 65px; } 50% { height: 65px; } 51% { height:95px; } } .eaHeader.sticky { top:-127px; } .eaHeader.fixed { animation: slideIn 300ms; position:fixed; max-height:0; overflow:hidden; top:-32px; max-height:900px; } .eaHeader.slideBack { animation: slideBack 600ms; } .eaHeader.fixed .level1 { height:65px; } .eaHeader.slideBack .level1 { animation: slideBackLevel1 600ms; } .eaHeader.fixed .eaLogo { width: 50px; background-size: auto 65%; } .eaHeader.slideBack .eaLogo { animation: slideBackLogo 600ms; } .eaHeader.fixed .megaMenu:before { top:65px; } .eaHeader.fixed .level1 .link:last-child { padding-left:15px; position:relative; display:flex; } .eaHeader.fixed .level1 .link:last-child:before { content:""; position:absolute; left:0; top:15px; bottom:15px; width:1px; background:#e9eae8; } .megaSolarAndBatteries { /* display:none; */ }
$(document).ready(function() { var menuToShow; var level0Hover = false; var level1Hover = false; var navOffset = 127; $(".level0 .link").on('click', function() { $(".level0 .current-page").removeClass("current-page"); $(this).addClass("current-page"); }); $(".level0 .link.search").on('click', function() { $(".search-bar").toggleClass("reveal"); $(".search").toggleClass("open"); $( ".search-input" ).focus(); }); $(".level1 .link").mouseenter(function() { level0Hover = true; menuToShow = $(this).attr('id'); if (!$(this).hasClass("active")) { $(" .reveal").removeClass("reveal"); $("." + menuToShow).addClass("reveal"); } $(".level1 .active").removeClass("active"); $(this).addClass("active"); }); $( ".level1 .link" ).click(function() { $(".level1 .current-page").removeClass("current-page"); $(this).addClass("current-page"); }); $( ".level1 .link" ).dblclick(function() { menuToShow = $(this).attr('id'); $(this).toggleClass("super-reveal"); $("." + menuToShow).toggleClass("super-reveal"); }); $(".megaLinks").mouseenter(function() { level1Hover = true; }); $(".level1 .link").mouseleave(function() { level0Hover = false; setTimeout(function() { if (level0Hover == false && level1Hover == false) { $(".reveal").removeClass("reveal"); $(".level1 .active").removeClass("active"); } }, 100); }); $(".megaLinks").mouseleave(function() { level1Hover = false; setTimeout(function() { if (level0Hover == false) { $(".reveal").removeClass("reveal"); $(".level1 .active").removeClass("active"); } }, 50); }); $('.grid-overlay').on('click', function() { $('.grid-overlay').toggleClass('hidden'); return false; }); $(window).scroll(function() { var sticky = $('.eaHeader'), scroll = $(window).scrollTop(); if (scroll >= navOffset) sticky.addClass(' fixed').removeClass('slideBack'); if (scroll <= navOffset) $(".fixed").removeClass(' fixed').addClass('slideBack'); }); // $(document).keypress(function(e) { // }); $(document).keydown(function(e) { if(e.which == 13) { // alert('You pressed enter!'); $('.grid-overlay').toggleClass('hidden'); } if(e.which == 71) { // alert('You pressed g!'); $('.megaMenu').toggleClass('left-border'); } }); });

Related: See More


Questions / Comments: