%header.masthead
.brand-container
%a{:href => "#"}
%span.brand-initials Es
%span.brand-name Elemental Shift
%nav
.nav-container
%div
%input#slider1{:name => "slider1", :type => "checkbox"}/
%label.slide.has-child{:for => "slider1"}
%span.element Bg
%span.name Blog
.child-menu
%a{:href => "#"} Recent
%a{:href => "#"} Archives
%a{:href => "#"} Categories
%div
%a.slide{:href => "#"}
%span.element Po
%span.name Portfolio
%div
%input#slider2{:name => "slider2", :type => "checkbox"}/
%label.slide.has-child{:for => "slider2"}
%span.element Xp
%span.name Laboratory
.child-menu
%a{:href => "#"} PHP
%a{:href => "#"} Javascript
%a{:href => "#"} Css
%a{:href => "#"} Ruby
%a{:href => "#"} Python
%a{:href => "#"} Design
%div
%a.slide{:href => "#"}
%span.element Ab
%span.name About
%div
%a.slide{:href => "#"}
%span.element C
%span.name Contact
.social-container
%span
%a.social-roll.github{:href => "#"}
%span
%a.social-roll.twitter{:href => "#"}
%span
%a.social-roll.linkedin{:href => "#"}
%span
%a.social-roll.rss{:href => "#"}
@import compass
@function emCalc($pxWidth)
@return $pxWidth / 16 * 1em
@mixin breakpoint($break)
@if $break == small
@media only screen and (min-width: emCalc(769))
@content
a
text-decoration: none
$colors: #8cc63f, #ef3724, #ffa61a, #1ab1ff, #FC1DCF
nav
display: table
position: relative
table-layout: fixed
width: 100%
// hide and reset form elemetns for dropdowns
input
display: none
label
margin: 0
div.nav-container
display: table-row
& > div
display: table-cell
// loop through colors list and generate rules on a
// per color basis
@for $i from 1 through length($colors)
& > div:nth-of-type(#{length($colors)}n+#{$i})
// apply coloring to menu elements and nested links
& .slide, & a
border-color: nth($colors, $i)
&:hover
color: darken( nth($colors, $i), 20)
// set background color for child menus
& ~ .child-menu
background-color: lighten( nth($colors, $i), 10)
// set colors for color for active elements
& input:checked, .slide.active
& ~ label
color: nth($colors, $i)
// set base transition spees for all a and label elements in the menu
a, label
// all a elements
+transition-property(color)
+transition-duration(.2s)
+transition-timing-function(ease-in)
// base styling for the sliding elements
.slide
padding: 10px 10px
font-size: emCalc(16)
display: block
color: #393939
border-top: 4px solid transparent
position: relative
// a.slide elements change border width on mouse out
+transition-property(border-width, color)
+transition-duration(.1s, .2s)
+transition-timing-function(ease-in)
+transition-delay(.2s, 0s)
.element
font-size: emCalc(20)
font-weight: 600
font-style: normal
display: block
line-height: 1
.name
font-size: emCalc(11)
position: relative
.has-child .name:after
content: ""
width: 10px
height: 4px
background-image: url('http://www.elemental-shift.com/remote-assets/down-arrow.svg')
display: block
position: absolute
bottom: -9px
left: 1px
background-repeat: no-repeat
+transition-property(transform)
+transition-duration(.5s)
+transition-timing-function(ease-in)
+transform-origin(50%, 50%)
// child menu styling
.child-menu
display: block
position: absolute
max-height: 0
overflow: hidden
background-color: #393939
width: 100%
top: 65px
left: 0
z-index: 5000
// mouse out timing functions
+transition-property(max-height)
+transition-duration(.5s)
+transition-timing-function(ease-in)
a
color: white
display: inline-block
padding: 15px 30px 15px 10px
font-size: emCalc(15)
// hold open child menu when input is checked
input:checked ~ .child-menu
max-height: 100px
// mouse in time functions
+transition-property(max-height)
+transition-duration(.5s)
+transition-timing-function(ease-in)
input:checked ~ .has-child .name:after
+rotateX(180deg)
+breakpoint(small)
nav
display: block
table-layout: auto
div.nav-container
display: block
& > div
display: block
margin: 5px 0
&:hover .slide
border-left-width: 55px
// a.slide transition delay on hover
+transition-delay(0)
.slide
display: block
width: auto
border-left: solid 4px #393939
border-top: none
.element
line-height: 1
.child-menu
display: block
position: relative
top: 0
background-color: transparent !important
margin-left: 55px
width: auto
max-height: 0px
overflow: hidden
border-top: none
a
color: #393939
display: block
padding: 3px 0 3px 10px
font-size: emCalc(13)
input:checked ~ div.child-menu
max-height: 120px
input:checked ~ .slide
border-width: 55px
.masthead
font-family: "Open Sans", sans-serif
.brand-container
padding: 10px
background-color: #393939
a
color: white
display: inline-block
+transition-property(all)
+transition-duration(.2s)
+transition-timing-function(ease-in)
&:hover
color: #8cc63f
.brand-initials
font-size: emCalc(49)
font-weight: 700
font-style: normal
display: block
line-height: 42px
.brand-name
font-size: emCalc(13)
text-indent: 3px
display: block
+breakpoint(small)
.masthead
position: absolute
top: 0
left: 0
width: 150px
.brand-container
padding: 10px 0 50px 10px
a
display: block
# Pure Css responsive menu with dropdowns and
# transition effects
Also see: Tab Triggers