Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Build Status

MenuAnimate

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.menu-animate.js - jQuery Plugin *

* requires jQuery (1.2.1 or higher).

Install with Bower

$ bower install menuanimate.scss

Install with npm

$ npm install menuanimate

Usage

HTML

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>

Bootstrap

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>

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

jQuery

To use this plugin with jQuery, include both the jQuery and jquery.menu-animate.js 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

Icons

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

About

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

Resources

License

Packages

No packages published