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.
<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> |
/********************* | |
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%); | |
} | |
} | |
} | |
} | |
} | |
} |