A three dimensional and space effecient menu. Meny works best in browsers with support for CSS 3D transforms, although it falls back on 2D animation for older browsers. Supports touch events for mobile devices.
Add meny.min.js to your project. The meny.min.js file is the only thing required, but you could optionally clone the repository if you want to get the default styles.
Meny requires two HTML elements to work: a menu and the page contents. The class names are not used by the library so chose anything you want.
<body>
<div class="meny">
<!-- your menu items -->
</div>
<div class="contents">
<!-- your page contents -->
</div>
</body>Some rules, notes and best practices to keep in mind in terms of markup and styling:
- The menu and contents should have the same parent element.
- The background which appears behind the contents when Meny is open is not added by the library. You need to set your desired background to the parent element. The default style can be found in demo.css.
- The arrow which appears when Meny is closed is also not added by the library, if you want it you can easily copy the styles from the demo.css.
- The menu container will be automatically resized by the library according to configuration options.
- Meny works on scrolling pages as the menu itself is fixed.
Next you need create an instance of Meny and tell it which HTML elements to use. This should be done after the meny.min.js is included on your page. Example using the HTML above:
var meny = Meny.create({
// The element that will be animated in from off screen
menuElement: document.querySelector( '.meny' ),
// The contents that gets pushed aside while Meny is active
contentsElement: document.querySelector( '.contents' ),
// The alignment of the menu (top/right/bottom/left)
position: 'left',
// The height of the menu (when using top/bottom position)
height: 200,
// The width of the menu (when using left/right position)
width: 260
});A few handy methods API methods are included, you call these on the instance returned by Meny.create (see above).
meny.open();
meny.close();
meny.isOpen(); // true/falseThe wrapper element (parent of the menu and contents) is decorated with classes based on its state:
.meny-active
.meny-top
.meny-right
.meny-bottom
.meny-leftInstances of Meny dispatch events to notify you of their state:
var meny = Meny.create( ... ) // see 3. Initialize
meny.addEventListener( 'open', function() {
// do something on open
} );
meny.addEventListener( 'close', function() {
// do something on close
} );- Instances of Meny now dispatch 'open'/'close' events
- 2D animation fallback (works in IE8+)
- Rewrote the JavaScript
- All core styles/transforms are set via JavaScript
- Made many options available at initialization
- New JavaScript fallback using internal animation method
- Fallback mode that doesn't rely on transforms
- Cleaned up CSS
- Fix bug where original events for taps on anchors were blocked
- It's now possible to reach the meny via tapping as well as swiping
- Initial release
MIT licensed
Copyright (C) 2012 Hakim El Hattab, http://hakim.se
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent