Animated Menu Component v1.0.5

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.

Requirements

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

Installation

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">

Menu HTML

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

<div id="menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li class="iamenu-sub"><a href="#">Our clients</a>
        <ul>
            <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>
        </ul>
    </li>
    <li><a href="#">Process</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>

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">
$(function(){
    new IncodedAniMenu('#menu');
});
</script>

Options

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

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

Themes

There are 16 available themes you may choose:

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

Fonts

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.

Animations

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

fade, gravity, shift-right, shift-left

Other

Also there are additional options you may use:

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

new IncodedAniMenu('#menu', {
    opacity: 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 }
});