$10.00 BUY NOW!

Archive Content

1. dist - Contains menu component with all its files ready for use. Open /dist/menu.html in your browser to see it.

2. about.html, demo.html & doc.html - Open those files in your browser to get familiar with the component.

3. assets - Contains files used by about.html, demo.html & doc.html.


To use the menu on your website, you just need jQuery and that's all.


Copy the content of dist directory on your website and that's pretty much it. But here's some details:

CSS files

Include animenu.min.css file from /dist/css before </head> tag of your page:

<link rel="stylesheet" type="text/css" media="screen" href="css/animenu.min.css">


Add the following HTML anywhere inside the <body> tag on your page and change its links according to your needs:

<div id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li class="iamenu-sub"><a href="#">Our clients</a>
            <li><a href="#">Asana</a></li>
            <li><a href="#">Basecamp</a></li>
            <li><a href="#">Jira</a></li>
            <li><a href="#">Teamwork</a></li>
            <li><a href="#">Wunderlist</a></li>
    <li><a href="#">Process</a></li>
    <li><a href="#">Contact</a></li>

JavaScript files

Include these javascript files from /dist/js directory before </body> tag of your page:

<script src="js/jquery.min.js"></script>
<script src="js/animenu.min.js"></script>

Menu Instance

Create menu instance:

<script type="text/javascript">
    new IncodedAniMenu('#menu');


Menu component contains options you can easily change through menu instance:

<script type="text/javascript">
    new IncodedAniMenu('#menu', {
        theme: 'typography', 
        font: 'roboto',  
        size: 'large', 
        animation: 'fade', 
        opacity: true,
        button_position: 'right'


There are 16 available themes you may choose:

lozenge, wood, birds, food, navyblue, photography, restaurant, typography, dark, grey, blue, violet, seeblue, coal, white, sand


There are 8 different fonts you may choose:

droid-serif, noticia-text, oxygen, raleway, roboto, roboto-slab, source-sans-pro, source-serif-pro

If you want font to be the same as on your website, then skip font option or set it this way font: '' in menu instance.


Using size option, you can make menu items large, medium or small. To keep default size, just omit this option.


There are 4 animations - ways of how menu will show and hide:

fade, gravity, shift-right, shift-left


Also there are additional options you may use:

opacity (true, false) - set to "true" makes background transparent:

new IncodedAniMenu('#menu', {
    opacity: true

inverse (true, false) - paints the hamburger button () in white. Set to "true" if your website page is dark-colored:

new IncodedAniMenu('#menu', {
    inverse: true

button_position (left, right, bottom-left, bottom-right, {top: 130, left: 300}) - sets the position of the hamburger () button. Default value is "left" which places button on the top-left corner of page.

new IncodedAniMenu('#menu', {
    button_position: 'bottom-left'

Besides first four options, you'll be able to place the button wherever you want on you page by using "top" and "left" coordinates.

new IncodedAniMenu('#menu', {
    button_position: { top: 480, left: 360 }