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.

+ 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.

            
              <div class="page">
  
  <header class="head">
    <div class="brand">
      brand
    </div>
    <div class="navigation">
      <nav class="navigation__wrapper">
        <ul class="navigation__menu js-menu">
          <li>
            <a href="#" class="menu-item menu-item-1">
              Menu item 1
            </a>
          </li>  
          <li>
            <a href="#" class="menu-item menu-item-2">
              Menu item 2
            </a>
          </li>
          <li>
            <a href="#" class="menu-item menu-item-3">
              Menu item 3
            </a>
          </li>
          <li>
            <a href="#" class="menu-item menu-item-4">
              Menu item 4
            </a>
          </li>
          <li>
            <a href="#" class="menu-item  menu-item-5 menu-item--hide-desktop">
              Menu item 5
            </a>
          </li>
          <li>
            <a href="#" class="menu-item menu-item-6 menu-item--hide-desktop">
              Menu item 6
            </a>
          </li>
        </ul>
        <div class="navigation__primary-mobile">
          <ul class="navigation__menu-mobile">
            <li>
              <a href="#" class="menu-item menu-item--tile menu-item--one">Code</a>
            </li>
            <li>
              <a href="#" class="menu-item menu-item--tile menu-item--two">Blog</a>
            </li>
            <li>
              <a href="#" class="menu-item menu-item--tile menu-item--three">Tweet</a>
            </li>
            <li>
              <a href="#" class="menu-item menu-item--tile menu-item--four js-toggle">
                <i class="fa fa-th-large menu-icon"></i>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>
  
  <main class="content">
  <h1>Mobile-first navigation experiment with a focus on UX</h1>
  <p>Designed around a nice mobile experience, with ease of access to menus when used in a single hand.</p>
  <p>If you're viewing this in CodePen, try shrinking the page down to mobile size (&lt; 500px) and tap the  <i class="fa fa-th-large menu-icon"></i> icon to show the tile menu.</p>
  <p>I'm also using colour lists to style the tiles up a bit.</p>
  <p class="dummy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt nisl eget dictum ultrices. Vestibulum non ornare felis, at luctus nulla. Nam varius dolor eget risus interdum, dignissim sollicitudin leo tristique. Donec ornare accumsan eleifend. Maecenas eget faucibus nisl, ultrices blandit risus. Maecenas ullamcorper mi eu nisi posuere egestas. Vivamus ac fringilla lorem. Nulla ultricies varius laoreet. Praesent vel pretium magna, et blandit neque. Integer volutpat vulputate eros, a scelerisque velit sagittis non. Quisque venenatis neque urna, et auctor nisl laoreet iaculis. Curabitur a libero varius, maximus metus non, consectetur elit. In mollis diam velit, a ornare augue maximus ut. Nam vehicula purus quis fermentum ornare. Duis luctus, justo sed ullamcorper rhoncus, diam massa viverra purus, non luctus libero neque et turpis. Integer tempor porta neque, nec finibus ante.</p>

<p class="dummy">Quisque elementum eget metus a consequat. Etiam porta orci augue. Integer vitae tellus sit amet erat scelerisque porttitor eleifend bibendum neque. Donec vitae dapibus lacus. Mauris porttitor risus a elit vestibulum interdum. Proin vestibulum interdum elit, at consectetur lorem porta nec. Aenean mattis nulla ut ante fermentum vulputate. Integer sit amet odio eget dolor finibus pharetra. Quisque mollis felis vel ex tincidunt fermentum. Nam in leo dolor. Aenean ut condimentum ipsum.</p>

<p class="dummy">Sed sollicitudin ante eget metus lacinia, at convallis est elementum. Morbi aliquet a enim eu tempor. Curabitur feugiat feugiat augue, vel commodo ex feugiat non. Nunc vel luctus sem, id luctus lectus. Suspendisse molestie auctor orci vitae posuere. Aenean commodo dolor vitae magna blandit, ut blandit leo consectetur. Proin sit amet lacus ullamcorper, consequat purus vitae, sodales erat. Nullam lobortis consequat magna. Nullam porta sem enim, quis aliquet ligula dignissim in.</p>
  </main>
  
</div>
            
          
!
            
              // Mixing to make breakpoints a little easier. Can be expanded with any breakpoints as needed.
@mixin breakpoint($width) {
  @media (min-width: $width)  { @content ; }
}
@mixin breakpoint-max($width) {
  @media (max-width: $width)  { @content ; }
}

$font: 'PT Sans', sans-serif;

