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.nav
  %div.nav__title
    Sliding secondary navigation with CSS
  %span.nav__item
    Beverages
    %div.dropdown
      %span.dropdown__column
        %h1.dropdown__title
          Our Coffees
        %a.dropdown__link
          Whole Bean Coffee
        %a.dropdown__link
          Ground Coffee
        %a.dropdown__link
          Starbucks VIA®
        %a.dropdown__link
          K-Cup® Packs
        %a.dropdown__link
          Verismo™ System Pods
        %a.dropdown__link
          Portion Packs
        %a.dropdown__link
          View All Coffees
      %span.dropdown__column
        %h1.dropdown__title
          Find Your Perfect Coffee
        %a.dropdown__link
          Starbucks Reserve® Roastery & Tasting Room
        %a.dropdown__link
          Starbucks Reserve® Coffees
        %a.dropdown__link
          Starbucks Reserve® Roastery Subscriptions
      %span.dropdown__column
        %h1.dropdown__title
          Espresso Beverages
        %a.dropdown__link
          Doppio
        %a.dropdown__link
          Americano
        %a.dropdown__link
          Espresso Macchiato
        %a.dropdown__link
          Flat White
        %a.dropdown__link
          Cappuccino
        %a.dropdown__link
          Latte
        %a.dropdown__link
          Caramel Macchiato
        %a.dropdown__link
          Mocha
      %span.dropdown__column
        %h1.dropdown__title
          How to Brew Great Coffee
        %a.dropdown__link
          Coffee Press
        %a.dropdown__link
          Pour-Over
        %a.dropdown__link
          Iced Pour-Over
        %a.dropdown__link
          Coffee Brewer
        %a.dropdown__link
          Verismo® System

      %span.dropdown__column
        %h1.dropdown__title
          Ethical Sourcing
        %a.dropdown__link
          Coffee
        %a.dropdown__link
          Farming Communities
        %a.dropdown__link
          Learn More
        %a.dropdown__link
          Starbucks At Home
        %a.dropdown__link
          Learn About the Starbucks Roast
        %a.dropdown__link
          Learn About Coffee Forms
        %a.dropdown__link
          Flavors in Your Cup
        %a.dropdown__link
          The Clover® Brewing System
        %a.dropdown__link
          My Starbucks Idea
        %a.dropdown__link
          Coffee FAQs
  %span.nav__item
    Food
    %div.dropdown
      %span.dropdown__column
        %h1.dropdown__title
          Bakery
        %a.dropdown__link
          Starbucks Petites
        %a.dropdown__link
          Bistro Boxes
        %a.dropdown__link
          Hot Breakfast
        %a.dropdown__link
          Sandwiches, Paninis & Salads
        %a.dropdown__link
          Yogurt and Fruit
        %a.dropdown__link
          La Boulange
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);

// variables
$dropdown-bg: #fffd13;
$dropdown-text-color: #1a1a1a;
$padding: 1rem;

// main styles

body {
  background: adjust-hue( $dropdown-bg, 100% );
  font-family: 'Raleway', sans-serif;
}

.nav {
  background: white;
  display: flex;
  padding-left: $padding;
  padding-right: $padding;
  z-index: 100;

  &__title {
    flex: 1;
    font-weight: 800;
    padding: $padding 0;
  }

  &__item {
    font-weight: 200;
    padding: $padding;

    // chevrons
    &::after {
      border-style: solid;
      border-width: 0.19em 0.19em 0 0;
      content: '';
      display: inline-block;
      height: 0.25em;
      left: 0.25em;
      position: relative;
      top: 0.19em;
      transform: rotate(135deg);
      vertical-align: top;
      width: 0.25em;
    }

    &:hover {
      background: $dropdown-bg;
      color: $dropdown-text-color;

      .dropdown {
        transform: translateY(0); // nav slides down
      }
    }
  }
}

.dropdown {
  background: $dropdown-bg;
  color: $dropdown-text-color;
  display: flex;
  left: 0;
  padding: $padding;
  position: absolute;
  right: 0;
  top: 48px;
  transform: translateY(-100%); // nav is hidden above the viewport
  transition: 0.25s;
  z-index: -1;

  &__column {
    margin-right: 4rem;
  }

  &__title {
    color: #422400;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  &__link {
    cursor: pointer;
    display: block;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 5px;
    transition: 0.25s;

    &::after { // animated line on hover
      background: #553600;
      content:'';
      display: block;
      height: 1px;
      transform: translateY(-2px);
      transition: 0.25s;
      width: 0;
    }

    &:hover::after {
      width: 100%;
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console