advanced-menus

Menu Package for Webpack.

NOTE: Package is in development.

Why this package

There already are a lot of menu packages available across the web. So why build another one? Well, A lot of packages focus on a specific menu layout, are at some point incomplete or not flexibel enough. We would like to change that and create a single menu package that gives front-end developers a set of predefined, responsive menu layouts to start their project with.

DONE

• Change menu based on resolution SASS only
• Create your own menu themes
• Customizable selectors
• Basic swipe handling

TODO

• Optimize package
• Create up to 5 (or more) menu themes (SCSS)
• Optimize Swipe event usage
• Optimize Demo page
• Optimize documentation
• Create ready to use prebuild package files.

EXAMPLE: menudemo.rehabproject.nl

ps. Like to join the fun? contact us at [e-mail];

How to use

Installation

Install from npm

npm install advanced-menus --save-dev

Include Javascript (ES6)

 
/*
DEFAULT CONFIG
 
{
    options:{
        disable_page_scroll: false,
        autoclose: true,
        parent_clickable: true
    },
    events: {
        swipeLeft: function(){},
        swipeRight: function(){},
        swipeUp: function(){},
        swipeDown: function(){}
    },
    selectors:{
        menu_id: 'main-menu',
        menuitem: 'li',
        submenu: 'li > ul',
        toggle_button: false,
        open_button: false,
        close_button: false,
    }
}
 
*/
 
const Menu = require('advanced-menus');
 
//menu config;
var config = {
    selectors:{
        toggle_button: ".menu-toggle-button",
    },
    options:{
        disable_scroll: true,
        parent_clickable:true,
    },
    events:{
        swipeLeft: function(menu, e){
            menu.close();
        },
        swipeRight: function(menu, e){
            menu.open();
        }
    }
}
 
//config not required
var mainmenu = new Menu(config);
 

Include styles (SASS)

 
/*
Available themes:
- aside-left
- aside-right
- plain-horizontal
- dropdown
*/
 
$registered-menus: (
    main-menu: (
        selector:"#main-menu",
        themes:(
 
            aside-left: (
                min:0px,
                max:750px,
                autohide: 750px
            ),
 
            aside-right: (
                min:750px,
                max:1024px,
            ),
 
            plain-horizontal: (min:1024px)
        )
    )
    //, another menu
    //, another menu
);
 
@import "node_modules/advanced-menus/scss/menu";
@include generate-menus();
 
/*
=============================================
USEFUL MIXINS
=============================================
*/
 
// experimental
// menu-breakpoint :
// Use this mixin to add styles at the specified menu theme breakpoint
@include menu-breakpoint($menu, $theme){
    //styles
}
 
/*
=============================================
Custom themes
=============================================
*/
 
// experimental
// ./themes/_theme-name.scss
@include register_menu_theme($some-theme-name)
// your styles here.
}
 
// experimental
//hides menu at certain resolution;
@include menu-autohide($theme-name){
    // initial styles to hide menu.
}
 

Example html

<nav id="main-menu">
    <ul class='menu'>
        <li class="menu-item">
            <a href="#item1">Item 1</a>
            <ul class='sub-menu'>
                <li class="menu-item"><a href="#item1">Item 1</a></li>
                <li class="menu-item">
                    <a href="#item2">Item 2</a>
                    <ul class='sub-menu'>
                        <li class="menu-item"><a href="#item1">Item 1</a></li>
                        <li class="menu-item"><a href="#item2">Item 2</a></li>
                        <li class="menu-item"><a href="#item3">Item 3</a></li>
                        <li class="menu-item"><a href="#item4">Item 4</a></li>
                        <li class="menu-item"><a href="#item5">Item 5</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="#item1">Item 3</a></li>
                <li class="menu-item"><a href="#item2">Item 4</a></li>
                <li class="menu-item"><a href="#item3">Item 5</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#item2">Item 2</a>
            <ul class='sub-menu'>
                <li class="menu-item"><a href="#item1">Item 1</a></li>
                <li class="menu-item"><a href="#item2">Item 2</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="#item3">Item 3</a></li>
        <li class="menu-item"><a href="#item4">Item 4</a></li>
    </ul>
</nav>
 
<button class="menu-toggle-button">=</button>