cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <nav aria-label="Main navigation" role="navigation" id="nav">
  <ul>
    <li>
      <a href="https://twitter.com/ffoodd_fr">@ffoodd_fr on Twitter</a>
    </li>
    <li>
      <a href="https://github.com/ffoodd">ffoodd on Github</a>
    </li>
    <li>
      <a href="http://www.ffoodd.fr">ffoodd's blog</a>
    </li>
  </ul>
</nav>


<svg xmlns="http://www.w3.org/2000/svg" hidden="hidden">
          <symbol id="hamburger" viewBox="0 0 96 48">
            <path d="M0 24.016C8.4 15.52 14.855 9.096 23.952 0c2.205 2.22 4.45 4.41 6.608 6.67-4.384 4.48-7.778 7.843-12.548 12.613H96.01l-.014 4.646.04 4.755h-78.15L30.59 41.39c-2.21 2.206-4.405 4.43-6.637 6.61C15.583 39.516 8.773 33.14 0 24.016z"/>
            <rect width="48" height="9.301" x="48" y="38.699" ry="0"/>
            <rect width="48" height="9.301" x="48" ry="0"/>
          </symbol>
        </svg>
            
          
!
            
              /**
 * @section Nav ===============
 *
 * @note min-height is meant to make nav full height
 * 1. 3.5rem equals to hamburger's height + margin
 * 2. Initial hidden status
 * 3. Rendering optimization
 * 4. When JS opens nav
 * 5. When JS didn't work
 ** forwards means that animation maintains its final state
 ** second 300ms value is a delay: since JS can take that long to remove .no-js on <html>, we prevent animation to run before this
 */
[id="nav"] {
  background: whiteSmoke;
  min-height: calc(100vh - 3.5rem);   /* 1 */
  padding: 0 1rem;
  transform: translate3d(-100%, 0, 0); /* 2 */
  transition:
    transform 300ms ease-in 50ms,
    visibility 0s linear 300ms;        /* 2 */
  visibility: hidden;                  /* 2 */
  width: 18.75rem;
  will-change: transform, visibility;  /* 3 */
}

/* 4 */
.is-opened {
  transform: none;
  transition-delay: 0ms;
  visibility: visible;
}

 /* 5 */
.no-js [id="nav"] {
  animation: 300ms ease-in 300ms forwards no-js;
  min-height: 100vh;
}

/* 5
 * @link https://developer.mozilla.org/fr/docs/Web/CSS/animation
 */
@keyframes no-js {
  to {
    transform: none;
    transition-delay: 50ms, 0ms;
    visibility: visible;
  }
}

/**
 * @subsection Hamburger button --------------------
 *
 */
.btn-hamburger {
  background: transparent;
  border: 0;
  color: blue;
  cursor: pointer;
  font-size: 1.5rem;
  height: 1.5rem;
  margin: 1rem;
  overflow: hidden;
  padding: 0;
  transition: color 300ms ease-in;
  width: 1.5rem;
}

.btn-hamburger:hover,
.btn-hamburger:focus {
  border: 0;
  color: rebeccaPurple;
  outline: none;
}

.hamburger {
  fill: currentColor;
  height: 1em;
  margin-top: -1px;
  overflow: hidden;
  transform: translateX(-1em);
  transition: transform 150ms ease-in;
  width: 2em;
}

[aria-expanded="true"] .hamburger {
  transform: translateX(0);
}



/**
 * @section Base
 */
html[lang] {
  box-sizing: border-box;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  position: relative;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

[hidden] {
  display: none;
}

body {
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeSpeed;
  margin: 0;
  min-height: 100vh;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover,
a:focus {
  color: rebeccaPurple;
}

ul {
  padding-left: 0;
  list-style: none;
}

/*
	Improved screen reader only CSS class
	@author Gaël Poupard
	@note Based on Yahoo!'s technique
	@author Thierry Koblentz
	@see https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
	* 1.
		@note `clip` is deprecated but works everywhere
		@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip
	* 2.
		@note `clip-path` is the future-proof version, but not very well supported yet
		@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
		@see http://caniuse.com/#search=clip-path
		@author Yvain Liechti
		@see https://twitter.com/ryuran78/status/778943389819604992
	* 3.
		@note preventing text to be condensed
		author J. Renée Beach
		@see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
		@note Drupal 8 goes with word-wrap: normal instead
		@see https://www.drupal.org/node/2045151
		@see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
	* 4.
		@note !important is important
		@note Obviously you wanna hide something
		@author Harry Roberts
		@see http://csswizardry.com/2016/05/the-importance-of-important/
*/

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
					clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}

/*
	Use in conjunction with .sr-only to only display content when it's focused.
	@note Useful for skip links
	@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
	@note Based on a HTML5 Boilerplate technique, included in Bootstrap
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	-webkit-clip-path: none !important;
					clip-path: none !important;
	height: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
}
            
          
!
            
              'use strict';

$(document).ready(function() {
  /**
   * @section Collapse main nav element
   */
  var $hamburger = $('<button></button>'),
      $target    = 'nav',
      $nav       = $('#' + $target);

  // First add needed attributes
  $hamburger.attr({
    'class': 'btn-hamburger',
    'type': 'button',
    'aria-controls': $target,
    'aria-expanded': 'false',
    'aria-label': 'Navigation'
  });
  $hamburger.html('<svg aria-hidden="true" class="hamburger"><use xlink:href="#hamburger"/></svg>');
  // Then add button to markup
  $('body').prepend($hamburger);
  // and hide navigation
  $nav.attr('aria-hidden', 'true');

  // On click on hamburger button
  $hamburger.on('click', function() {
    // Check if nav is opened
    var $open = $nav.attr('aria-hidden');
    // If so, close it
    if(!$open) {
      $hamburger.attr('aria-expanded', 'false');
      $nav.attr('aria-hidden', 'true');
      $nav.removeClass('is-opened');
    // If not, open it
    } else {
      $hamburger.attr('aria-expanded', 'true');
      $nav.removeAttr('aria-hidden');
      $nav.addClass('is-opened');
    }
  });
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console