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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <button onclick="document.querySelector('.wrapper').classList.toggle('wrapper--small');" style="margin-bottom:10px;">Toggle document width</button>
<div class="wrapper">
  <div class="toolbar toolbar--small">
    <div class="toolbar__inner">
      <div class="dropdown">
        Dropdown menu 1
        <div class="dropdown__menu">
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
          </ul>
        </div>
      </div>
      <button class="button">Button 1</button>
      <button class="button">Button 2</button>
      <button class="button">Button 3</button>
      <div class="dropdown">
        Dropdown menu 2
        <div class="dropdown__menu right">
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div style="padding:20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum congue quam porta gravida. Nullam aliquet ligula sit amet interdum finibus. Nullam convallis, orci quis iaculis dignissim, nibh ipsum dapibus nunc, vitae venenatis justo nisi at odio. Cras finibus nibh quis dapibus imperdiet. Donec posuere lectus eu consectetur pellentesque. Ut euismod metus felis, vitae luctus tortor consequat venenatis. Pellentesque est nisl, euismod vitae fringilla et, hendrerit nec tortor. Nam et semper nisl. Mauris in vestibulum justo. Quisque quis magna ut nunc gravida auctor. Duis eget tempus urna. Aliquam est mi, aliquet et scelerisque sit amet, pulvinar sit amet ante. Phasellus eget eleifend risus. Sed placerat lacinia porta. Ut pellentesque bibendum nisl et aliquet.

  Aenean id sapien mauris. Vestibulum eu elit et ligula tempus mattis. Morbi semper eu ligula vitae elementum. Mauris accumsan sapien vitae velit commodo pharetra. Suspendisse id lacus vestibulum, laoreet elit non, venenatis dui. Maecenas at velit turpis. Aliquam at diam vel diam consectetur tincidunt id eget neque. Nullam ultrices augue quis sem vulputate, a volutpat arcu auctor. Pellentesque id mauris dignissim turpis scelerisque cursus eu vel magna. Quisque sollicitudin erat vel nibh tempor imperdiet. In hac habitasse platea dictumst. Aliquam non vestibulum eros. Nam a lorem at libero sagittis fermentum.

  In hac habitasse platea dictumst. Pellentesque bibendum, lectus nec condimentum tempus, diam lorem sagittis magna, ut convallis tortor sem eget lectus. Etiam ac tellus eu turpis blandit finibus nec et lacus. Sed vitae velit leo. Nulla in odio a mauris semper volutpat. Etiam accumsan orci vel lacus lobortis convallis. Curabitur eget felis tempus, imperdiet nunc a, imperdiet nibh.

  Proin gravida tincidunt tortor eget eleifend. Vestibulum egestas laoreet sapien at imperdiet. Sed nec vehicula turpis. Nunc interdum dui non finibus imperdiet. Sed viverra augue et imperdiet lacinia. In in auctor dolor, eget scelerisque eros. Vivamus augue mauris, eleifend id sapien et, lacinia ullamcorper lacus. Nulla venenatis quis nibh sed tincidunt. Vestibulum at neque eget sapien luctus hendrerit. Curabitur sed nisl id massa mattis vehicula.

  Fusce in leo id ligula vulputate viverra at non augue. Nam tristique tellus non massa luctus tristique. In sit amet dolor non enim imperdiet scelerisque id ut quam. Ut tristique vulputate quam, eleifend dapibus erat lacinia et. Praesent diam dolor, auctor nec orci sit amet, pellentesque venenatis magna. Sed semper a ex non scelerisque. Quisque feugiat eros sem, vitae tempus urna pellentesque nec. Sed scelerisque viverra viverra. Etiam et volutpat enim. Integer non metus rutrum, consequat turpis pretium, sodales velit. Nam imperdiet nec sem a iaculis. Nunc cursus dolor id enim efficitur tincidunt. Cras finibus quis quam varius posuere. Mauris tincidunt iaculis eros nec tincidunt. Etiam tortor dui, laoreet hendrerit congue ut, sollicitudin nec nibh.
  </div>
</div>
            
          
!

