<nav class="menu">
  <input id="menu__button" type="checkbox" checked />
  <a class="menu__item" href="#">Home</a>
  <a class="menu__item" href="#">About</a>
  <a class="menu__item" href="#">Contact</a>
  <a class="menu__item" href="#">Help</a>
  <label class="menu__close" for="menu__button"></label>
</nav>
<h1>Triangular mobile navigation</h1>

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css")
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);

/*------------------------------------*\
  VARIABLES
\*------------------------------------*/

$darkGray = #2e2e2e

$itemColors = #67E89B, #5FD992, #58C988, #52BA7D, #459C69

$baseSize = 4.8rem
$itemCount = 4


/*------------------------------------*\
  BASE STYLES
\*------------------------------------*/

*,
*::before,
*::after
  box-sizing border-box
  outline none

body
  position relative
  display flex
  justify-content center
  background-color $darkGray
  font-family Lato, Arial, sans-serif
  
h1
  font-size 3rem
  font-weight 300
  margin 5rem 0
  color white

a
  text-decoration none
  color white

input[type=checkbox]
    position absolute
    top -9999px
    left -9999px


/*------------------------------------*\
  MENU
\*------------------------------------*/
  
.menu
  position absolute
  left 0
  top 0
  display flex
  flex-direction column
  align-items flex-start


/*------------------------------------*\
  MENU ITEM
\*------------------------------------*/

.menu__item
  position relative
  display flex
  justify-content center
  font-size 1.4rem
  font-weight 300
  padding 0.5rem
  transform translateX(calc(-100% -\ 2.4rem))
  transition background-color 0.2s
  for index in 1..$itemCount
    &:nth-child({index + 1})
      $tmp = $itemCount - index
      $dec = index - 1
      $currentColor = $itemColors[$dec]
      width ($baseSize+($tmp*2.4rem))
      background-color $currentColor

      &::after
        position absolute
        content ""
        width 0
        height 0
        left 100%
        top 0
        border 1.2rem solid $currentColor
        border-right 1.2rem solid transparent
        border-bottom 1.2rem solid transparent
        transition border 0.2s

      &:hover
        background-color darken($currentColor, 20%)

      &:hover::after
        border 1.2rem solid darken($currentColor, 20%)
        border-right 1.2rem solid transparent
        border-bottom 1.2rem solid transparent


/*------------------------------------*\
  MENU CLOSE
\*------------------------------------*/

.menu__close
  position relative
  font-family FontAwesome
  font-size 1.2rem
  color white
  width 2*($baseSize - 2.4rem)
  height 2*($baseSize - 2.4rem)
  cursor pointer
  transform translateX(-100%)

  &::before
    position absolute
    content ""
    top 0.9rem
    left 0.9rem
    z-index 1

  &::after
    position absolute
    content ""
    width 0
    height 0
    border ($baseSize - 2.4rem) solid $itemColors[-1]
    border-right ($baseSize - 2.4rem) solid transparent
    border-bottom ($baseSize - 2.4rem) solid transparent
    transition border 0.2s

  &:hover::after
    border ($baseSize - 2.4rem) solid darken($itemColors[-1], 20%)
    border-right ($baseSize - 2.4rem) solid transparent
    border-bottom ($baseSize - 2.4rem) solid transparent

input[type=checkbox]:checked ~ .menu__item
  for index in 1..$itemCount
    &:nth-child({index + 1})
      transition transform 0.2s ($itemCount - index)*0.1s, background-color 0.2s
      transform translateX(calc(-100% -\ 2.4rem)) !important

input[type=checkbox]:checked ~ .menu__close
  transition transform 0.2s ($itemCount - 1)*0.1s, background-color 0.2s
  transform translateY($itemCount*(-2.4rem)) !important

  &::before
    content ""

input[type=checkbox]:not(:checked) ~ .menu__item
  for index in 1..$itemCount
    &:nth-child({index + 1})
      transition transform 0.2s (index)*0.1s, background-color 0.2s
      transform translateX(0) !important

input[type=checkbox]:not(:checked) ~ .menu__close
  transition transform 0.2s 0.1s, background-color 0.2s
  transform translateY(0) !important