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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <div class="pageContainer" ng-app="app" ng-controller="appCtrl as ctrl">
  <div class="overlayWrapper">
    <div class="overlay" ng-hide="!ctrl.showDropdown">
    
    </div>
  </div>
  
  <header class="seperationLineBottom">
    <button ng-click="app.reload()" class="reload">Reload</button>
  </header>
  <div class="content">
    <div class="dropdown" ng-class="{ 'open': ctrl.showDropdown }">
      <div class="selected" ng-click="ctrl.toggleDropdown()">
        Option 1
      </div>
      <div class="options scrollable" ng-hide="!ctrl.showDropdown">
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
          <li>Option 5</li>
          <li>Option 6</li>
          <li>Option 7</li>
        </ul>
      </div>
    </div>
    
    <div class="contentWrapper scrollable">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis aliquet enim, ut ullamcorper nulla dictum in. Pellentesque elementum mi in orci efficitur, id ultrices velit dapibus. Aenean ac imperdiet tortor. Aenean cursus justo sed rutrum porttitor. Vestibulum sed velit ultrices, facilisis urna eget, viverra sem. Suspendisse quis nunc sed tortor dignissim tempus eget sit amet ante. Proin dictum ex vel leo iaculis hendrerit. Nam sollicitudin urna at quam blandit, in malesuada nisi tempus. Ut laoreet metus enim, malesuada dapibus elit vehicula vitae. Phasellus fermentum, magna iaculis malesuada accumsan, arcu tortor blandit lectus, eu posuere justo lorem eget eros. Curabitur placerat molestie interdum. Suspendisse ac nunc sed sapien ultricies sodales. Mauris non mi velit. Phasellus neque massa, euismod vel mi quis, egestas eleifend ex. Sed aliquam tincidunt lobortis. In nec neque nunc.

  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed placerat ut metus molestie consequat. Cras interdum tristique augue varius consectetur. Duis cursus justo sit amet sapien gravida tristique. Maecenas non erat nisi. Pellentesque risus justo, dictum a arcu vitae, malesuada maximus enim. Donec pharetra, magna a rutrum congue, metus nunc dictum lorem, eget euismod mauris augue at felis. Cras at nunc non lorem luctus lacinia. Duis sit amet consectetur diam. Duis id eros augue. Maecenas ultrices leo viverra sollicitudin condimentum. Vivamus tristique efficitur tellus, ac interdum est placerat ut. Nam ut finibus nibh. Mauris a interdum quam. Duis vulputate cursus justo, vestibulum tempus ante iaculis quis. Cras ac pulvinar erat.

  Curabitur elementum nulla erat, a suscipit lacus pellentesque nec. Praesent efficitur tortor in pretium dignissim. Aliquam commodo nisl orci, eget bibendum mauris ullamcorper non. Etiam quis nisl sed purus blandit lobortis id vel dui. Quisque nec tortor sit amet enim sodales gravida. Vivamus sagittis lobortis ante id laoreet. Etiam pellentesque facilisis risus ut sollicitudin. Donec a ex venenatis, suscipit dui vel, pellentesque elit. Donec euismod ipsum diam, nec congue nisi dignissim at. Donec fermentum mi eu ligula ornare maximus. Curabitur et interdum dolor, id scelerisque augue. Curabitur varius est dolor, ac commodo urna ultrices vel. Etiam mattis imperdiet ex non vehicula. Integer nibh ex, finibus quis felis et, accumsan fringilla tellus.

  Aliquam fringilla orci quis velit eleifend placerat. Cras vehicula, dolor et sagittis ullamcorper, purus lorem pulvinar velit, eu malesuada nunc nibh nec nibh. Duis augue lorem, lacinia in lacinia eu, lobortis lobortis lorem. Quisque euismod fermentum elit, a feugiat arcu commodo semper. Vivamus nec condimentum turpis. Maecenas lacinia, elit at fringilla gravida, magna eros fringilla mi, vel vulputate mauris erat in velit. Aenean ullamcorper pretium justo, sit amet molestie ipsum.

  Donec quis urna ac metus scelerisque eleifend. Aenean ac turpis at nibh tempor imperdiet non in sapien. Mauris facilisis maximus mollis. Nulla quis odio sit amet arcu aliquam gravida id a arcu. Phasellus quis mollis nulla. Pellentesque quis sem nec turpis varius tincidunt nec id odio. Cras consectetur, lorem lobortis luctus commodo, est mauris pulvinar metus, vel scelerisque neque massa et sem. Phasellus lacus erat, rhoncus nec interdum non, accumsan sed libero.

    </div>
  </div>
</div>                                            
              
            
!

CSS

              
                html, body
{
  /* remove height and width to fix */
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.pageContainer
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #cccccc;
}

.overlayWrapper
{
  position: fixed;
  z-index: 4;
}

.overlay
{
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 20px;
  left: 0px;
  background-color: rgba(0,0,0,0.5);
  opacity: 1;
  transform: translate3d(0,0,0);
}
.content
{
  height: calc(100% - 56px);
}
.dropdown
{
  position: relative;
  height: 56px;
  width: 100%;
  z-index: 0;
  transition: z-index 0.5s cubic-bezier(1, 0, 1, 0);
}

.dropdown.open
{
  z-index: 5;
  transition: z-index 0.5s cubic-bezier(1, 0, 1, 0);
}

.selected
{
  position: relative;
  height: 56px;
  width: 100%;
  background-color: #fffbd6;
  margin-bottom: 1px;
}

.options
{
  position: relative;
  width: 100%;
  max-height: 196px;
  transform-origin: 50% 0%;
  transform: scale3d(1,1,1);
  z-index: 5;
  opacity: 1;
  transition: all 0.5s;
}

.options.ng-hide
{
  transform: scale3d(1,0,1);
  opacity: 0;
}

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

.options li
{
  height: 56px;
  width: 100%;
  background-color: #fffbd6;
  position: relative;
  
}
.scrollable
{
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.contentWrapper {
  position: relative;
  display: block;
  width: 100%;
  height: calc(100% - 72px);
  float: left;
}
              
            
!

JS

              
                angular.module('app', ['ngAnimate'])
.controller('appCtrl', function()
{
	this.showDropdown = true;
  
  this.toggleDropdown = function()
  {
  	this.showDropdown = !this.showDropdown;
    console.log('toggle');
  }
  
  this.reload = function()
  {
    window.location.reload(true);
  }
});
              
            
!
999px

Console