cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              main
  header
    h1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dolorem aliquam a, quas dicta incidunt alias optio qui sed sint.
  article
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit consectetur praesentium itaque, deleniti qui quia aut eaque minus id! Fuga laboriosam tempora repellendus <a href="#">veritatis</a> ab natus libero in neque culpa dolorem nobis perspiciatis, cum dolores similique ducimus minima reiciendis veniam sunt fugit quas voluptate? Saepe asperiores dicta possimus, fugit omnis consectetur tempore ab, recusandae sunt non expedita facere delectus deleniti suscipit! Nisi quae blanditiis, dignissimos nihil at ut aperiam inventore ratione neque doloremque? Quos quisquam aut quas vero labore obcaecati, iure doloribus accusamus beatae perferendis nostrum soluta est quidem eligendi sint dolore hic quod illo rerum molestias recusandae nam. Dolorem repellendus exercitationem, similique possimus aliquam, dolorum odit reiciendis! Nulla sint et neque nostrum minima quidem pariatur facere aspernatur explicabo delectus quibusdam eos esse, eius. Quod corporis repellat, distinctio eum quisquam, deleniti consequatur nisi similique placeat illo optio tempore, nostrum. Sapiente blanditiis id praesentium, repellendus quas sint minus eum esse similique dignissimos, assumenda repudiandae nostrum, magni illo voluptates vel placeat dolor error aspernatur ea minima debitis, consequuntur ducimus commodi. Omnis maiores placeat suscipit quae aut, neque quas veniam, libero tenetur dicta. Fuga adipisci ullam officiis voluptatibus dolorem saepe enim sed nostrum ad explicabo, inventore, itaque laboriosam qui ab. Tempore rem debitis dolorum nulla inventore sed, esse voluptate illum tempora quibusdam velit optio atque eos illo perferendis ab veniam. Cupiditate, dolorem fugiat nihil ex itaque esse magnam aperiam asperiores dicta! Quos dolore odio praesentium iste odit blanditiis fugiat eveniet est ipsa totam aspernatur enim, voluptatibus sunt nihil. Omnis sit perferendis velit vitae ipsum tenetur asperiores ab similique cupiditate facere ipsam in optio magni earum eaque alias quasi illo tempore voluptate, vel ut. Iusto porro quia dicta ratione nulla voluptate dolorem aspernatur similique doloribus omnis consectetur voluptatibus, voluptatum officia architecto, quae. Saepe dicta et ab a magnam adipisci nostrum perspiciatis dolore autem cupiditate doloribus consequatur itaque, harum porro assumenda sit animi rem consectetur aperiam, earum excepturi officia fuga. Inventore provident voluptatem facilis repudiandae nulla delectus quisquam, in laudantium modi et eius explicabo laborum placeat ad, totam odit neque. Consequuntur accusantium consectetur, voluptate amet magnam minus dolorum eos, fugit, nulla, maxime unde porro in expedita. Cumque reiciendis, vitae omnis tempore magnam inventore, exercitationem enim sequi sapiente est, praesentium explicabo aperiam quasi ea quidem impedit iste. Modi vitae magni quaerat magnam animi adipisci eveniet facere, laboriosam vel, odit, incidunt eligendi quibusdam quidem veniam aspernatur possimus tenetur deleniti eum culpa porro nemo dolore minus quia tempore. Vero laudantium fugiat quia amet. Nostrum aperiam ex repellat porro harum rem delectus pariatur vel quaerat tempora recusandae labore beatae excepturi architecto laudantium soluta, esse veniam, eveniet voluptatum natus facilis aut? Hic dicta atque, debitis nemo, vitae voluptatem accusantium consectetur esse sequi ullam numquam asperiores eaque? Facilis sed illum eligendi molestias fuga id porro quod vel et, assumenda aperiam delectus obcaecati hic, sint. Dolor, velit, numquam consequuntur qui quae, similique, ut quis harum aut vel rem! Dolorem excepturi tempore, quidem debitis vero temporibus perspiciatis vel, dicta quisquam neque distinctio, porro ipsum natus deleniti atque! Eius pariatur libero dignissimos nihil sunt nulla ratione odit soluta velit ipsum fugiat maxime esse possimus officia, temporibus quidem quasi quam aspernatur neque, officiis facilis eaque eligendi tenetur. Omnis vitae aliquid inventore odio, consectetur aut autem aspernatur porro. Quam asperiores, tenetur, ab, error nostrum, aut ipsa doloribus aliquid repellendus cum est quos modi neque sunt nesciunt eligendi a molestias ducimus itaque distinctio expedita voluptatibus. Vitae provident, nisi eum ipsam labore nulla distinctio sit inventore qui animi sunt fugiat quos saepe, reiciendis corporis, blanditiis natus beatae repellat. Magni explicabo quae nulla rerum blanditiis laboriosam ullam enim porro dolore earum ab, totam saepe. Quod repellendus et expedita dolorem voluptatibus laudantium commodi distinctio cum quam autem, blanditiis! Omnis commodi recusandae maxime, tempore iusto, voluptatem nam cum quas ipsa voluptatum quos quam impedit quaerat corrupti dolorum quae quisquam eligendi dolorem incidunt mollitia officia libero! Hic consequatur modi culpa nisi eligendi enim quod harum, facilis est impedit repellendus tenetur, delectus beatae quis sit magni rerum nam voluptates ea. Quidem quae sint, dolores doloremque doloribus quod atque. Tempore accusamus sint perferendis esse rem suscipit dolores pariatur rerum sunt beatae incidunt consequatur eaque dignissimos quasi excepturi aliquam reiciendis nihil temporibus officiis autem a magnam hic consequuntur labore, minus. Maiores unde molestiae sunt veniam saepe mollitia, ipsum assumenda laboriosam, atque quasi fugit accusantium voluptate a! Laborum recusandae unde incidunt enim eligendi dicta odit, aut quasi, perspiciatis et maxime, voluptatum non eos porro. Fugiat quos nisi facilis ratione obcaecati accusamus veniam minus odit, libero aperiam delectus laborum temporibus sequi, eos aliquam similique debitis autem laudantium. Laboriosam perferendis nulla reprehenderit iure ipsam delectus, eaque dolores voluptates neque autem, adipisci. Cumque cupiditate eligendi labore, incidunt, nobis veniam sunt beatae sapiente dolore iusto voluptas tenetur reiciendis, eius natus. Voluptas sed magni, eveniet natus cumque sunt modi maiores molestias animi, recusandae officia dolores minima asperiores distinctio cupiditate, eum nam architecto sit harum tempora optio minus nulla accusantium! Odit illo atque non voluptatum reiciendis aperiam dolore repellat autem quos. Ipsam magnam vitae quaerat blanditiis ex nisi eos distinctio minima aliquam et officia ratione, magni laborum, similique earum reprehenderit molestias commodi sapiente optio reiciendis. Sunt facere vitae, consequatur repudiandae perferendis vero autem! Quas laudantium omnis aut vel voluptas neque autem. A, tenetur, expedita! Nesciunt rerum reprehenderit recusandae magnam suscipit labore nobis ea iure iste ipsam, tempora accusantium molestiae tempore eligendi aspernatur, excepturi illo quis pariatur. Voluptas incidunt inventore, quas magnam impedit accusamus dolorem soluta architecto animi repellendus molestiae, saepe fugit facere quibusdam nisi! Dolorem quisquam accusantium tempore asperiores delectus atque tempora voluptatibus veritatis, doloremque ullam dignissimos dolores perferendis debitis ut aliquam ipsa repudiandae facere ipsum, saepe maiores voluptatum, mollitia necessitatibus cum temporibus? Incidunt necessitatibus suscipit beatae fuga asperiores neque, odio esse, praesentium voluptatem sapiente repudiandae assumenda dolores dicta sunt recusandae, porro pariatur ea provident velit aspernatur a quidem harum architecto! Enim accusamus veniam non reprehenderit reiciendis, id quod, quaerat molestiae labore at sapiente rerum facilis dolor nihil dicta neque doloremque cum! Amet voluptatibus nihil eligendi quae, ipsum dolorem, perspiciatis molestias, veniam repudiandae numquam deserunt optio? Consequuntur culpa accusamus sint tempora adipisci.

