Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

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.

            
              <body>
  <navigation class="nav">
    <a href="#" class="nav-logo"><img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png" alt="" /></a>
    <div class="nav-links">
      <section id="personal-section" class="nav-section">
        <a href="#personal-dropdown" id="personal-header" class="nav-link-header">personal<span class="arrow down-arrow"></span></a>
        <section id="personal-dropdown" class="nav-section-dropdown">
          <a href="#personal-dropdown" class="escape"><span class="hairline"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#" class="personal-links">Getting Started
                  <p>How to use PayPal</p>
                </a>
            </li>
            <li>
              <a href="#" class="personal-links">PayPal Credit <p>Get more time to pay</p></a>
            </li>
            <li>
              <a href="#" class="personal-links">eBay Payments <p>Speed through checkout on eBay</p></a>
            </li>
            <li>
              <a href="#" class="personal-links">Check Out Securely Online <p>Use your credit cards or other funds</p></a>
            </li>
            <li>
              <a href="#" class="personal-links">Mobile Wallet <p>Pay in stored with our app</p></a>
            </li>
            <li>
              <a href="#" class="personal-links">Shopping and More <p>Deals, gift cards and donations</p></a>
            </li>
          </ul>
        </section>
      </section>
      <section id="business-section" class="nav-section">
        <a href="#business-dropdown" id="business-header" class="nav-link-header">business<span class="arrow down-arrow"></span></a>
        <section id="business-dropdown" class="nav-section-dropdown">
          <a href="#business-dropdown" class="escape"><span class="hairline"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#" class="business-links">All Business Solutions <p>Merchant services, invoicing and products</p></a>
            </li>
            <li>
              <a href="#" class="business-links">Credit Card Processing <p>Accept debit and credit cards</p></a>
            </li>
            <li>
              <a href="#" class="business-links">Add PayPal to Youer Checkout <p>Add the button and accept cards online</p></a>
            </li>
            <li>
              <a href="#" class="business-links">Borrow for Your Business <p>Affordable business loans</p></a>
            </li>
            <li>
              <a href="#" class="business-links">Mobile Card Reader <p>Use with your phone or tablet on the go</p></a>
            </li>
            <li>
              <a href="#" class="business-links">Point of Sale Solutions <p>Get paid in your store</p></a>
            </li>
          </ul>
        </section>
      </section>
      <section id="send-section" class="nav-section">
        <a href="#" id="send-header" class="nav-link-header">send</a>
      </section>
      <section id="request-section" class="nav-section">
        <a href="#" id="request-header" class="nav-link-header">request</a>
      </section>
    </div>
    <div class="nav-buttons">
      <button id="login" class="nav-button">Log In</button>
      <button id="signup" class="nav-button">Sign Up</button>
    </div>
    <div class="nav-seperator-bar">
    </div>
  </navigation>
  <img id="hero-img" class="hero" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/554560/fashion-woman-shoes-get-ready.jpeg">
</body>
            
          
!
            
              $bluebackground: radial-gradient(circle, #44b5ff 10%, #0051ba);
body {
  background-color: #000;
  color: #fff;
  width: 1200px;
  height: 100%;
  margin: 0;
  font-family: "pp-sans-small-regular", Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
}

.hero {
  position: relative;
  width: 1200px;
  margin: 0;
  z-index: -1;
  top: 0px;
  transition: all 0ms linear 0s;
}

.hero-down {
  top: 230px;
  transition: all 200ms linear 0s;
}

.nav {
  position: absolute;
  background: rgba(0, 0, 0, .2);
  width: 1200px;
  height: 65px;
  padding: 0px 0px;
  color: #fff;
  margin: 0;
  background: rgba(0, 0, 0, .2);
}

.nav-background {
  background: $bluebackground;
  transition: background 200ms linear .5s;
}

.nav-logo {
  position: relative;
  display: inline-block;
  left: 75px;
  top: -7px;
  width: 150px;
  padding: 0px 0px;
  z-index: 3;
}

.nav-logo img {
  width: 125px;
  height: 32px;
  padding: 7px 7px;
  border: 1px solid transparent;
  &:active {
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 5px;
    outline: none;
    box-shadow: 0 0 2px #fff;
  }
}

.nav-links {
  position: relative;
  left: 0;
  top: -8px;
  padding: 0px 40px;
  display: inline-block;
  margin: auto;
  width: 550px;
}

.nav-link-header {
  color: #fff;
  position: relative;
  float: left;
  top: 12px;
  left: 175px;
  padding: 17px 17px;
  margin: 5px;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
  z-index: 2;
  &:hover {
    border-bottom: 3px solid #fff;
  }
}

.underline {
  border-bottom: 3px solid #fff;
}

span {
  opacity: 0.75;
  content: "";
  display: inline-block;
  position: relative;
  left: 6px;
  top: -4px;
  width: 9px;
  height: 9px;
  overflow: hidden;
  border: 1px solid #fff;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  box-sizing: border-box;
}

.down-arrow {
  transform: rotate(45deg);
  transition: transform 300ms linear;
}

.up-arrow {
  transform: rotate(-135deg);
  transition: transform 300ms linear;
  top: 2px;
}

.nav-buttons {
  display: inline-block;
  position: relative;
  top: -30px;
  left: 150px;
  width: 200px;
  margin: auto;
  padding: 30px 0px;
}

.nav-button {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 10px 19px;
  font-weight: bold;
  font-size: .7rem;
  text-decoration: none;
  &:active {
    text-decoration: underline;
  }
  &:focus{
    outline: 0;
  }
}

#login {
  color: #fff;
  margin-right: 5px;
  background-color: transparent;
}

