Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="content">
  <a href="#" id="trigger">Menu</a>
  <ul id="menu">
    <li class="menu-item"><a href="#anchor">Anchor link</a></li>
    <li class="menu-item"><a href="/example">Non-anchor link</a></li>
  </ul>
  <div>
    <p>Filler content.</p>
    <p>Fusce vel pulvinar libero, vitae dignissim quam. Nunc ut fermentum libero. Aenean odio sem, fringilla eu eros at, eleifend egestas libero. Curabitur nec cursus lorem. Integer scelerisque sed orci sit amet consectetur.</p>
  </div>
  <div id="anchor">
    <p>Anchor content.</p>
    <p>Filler content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi lacus, rhoncus vitae leo eu, maximus varius urna. Pellentesque tempor felis ac egestas dapibus. Quisque ullamcorper sem porttitor ornare porttitor. Suspendisse vitae blandit justo, a sollicitudin tortor. Sed leo lorem, cursus id sapien quis, tincidunt fringilla leo. Suspendisse fermentum massa vel ultrices rutrum. Nunc tincidunt, quam ut sagittis molestie, ipsum arcu consectetur nunc, et venenatis elit purus eget neque. Maecenas lobortis hendrerit auctor. Fusce vel pulvinar libero, vitae dignissim quam. Nunc ut fermentum libero. Aenean odio sem, fringilla eu eros at, eleifend egestas libero. Curabitur nec cursus lorem. Integer scelerisque sed orci sit amet consectetur.</p>
    <p>Cras non efficitur lorem. Sed eu nisi ex. Fusce id mi vitae justo dapibus iaculis in eu nibh. Vivamus eget eros quis tortor tristique mattis non et mauris. Donec scelerisque quis justo sit amet porttitor. Phasellus scelerisque dolor sit amet bibendum vulputate. Etiam nec ligula neque. Aenean et enim nisl. Sed aliquam quam non turpis suscipit, ac convallis lacus commodo. Aenean vestibulum nisi eget lobortis auctor. Proin quis dui quam. Donec ut tortor mollis, maximus nunc vitae, commodo elit. Donec scelerisque massa faucibus risus iaculis pretium. Morbi hendrerit lorem nec dolor interdum venenatis a vel mauris. Vivamus dictum volutpat ex id semper. Mauris rhoncus lorem at turpis efficitur, non ultricies sem porttitor.</p>
    <p> Maecenas id semper neque. Sed blandit nisi vitae pharetra tincidunt. Maecenas sapien augue, pretium non felis vitae, pellentesque aliquam velit. Sed vel lectus nisi. Pellentesque eleifend posuere nisl. Praesent ornare nunc eu sapien vulputate dapibus. Sed aliquam efficitur viverra. Ut auctor massa hendrerit sapien molestie laoreet. Aliquam facilisis felis vel molestie tincidunt. Donec vel elit mauris. Proin imperdiet magna eget sapien lobortis, sit amet venenatis ex feugiat.</p>
    <p>Fusce fermentum convallis dapibus. Aliquam maximus tincidunt sollicitudin. Suspendisse fringilla pulvinar ornare. Aliquam nulla turpis, laoreet vitae lobortis eget, imperdiet in nunc. Duis eu tempus libero. Morbi consectetur convallis vestibulum. Nulla fringilla orci nec magna euismod scelerisque. Morbi id iaculis sem. Duis varius ultricies malesuada. Nunc id ornare ante, sed varius turpis. Fusce vitae tristique dui. Praesent nec nunc semper, pretium velit et, sodales nisl. Nullam vulputate ex eget volutpat lacinia. Donec vitae ornare mi. Quisque sed nisi vitae eros luctus pulvinar.</p>
  </div>
</section>
              
            
!

CSS

              
                .content {
  position: relative;
}
#trigger:after {
  content: '+';
}
#trigger.open:after {
  content: '-';
}
#menu { 
  display: none; 
}
#menu.open { 
  display: block; 
  position: absolute; top: 2.4em; left: 0;
  height: 100%;
  width: 70%;
}

/* Other styles */
html { 
  background: #00ced1;
}
body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  margin: 0;
}
.content { 
  background: white;
  margin: 0 auto; 
  min-width: 500px;
  width: 50%; 
}
#trigger, #menu {
  background: #000;
  color: #fff;
  font-weight: bold;
}
#trigger {
  display: block;
  padding: 1em;
  text-decoration: none;
  text-transform: uppercase;
}
#trigger:after {
  float: right;
}
#menu { 
  list-style: none; 
  padding: 0; 
}
#menu li { 
  padding: .5em 1em; 
}
#menu a {
  color: #fff;
}
div {
  padding: 0 1em;
}
div#anchor {
  padding-bottom: 1em;
}
              
            
!

JS

              
                // Set up variables
var menuTrigger = document.getElementById('trigger');
var menuContent = document.getElementById('menu');
var menuItems = document.getElementsByClassName('menu-item');

// Basic menu toggle
function menuToggle() {
  menuTrigger.classList.toggle('open');
  menuContent.classList.toggle('open');
}

// Toggle menu on trigger click
menuTrigger.onclick = function(){
  menuToggle();
}

// Toggle menu on same-page anchor click
var windowHref = window.location.protocol + '//' + window.location.host + window.location.pathname; // Don't include any existing anchors in URL

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].onclick = function(e){
    var linkHref = this.getElementsByTagName('a')[0].href;
    if (linkHref.indexOf(windowHref) > -1) { // If the window's URL is found within the menu item's URL, toggle the menu
      menuToggle();
    }
  }
}
              
            
!
999px

Console