.nav-trigger 
  //- p.nav-open <i class="zmdi zmdi-menu"></i>
  p.nav-close.hide <i class="zmdi zmdi-close"></i>
section.navigation
  .navigation-inner
    nav.nav-wrapper
      h1 <i class="zmdi zmdi-map"></i> Explore
      h2 Pages
      ul.pages-wrapper
        li
          a(href="page1") About
          p Learn more about what we do, why we do it, and our team
        li
          a(href="page1") Services
          p We do more than design pretty sites! Read about all the services we offer.
        li
          a(href="page1") Pricing
          p Curious about how much it will cost? We break it all down for you.
        li
          a(href="page1") Contact
          p Ready to get started or have a question? We're happy to talk to you!
      h2 FAQ
      .button-wrapper
        button How much do you charge?
        button How long does it take to create a website?
        button What are some sites you've created before?
        button How long have you been making websites?
        button Who actually makes the websites?
        button Do you take credit cards?
        
        
.border-nav-trigger
            
          
!
            
              *
  box-sizing: border-box

p,
a,
button
  font-family: 'Source Sans Pro', sans-serif
  
h1,
h2,
h3,
h4
  font-family: 'Montserrat', sans-serif
  
main
  margin-right: 5vw
  
article
  p
    color: #666
    line-height: 1.5