#signup {
  background-color: #fff;
}

.nav-seperator-bar {
  position: absolute;
  top: 64px;
  left: 0px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  width: 1230px;
  margin: 0;
}

.nav-section-dropdown {
  position: absolute;
  text-wrap: wrap;
  width: 1200px;
  height: 0px;
  overflow-y:hidden;
  transition: all 200ms linear;
  left: -154px;
  top: 72px;
  margin: 0;
  background: $bluebackground;
}

.slideDown {
  height: 180px;
  transition: all 200ms linear; 

}

.remove {
  display: none;
}

.dropdown .dropdown-menu {
  width: 95%;
  list-style-type: none;
  margin: 0 auto;
}

.dropdown-menu li {
  display: inline-block;
  width: 30%;
  padding: 10px;
}

.personal-links,
.business-links,
.send-links {
  text-decoration: none;
  color: #fff;
  line-height: 0;
  padding: 0;
  margin: 0;
  &:hover {
    text-decoration: underline;
  }
}

.personal-links p {
  font-size: 10px;
}

.business-links p {
  font-size: 10px;
}


.escape {
  position: absolute;
  left: 1090px;
  top: 25px;
  padding: 1px 3px;
  z-index: 1;
  &:active {
    border: 1px solid #fff;
    border-radius: 5px;
  }
}

.hairline {
  position: relative;
  display: inline-block;
  top: 3px;
  left: -1px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border: none;
  &::before,
  &::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: rgba(255, 255, 255, .8);
  }
  &::before {
    transform: rotate(45deg);
  }
  &::after {
    transform: rotate(-45deg);
  }
}
            
          
!
            
              $(".nav-link-header").click(function(e) {
  e.preventDefault();
  var target = e.target;
  var link = $(target).attr("href");
  var arrow = $(".arrow");

  //spins arrows
  if ($(target).find(arrow).hasClass("down-arrow") && ($(target).hasClass("slideDown") === false)) {
    //turns arrow back down when hitting a different nav button
    $(arrow).removeClass("up-arrow").addClass("down-arrow");
    //turns arrow up when hitting nav button next to arrow
    $(target).find(arrow).removeClass("down-arrow").addClass("up-arrow");
  } else {
    $(target).find(arrow).removeClass("up-arrow").addClass("down-arrow");
  }

  //removes underline when hitting a different menu item
  $(".nav-link-header").removeClass("underline");
  //keeps underline under focused link
  $(target).addClass("underline");

  //displays dropdowns  
  if ($(link).hasClass("slideDown") === false) {

    //makes all dropdowns disappear when another menu item is clicked  
    $(".hero").removeClass("hero-down");
    $(".nav-section-dropdown").addClass("remove").removeClass("slideDown");
    //displays menu item dropdown when menu item is clicked
    $(".hero").addClass("hero-down");
    $(link).removeClass("remove").addClass("slideDown");
    $(".nav").addClass("nav-background");
  } else {
    //toggles menu item dropdown
    $(".hero").removeClass("hero-down");
    $(link).removeClass("slideDown");
    setTimeout(function() {
      $(".nav").removeClass("nav-background");
    }, 225);

  }

  $("#hero-img").toggleClass(".hero-down");
});

//dropdown close button
$(".escape").click(function(e) {
  e.preventDefault();
  var target = e.target;
  var link = $(target).parent().attr("href");
  $(".hero").removeClass("hero-down");
  $(".arrow").removeClass("up-arrow").addClass("down-arrow");
  $(link).removeClass("slideDown");
  setTimeout(function() {
    $(".nav").removeClass("nav-background");
  }, 225);

});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console