// Colors
$color-brand-bg: #000000;
$color-brand-fg: darken(#FFFFFF, 50%);
$color-nav-bg: darken(#FFFFFF, 10%);
$color-toggle-bg: #0000FF;
$color-toggle-fg: #FFFFFF;
$color-tile-bg: #000000;
$color-tile-fg: #FFFFFF;
$color-tile-expanded-bg: #189AE3;

$color-tile-bg-list:
  darken($color-tile-expanded-bg, 3%)
  darken($color-tile-expanded-bg, 6%)
  darken($color-tile-expanded-bg, 9%)
  darken($color-tile-expanded-bg, 12%)
  darken($color-tile-expanded-bg, 15%)
  darken($color-tile-expanded-bg, 18%)
  darken($color-tile-expanded-bg, 21%)
  darken($color-tile-expanded-bg, 24%);
$colors-tile-fg-list:
  darken($color-tile-expanded-bg, 23%)
  darken($color-tile-expanded-bg, 26%)
  darken($color-tile-expanded-bg, 29%)
  darken($color-tile-expanded-bg, 32%)
  darken($color-tile-expanded-bg, 35%)
  darken($color-tile-expanded-bg, 48%)
  darken($color-tile-expanded-bg, 41%)
  darken($color-tile-expanded-bg, 44%);

$breakpoint-small: 500px;

$brand-height: 50px;
$mobile-nav-height: 70px;

.page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background-color: darken(#FFFFFF, 5%);
}

.head {
  display: flex;
}

.brand {
  display: block;
  width: 100%;
  height: $brand-height;
  line-height: $brand-height;
  background-color: $color-brand-bg;
  color: $color-brand-fg;
  font-family: $font;
  font-size: 30px;
  text-align: center;
  
  @include breakpoint($breakpoint-small) {
    display: inline-block;
    position: relative;
    width: 150px;
  }
}

.navigation {
  position: fixed;
  bottom: 0;
  background-color: $color-nav-bg;
  z-index: 99;
  
  @include breakpoint-max($breakpoint-small) {
    left: 0;
    right: 0;
  }
  
  @include breakpoint($breakpoint-small) {
    display: inline-block;
    position: relative;
    height: $brand-height;
    width: 100%;
  }
  
  &__wrapper {
    position: relative;
  }
  
  &__menu-mobile {
    display: flex;
    flex-direction: row;
    
    @include breakpoint($breakpoint-small) {
      display: none;
    }
    
    li {
      width: 25%;
      text-align: center;
    }
  }
  
  &__menu {
    width: 100%;
    display: none;
    
    @include breakpoint($breakpoint-small) {
      text-align: right;
      display: block;
    }
    
    li {
       width: 50%;
      
      @include breakpoint($breakpoint-small) {
        display: inline-block;
        width: auto;
      }
    }
    
    &--show {
      display: flex;
      flex-wrap: wrap;
      
      // Reflow if at desktop
      @include breakpoint($breakpoint-small) {
        display: inline-block;
      }
    }
  }
  
  &__primary-mobile {
    height: $mobile-nav-height;
    
    @include breakpoint($breakpoint-small) {
      display: none;
    }
  } 

}

.menu-item {
  
  display: block;
  position: relative;
  padding: 0 6px;
  line-height: $brand-height;
  height: 120px;
  line-height: 120px;
  text-align: center;
  text-decoration: none;
  font-family: $font;

  @each $current-color in $colors-tile-fg-list {
    $i: index($colors-tile-fg-list, $current-color);
    &-#{$i} {
      color: $current-color;
      background-color: nth($color-tile-bg-list, $i);
      &:after {
        background-color: nth($color-tile-bg-list, $i);
      }
    }
  }

  
  @include breakpoint($breakpoint-small) {
    height: auto;
    line-height: $brand-height;
    background-color: transparent;
  }
  
  &:after {
    @include breakpoint($breakpoint-small) {
      display: block;
      margin-top: -4px;
      content: "";
      height: 4px;
      width: 100%;
    }
  }
  
  .menu-icon {
    font-size: 40px;
    vertical-align: middle;
  }
  
  &--tile {
    vertical-align: middle;  
    line-height: $mobile-nav-height;
    text-align: center;
    text-decoration: none;
    color: $color-tile-fg;
  }
  
  &--one {
    background-color: lighten($color-tile-bg, 45%);
  }
  
  &--two {
    background-color: lighten($color-tile-bg, 35%);
  }
 
  &--three {
    background-color: lighten($color-tile-bg, 15%)
  }
  
  &--four {
    background-color: $color-tile-bg;
  }
  
  // Hide from deskop (still shows as tiles)
  &--hide-desktop  {
    @include breakpoint($breakpoint-small) {
      display: none;
    }
  }
}

.content {
  padding: 0 40px;
}

h1, p {
  font-family: $font;
  line-height: 2;
}

h1 {
  margin: 30px 0 30px;
  font-size: 30px;
}

p {
  margin-bottom: 10px;
}

.dummy {
  color: darken($color-tile-expanded-bg, 12%);
}

body, html {
  height: 100%;
}
            
          
!
            
              $( function() {
  
  var $toggle = $(".js-toggle");
  var $menu = $(".js-menu");
  var $page = $(".page");
  
  $toggle.on("click", function(e) {
    e.preventDefault;
    $menu.toggleClass("navigation__menu--show");
  });
  
});
            
          
!
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.
Loading ..................

Console