CSS

            
              *{
  box-sizing:border-box;
}
.wrapper{
  width:800px;
}
.wrapper--small{
  width:300px;
}
.toolbar{
  position:relative;
  width:100%;
}
.toolbar__inner{
  background:#ddd;
  border:1px solid #aaa;
  width:100%;
  padding:10px;
  overflow-x:auto;
  white-space: nowrap;
}
.dropdown, button{
  display:inline-block;
  font-size:15px;
  line-height:15px;
  font-family:arial;
  padding:10px;
  border:1px solid #aaa;
  background:#eee;
  cursor:pointer;
}
.dropdown__menu{
  position:absolute;
  display:none;
  overflow:hidden;
}
.dropdown--active .dropdown__menu{
  display:block;  
}
.dropdown__menu ul{
  padding:0px;
  margin:0px;
  list-style:none;
  background:#fff;
  border:1px solid #aaa;
}
.dropdown__menu ul li{
  padding:10px;
  width:100%;
  box-sizing:border-box;
}
.dropdown__menu ul li:hover{
  background:#eee;
}

            
          
!

JS

            
              (function(){
  let dropdown = document.querySelectorAll('.dropdown');
  
  dropdown.forEach(function(node, index){
    let _this = node;
    let menu = _this.querySelector('.dropdown__menu');
    let container = getScrollable(_this);
    /*
    * Dropdown on click
    */
    _this.addEventListener('click', function(e){
      let activeDropdown = document.querySelector('.dropdown.dropdown--active');
      //close other dropdowns if opened
      if(activeDropdown && activeDropdown != _this){
        activeDropdown.classList.remove('dropdown--active');
      }
      //toggle dropdown visibility
      _this.classList.toggle('dropdown--active');
      //Update the position of the dropdown menu
      setDropdownPosition(_this, container);
    });
    /*
    * Stop propagation of click inside the dropdown to avoid the dropdown closing when clicking on one of the options
    */
    menu.addEventListener('click', function(e){
      e.stopPropagation();                       
    });
    /*
    * If the dropdown is inside an scrollabe element
    * we want to change the position of the dropdown menus on scroll
    */
    if(container){
      container.addEventListener('scroll', function(){
        setDropdownPosition(_this, container);
      });
    }
  });
  /*
  * Close dropdown when clicking outside
  */
  document.addEventListener('click', function(e){
    let activeDropdown = document.querySelector('.dropdown.dropdown--active');
    
    if(activeDropdown){
      if(!(e.target.classList.contains('dropdown') || hasParentWithClass(e.target, 'dropdown'))){
        activeDropdown.classList.remove('dropdown--active');
      }
    }
  });
})();
/*
* Control dropdown menu positioning
*/
function setDropdownPosition(dropdown, container){
  let menu = dropdown.querySelector('.dropdown__menu');

  let topPosition = dropdown.offsetTop + dropdown.offsetHeight;
  let leftPosition = dropdown.offsetLeft;
  let rightPosition = dropdown.offsetLeft + dropdown.offsetWidth;
  let scrollPosition = container.scrollLeft;
  let position = 0;
  
  menu.style.top = topPosition + 'px';
  // Define position
  if(menu.classList.contains('right')){
    position = rightPosition - scrollPosition - menu.offsetWidth;
  }else{
    position = leftPosition - scrollPosition;
  }
  //Visibility depends on the scroll
  if(position < 0 || position > dropdown.offsetParent.offsetWidth){
    menu.style.height = '0px';
  }else{
    menu.style.height = 'auto';
  }
  
  menu.style.left = position + 'px';
}
/*
* Check if a node has a parent element with x classname
*/
function hasParentWithClass(node, className){
  let parent = node.parentNode;
  
  while(parent != document){
    if(parent.classList.contains(className)){
      return true;
    }
                                             
    parent = parent.parentNode;
  }
       
  return false;
}
/*
* Find a parent element (inside the offsetparent) that has a scroll
*/
function getScrollable(node){
  let container = node.offsetParent;
  let parent = node.parentNode;
  let overflowStates = ['auto', 'scroll'];
  
  while(parent != container){
    if(overflowStates.indexOf(parent.style.overflow)){
      return parent;
    }
                                             
    parent = parent.parentNode;
  }
       
  return false;
}
            
          
!
999px

Console