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 [email protected];

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>