cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <div class="viewport">
  <header class="header js-header" role="banner">
    <h1>Page Title</h1>
    <nav id="menu" class="menu js-menu" role="navigation">
      <ul>
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
        <li>
          <a href="#">Link 3</a>
        </li>
      </ul>
    </nav>
  </header>
  <main class="main" role="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros <a href="#">nibh</a>, tincidunt at libero sed, pellentesque porttitor purus. Nam lobortis a magna at pretium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros nibh, tincidunt at libero sed, pellentesque porttitor purus. Nam lobortis a magna at pretium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros nibh, tincidunt at libero sed, pellentesque porttitor purus. Nam lobortis a magna at pretium.</p>
  </main>
  
            
          
!
            
              body {
  background-color: #ddd;  
}

h1 {
  font-size: 1em;
  margin: 0;
  padding: 1em;
  text-align: center;
}

.viewport {
  background-color: #fff;
  margin: 0 auto;  
  max-width: 20em;  
}

.header {
  background-color: #222;
  color: #fff;
  position: relative;
}

.header a {
  color: #fff;
  text-decoration: none;
}

.menu {
  display: none;
}

.menu.active {
  display: block;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li:nth-child(odd) {
  background-color: #333;
}
  
.menu li:nth-child(even) {
  background-color: #444;
}
  
.menu a {
  display: block;
  padding: .5em;
}

.no-js .menu {
  display: block;
}

.menu-button {
  background-color: transparent;
  border: none;  
  font-size: 2em;  
  line-height: 1;
  position: absolute;
  right: .3em;
  top: .2em;
}

.main {
  padding: .5em 1em;
}

// h5bp.com/v
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
            
          
!
            
              (function(document, window, undefined) {

  'use strict';
  
  // Vars
  var header = document.querySelector('.js-header'),
    menu = document.querySelector('.js-menu'),
    menuButton = document.createElement('a');

  // Button properties
  menuButton.classList.add('menu-button');
  menuButton.setAttribute('href', '#menu');
  menuButton.setAttribute('id', 'menu-button');
  menuButton.setAttribute('aria-label', 'Menu');
  menuButton.setAttribute('aria-expanded', 'false');
  menuButton.setAttribute('aria-controls', 'menu');
  menuButton.innerHTML = '<span aria-hidden="true">&#x2261;</span>';
  
  // Menu properties
  menu.setAttribute('aria-hidden', 'true');
  menu.setAttribute('aria-labelledby', 'menu-button');
  
  // Add button to page
  header.insertBefore(menuButton, menu);

  // Handle button click event
  menuButton.addEventListener('click', function () {
    
    // If active...
    if (menu.classList.contains('active')) {
      // Hide
      menu.classList.remove('active');
      menu.setAttribute('aria-hidden', 'true');
      menuButton.setAttribute('aria-expanded', 'false');
    } else {
      // Show
      menu.classList.add('active');
      menu.setAttribute('aria-hidden', 'false');
      menuButton.setAttribute('aria-expanded', 'true');

      // Set focus on first link
      menu.children[0].children[0].children[0].focus();
    }
  }, false);
  
})(document, window);
            
          
!
999px
Loading ..................

Console