Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Build Status


Enhance your website with six stylish transformicons using SCSS (or LESS) and CSS.

Getting Started

Download and Setup

First, initialize your variable settings in the variables.scss (or variables.less) file or simply use the defaults.

/****** DEFAULTS ******/

/* sizes */
$base: 100%;
$width: 1.5em;
$thickness: .3125em;
$spacing: .525em;
$border-radius: 1.5em;

/* animation */
$toggle-factor: .75;
$hover-factor: 1.20;
$duration: .5s;

/* theme */
$background: #c9302c;
$opacity: 0.8;
$hover-opacity: 1;

/* position */
$top: 10px;
$right: 15px;
$bottom: auto;
$left: auto;

Next, transpile the menu-animate.scss (or menu-animate.less) to generate your css file and add the generated menu-animate.css file to the <head> of your html document.

Lastly, add one of the following two scripts before the closing <body> of your html document.

  • menu-animate.js - Vanilla JavaScript
  • - jQuery Plugin *

* requires jQuery (1.2.1 or higher).

Install with Bower

$ bower install menuanimate.scss

Install with npm

$ npm install menuanimate



Add the following html to your webpage where you would like your icon to appear.

<button class="navicon"></button>

<!-- OR ... use your own selector [id or class] -->

<button id="my-selector"></button>


The plugin integrates seamlessly with the Bootstrap css framework and the Bootstrap collapse.js plugin. Simply add data-toggle="collapse", the .navbar-toggle class, and a data-target element to your markup.

<button class="navicon navbar-toggle" data-toggle="collapse" data-target="#navbar-target"></button>

<div id="navbar-target" class="navbar-collapse collapse">
<!-- /target -->


To use this plugin with jQuery, include both the jQuery and scripts, then simply call:

/* no args */
$("#my-selector").menuAnimate();                 // icon will default to "line"

... or choose an icon type modifier:

/* icon arg */
$("#my-selector").menuAnimate("x");              // icon will be "x"

JavaScript (Vanilla JS)

To use this plugin with only JavaScript, include the menu-animate.js script, then simply call:

/* no args */
MenuAnimate();                          // selector will default to ".navicon"

... choose your own selector [id or class]:

/* selector arg */
MenuAnimate("#my-selector");            // selector will be "#my-selector"

... choose an icon type modifier:

/* icon arg */
MenuAnimate("x");                       // selector will default to ".navicon"
                                        // icon will be "x"

... choose both a selector and icon type modifier

/* icon & selector args */
MenuAnimate("plus", ".my-selector");    // argument order doesn't matter
MenuAnimate(".my-selector", "plus");    // ... same as above


Customize your icon by passing in one of the six icon type modifiers. Each icon starts as a three-bars icon and transforms to the specified icon type.

Type Description
line * line
x x
plus plus
larr left arrow
rarr right arrow
uarr up arrow

default — when no additional modification class is added.

Live Demo

A live, interactive demo can be found here:

Transformicons and Demos


Enhance your website with six stylish menu transformicons using SCSS (or LESS) and CSS.




No packages published