.button-wrapper
  display: flex
  flex-wrap: wrap
  padding: 0 1rem

button
  background: #444
  color: white
  border: 1px solid #444
  padding: 1rem
  line-height: 1.5
  cursor: pointer
  flex: 0 1 45%
  margin: .5rem 1rem .5rem 0
  transition: background 200ms ease
  
  &:hover
    background: rgba(#444, 0.8)

.navigation
  position: fixed
  top: 0
  left: 100vw
  width: 100vw
  height: 100vh
  background: white
  box-shadow: 0px 0px 30px 0px rgba(black, 0.2)
  transition: left 300ms ease
  
.nav-out
  left: 0
  
@media (min-width: 1100px)
  .navigation
    width: 40vw
    height: 100vh
    
  .nav-out
    left: 60vw
    
.navigation-inner
  height: 90vh
  overflow-y: auto
    
@media (min-width: 1100px)
  .navigation-inner
    padding: 2rem
  
.nav-trigger
  position: fixed
  bottom: 0
  right: 0
  font-size: 2rem
  margin: 0
  cursor: pointer
  z-index: 100
  background: #444
  color: white
  
  p
    margin: 0
    padding: 5px 15px
  
.nav-wrapper
  h1
    margin: 0
    text-align: center
    font-size: .8rem
    font-weight: 400
    background: #444
    color: white
    padding: .5rem 0
    font-family: 'Open Sans Condensed', sans-serif
      
  i
    margin-right: .5rem
    
  h2
    padding: 0 1rem
    margin-top: 2rem

.pages-wrapper
  list-style: none
  padding: 0 1rem
  
  p,
  a
    font-size: .8rem
  
  a
    text-decoration: none
    text-transform: uppercase
    
  p
    margin: .5rem 0 1rem
    
  li
    margin-top: 1.5rem
    
.hide
  display: none

.border-nav-trigger
  position: fixed
  width: 0
  height: 100vh
  top: 0
  right: 0
  border-left: 5vw solid #f9f9f9
  margin: 0
  padding: 0
  z-index: 50
  
.hide-border-color
  border-left: 5vw solid transparent
            
          
!
            
              // traditional menu toggle button

$('.nav-open').on('click', function() {
  $(this).addClass('hide');
  $('.nav-close').removeClass('hide');
  $('.navigation').addClass('nav-out');
});

// unconventional hidden nav on right side of viewport

$('.border-nav-trigger').on('click', function() {
  $(this).addClass('hide-border-color');
  $('.navigation').addClass('nav-out');
  $('.nav-close').removeClass('hide');
});

// close menu on nav close click

$('.nav-close').on('click', function() {
  $(this).addClass('hide');
  $('.nav-open').removeClass('hide');
  $('.navigation').removeClass('nav-out');
  setTimeout(function() {
    $('.border-nav-trigger').removeClass('hide-border-color');
  }, 350);
});


            
          
!
999px
Loading ..................

Console