Awesome Nav

Awesome Nav.markdown

Awesome Nav ('-' * 11) Based off of http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/#

Was looking to recreate it best of my ability, (so close, yet so far away :()

A Pen by Ryan Trimble on CodePen.

License.

index.html

<nav>
  <ul>
    <li>
      <a href="home">
        <span class="vertical-align"><i class="fa fa-home"></i>Home</span>
      </a>
    </li>
    <li>
      <a href="services"><span class="vertical-align"><i class="fa fa-flask"></i>Services</span></a>
    </li>
    <li>
      <a href="portfolio"><span class="vertical-align"><i class="fa fa-paint-brush"></i>Portfolio</span></a>
    </li>
    <li>
      <a href="blog"><span class="vertical-align"><i class="fa fa-bookmark"></i>Blog</span></a>
    </li>
    <li>
      <a href="contact"><span class="vertical-align"><i class="fa  fa-envelope"></i>Contact</span></a>
    </li>
  </ul>
</nav>

style.css

/*********************
IMPORTS
*********************/
@import "bourbon";
@import "neat";
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);

/*********************
MIXINS
*********************/
@mixin col-with-gutter( $cols, $gutter ){
    @include span-columns($cols);
    margin-right: $gutter;
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/*********************
VARIABLES
*********************/
$home-color: rgb(208, 101, 3);
$services-color: rgb(233, 147, 26);
$portfolio-color: rgb(22, 145, 190);
$blog-color: rgb(22, 107, 162);
$contact-color: rgb(27, 54, 71);

$link-text-color:#FFF;
$link-font-fam:'Lato', sans-serif;
$link-font-weight: 300;
$link-font-size: 1.5em;
$link-icon-size: 1em;

$mobile-link-height:60px;
  


$mobile-breakpoint:480px;
$tablet-breakpoint:700px;


body{
  background: #333;
}

  nav{
    @include span-columns(12);
    @include clearfix;
    ul{
      padding:0;
      li{
        @include span-columns(12);
        a{
          @include span-columns(12);
          height:$mobile-link-height;
          text-align:left;
          color:$link-text-color;
          font-family: $link-font-fam;
          font-weight:$link-font-weight;
          font-size: $link-font-size;
          text-decoration:none;
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          transform-style: preserve-3d; 
          .vertical-align{
            @include vertical-align;
            top:20%;
            i{
              display:inline;
              font-size:$link-icon-size;
              height:auto;
              width:auto;
              background:none;
              position:relative;
              display:inline-block;
              margin:0 auto;
              padding-left:10px;
              width:50px;
              height:50px;
/*              background:blue;*/
            }
          }
        }
        a:hover{

        }
        
    a[href^="home"]{
      background:$home-color;
      border-left:10px solid darken($home-color, 10%);
      &:hover{
        border-bottom:0px;
        
      }
    }
    a[href^="services"]{
      background:$services-color;
      border-left:10px solid darken($services-color, 10%);
      &:hover{
        border-bottom:0px;
      }
    }
    a[href^="portfolio"]{
      background:$portfolio-color;
      border-left:10px solid darken($portfolio-color, 10%);
      &:hover{
        border-bottom:0px;
      }
    }
    a[href^="blog"]{
      background:$blog-color;
      border-left:10px solid darken($blog-color, 10%);
      &:hover{
        border-bottom:0px;
      }
    }
    a[href^="contact"]{
      background:$contact-color;
      border-left:10px solid darken($contact-color, 10%);
      &:hover{
        border-bottom:0px;
      }
    }
  }
 }
}

@media screen and (min-width:$mobile-breakpoint){
  nav{
    @include outer-container(100%);
    ul{
      li{
        width:50%;
        padding:0;
        margin:0;
        border:none;
        display:inline-block;
        float:left;
        &:last-child{
          width:100%;
         
        }

        a{
          height:150px;
          border-left:none !important;
          text-align:center;
          .vertical-align{
            top:50%;      
            i{
              display:block;
              margin:0 auto;
              margin-top:10px;
              margin-bottom:20px;
              font-size:1.7em;
              padding:20px;
              background:hsla(255,255,255,0.1);
              border-radius:50%;
              height:80px;
              width:80px;
              transition:background 0.25s ease-in-out;
            }            
          }
                &:hover{
        height:150px;
        i{
           background:hsla(255,255,255,0.3);
           height:80px;
            width:80px;
          font-size:1.7em;
          }
                }
        }
      }
    }
  }
}

@media screen and (min-width:$tablet-breakpoint){
  nav{
    ul{
      li{
        
        @include span-columns(2);
        @include omega;
        &:last-child{
          @include span-columns(2);
        }
        a{
          height:200px;
          &:hover{
            height:220px;
          }
          transition: height 0.5s;  
        }
        a[href^="home"]{
      background:$home-color;
      &:hover{
        border-bottom:5px solid darken($home-color, 10%);
      }
    }
    a[href^="services"]{
      background:$services-color;
      &:hover{
        border-bottom:5px solid darken($services-color, 10%);
      }
    }
    a[href^="portfolio"]{
      background:$portfolio-color;
      &:hover{
        border-bottom:5px solid darken($portfolio-color, 10%);
      }
    }
    a[href^="blog"]{
      background:$blog-color;
      &:hover{
        border-bottom:5px solid darken($blog-color, 10%);
      }
    }
    a[href^="contact"]{
      background:$contact-color;
      &:hover{
        border-bottom:5px solid darken($contact-color, 10%);
      }
    }
      }
    }
  }
}