Animated Menus

a library of sass mixins

View Demo

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-animated-menus

or

yarn add elr-scss-animated-menus

Implementation

Scss

@import "elr-scss-animated-menus";

.menu-animated {
  @include menu-animated;
}

@import "elr-scss-animated-menus";

.menu-simple-lines {
  @include menu-simple-lines;
}

@import "elr-scss-animated-menus";

.menu-double-lines {
  @include menu-double-lines;
}

@import "elr-scss-animated-menus";

.menu-drop-lines {
  @include menu-drop-lines;
}

@import "elr-scss-animated-menus";

.menu-expanding-lines {
  @include menu-expanding-lines;
}

HTML

<nav class="menu-animated menu-simple-lines">
  <ul class="menu">
    <li class="menu-item current">
      <button class="menu-item-button">Article 1</button>
    </li>
    <li class="menu-item">
      <button class="menu-item-button">Article 2</button>
    </li>
    <li class="menu-item">
      <button class="menu-item-button">Article 3</button>
    </li>
    <li class="menu-item">
      <button class="menu-item-button">Article 4</button>
    </li>
    <li class="menu-item">
      <button class="menu-item-button">Article 5</button>
    </li>
    <li class="menu-line"></li>
  </ul>
</nav>

License

SEE LICENSE IN LICENSE.md