animated-nav-menu-svg
NPM Package containing an animated navigation menu icon - implemented in svg - including CSS and Javascript, for use in HTML-based web development.
Install
Using NPM:
$ npm install animated-nav-menu-svg --save
Using Yarn:
$ yarn add animated-nav-menu-svg
Usage
Overview
There are 3 steps to implement the animated svg icon.
- Include the stylesheet.
- Include the javascript.
- Add the markup (HTML/SVG) code.
All are required to get an interactive animated menu icon.
The first two are included in the NPM package, but the last step is manual, with the necessary code included below.
Step One: Include the stylesheet
If you're using CSS, you can include the following inside your HTML document (usually within the <head>
tag):
<!-- Inside your <head> element -->
Or, you can import the stylesheet into another CSS Stylesheet:
;
If you're using SCSS, import the stylesheet like so:
;
Step Two: Include the javascript
Reference the javascript by adding something like the following line (usually at the end of an HTML document's <body>
element):
<!-- Wherever you import your other javascript files... -->
Step Three: Add the HTML Markup
All that's left is to add the SVG-containing code to your HTML document (usually inside <nav>
):
<!-- Navigation Menu Button (Toggable-SVG inside a button element) --> animated-hamburger-menu-icon-svg
If, for some reason, you only need the animated SVG icon, this is the crutial code
animated-hamburger-menu-icon-svg