A space efficient 3D menu with CSS transitions.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 10 commits ahead, 3 commits behind hakimel:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist new improvements Feb 18, 2015
LICENSE Meny redistributed under the name FlipDiv Feb 4, 2015
README.md new improvements Feb 18, 2015
package.json

README.md

FlipDiv

A space effecient 3D menu with CSS transitions. FlipDiv works best in browsers with support for CSS 3D transforms, although it falls back on 2D animation for older browsers. It also supports touch events for mobile devices.

Demo page | Original demo page for Meny

Instructions

1. Download

Add FlipDiv.js to your project. The FlipDiv.js file is the only thing required, but you could optionally clone the repository if you want to get the default styles.

Alternatively you can load the FlipDiv.js file from cdnjs, see https://cdnjs.com/libraries/FlipDiv.

2. Markup

FlipDiv 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="flipDiv">
    <!-- 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 FlipDiv 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 index.css.
  • The arrow which appears when FlipDiv 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.
  • FlipDiv works on scrolling pages as the menu itself is fixed.

3. Initialize

Next you need create an instance of FlipDiv and tell it which HTML elements to use. This should be done after the FlipDiv.min.js is included on your page. Example using the HTML below:

var flipDivMenu = FlipDiv.create({
	// The element that will be animated in from off screen
	menuElement: document.querySelector( '.flipDiv' )

	// The contents that gets pushed aside while FlipDiv 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

	// The angle at which the contents will rotate to.
	, angle: 30

	// The mouse distance from menu position which can trigger menu to open.
	, threshold: 5

	// Threshold of the swipe gesture (in pixels)
	, swipeThreshold: 40

	// Distance from touch (in pixels) when menu should open
	, touchAreaThreshold: 40

	// Time frame (in milliseconds) after the swipe is ignored
	, swipeCancelTimeout: 200

	// Width(in px) of the thin line you see on screen when menu is in closed position.
	, overlap: 6

	// The total time taken by menu animation.
	, transitionDuration: '0.5s'

	// Transition style for menu animations
	, transitionEasing: 'ease'

	// Gradient overlay for the contents
	, gradient: 'rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.65) 100%)'

	// Use mouse movement to automatically open/close
	, mouse: true

	// Use touch swipe events to open/close
	, touch: {
		enabled: true
		, edgeOnly: true
	}
})

4. API & Events

A few handy methods API methods are included, you call these on the instance returned by FlipDiv.create (see above).

flipDivMenu.configure({ mouse: false }) // change settings after initialization

flipDivMenu.open()

flipDivMenu.close()

flipDivMenu.isOpen() // true/false

flipDivMenu.destroy() // revert original DOM state, unbind events

The wrapper element (parent of the menu and contents) is decorated with classes based on its state:

.flipDiv-active
.flipDiv-top
.flipDiv-right
.flipDiv-bottom
.flipDiv-left

Instances of FlipDiv dispatch events to notify you of their state:

var flipDivMenu = FlipDiv.create( ... ) // see 3. Initialize

flipDivMenu.addEventListener('open', function() {

	// do something on open

})

flipDivMenu.addEventListener('close', function() {

	// do something on close

})

flipDivMenu.addEventListener('opened', function() {

	// do something right after FlipDiv is opened and transitions finished

})

flipDivMenu.addEventListener('closed', function() {

	// do something right after FlipDiv is closed and transitions finished

})

Credits

Special thanks to the original author Hakim El Hattab (@hakimel) and those who are contributed to the original project called Meny!

History

Releases

Previous releases for Meny

License

MIT licensed

Copyright (C) 2015 Erik Engi, 2014 Hakim El Hattab, http://hakim.se