- @links = ['Home','About','Clients', 'Contact Us']
- @aboutlink = ['History','Our Team','Locations']
- @contactlink = ['Hay!','This handles','multiple','instances']

%ul.nav
  - @links.each do |link|
    %li.nav-item
      %a.nav-link{:href=>"#"} #{link}
      - case when link == 'Contact Us'
        %ul.accordion
          -@contactlink.each do |contactlink|
            %li.nav-item
              %a.nav-link{:href=>"#"} #{contactlink}
      - case when link == 'About'
        %ul.accordion
          -@aboutlink.each do |aboutlink|
            %li.nav-item
              %a.nav-link{:href=>"#"} #{aboutlink}
View Compiled
$bodyBG:         #ddd;
$navBG:          #3399DB;
$navHoverBG:     invert($navBG);
$navColor:       #fff;
$linkPadding:    .7em 0;

$skew:           45deg;
$accordionSpeed: .35s;
$accordionTiming: ease-in-out;


body {
  font-family: "Montserrat",sans-serif;
  font-weight: normal;
  font-size: 100%;
  line-height: 1.618;
  background: $bodyBG;
}

.nav {
  width: 15em;
}

.nav-link {
  display: block;
  color: $navColor;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  transition: background .2s linear;
}

.nav-item {
  display: block;
  width: 15em;
  position: relative;
  transition: 
    transform $accordionSpeed/2 $accordionTiming, 
    height $accordionSpeed $accordionTiming;

  .nav-link {
    background: $navBG;
    padding: $linkPadding;
    border: 1px solid rgba(#fff, .1);
    border-bottom: 0;
    &:hover {
      background: $navHoverBG;
    }
  }
}

.nav-item:hover {

  .nav-link {
    background: $navHoverBG;
  }

  .nav-item {
    width: 15em;
    height: 3em;

    &:nth-child(even),
    &:nth-child(odd) {
      transform: skew(0);
    }

    .nav-link {
      padding: $linkPadding;

      &:hover {
        background: lighten(invert($navBG),10%);
      }
    }
  }
  .accordion:before {
    content: "\f106";
  }
}

.accordion {
  position: relative;
  left: 0;

  &:before {
    content: "\f107"; // caret down
    position: absolute;
    top: -2.25em;
    right: 1em;
    font-family: FontAwesome;
    font-smoothing: antialiased;
    color: $navColor;
    background: rgba(#fff, .05);
    border-radius: 100%;
    display: block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5;
    vertical-align: middle;
    text-align: center;
    box-shadow: inset 0 0.1em 0.1em rgba(black,0.3);
  }

  .nav-item {
    height: 0;
    overflow: hidden;

    &:nth-child(even) { transform: skew($skew); }
    &:nth-child(odd) { transform: skew(-$skew); }

  }
}
View Compiled

External CSS

  1. https://codepen.io/katydecorah/pen/5e3594c5f394b457f8b8ffbb4c5b6518.scss
  2. https://fonts.googleapis.com/css?family=Montserrat
  3. https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js