cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console