Skip to content
A responsive panel navigation for mobile and desktop
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
examples
images
js
sass
.gitignore
Gruntfile.js
README.md
index.html
package.json

README.md

#FlexPanel

A responsive panel navigation for mobile and desktop

View FlexPanel examples on the official website

##Updates

####Additional Animation Now Available! You now have the option to 'reveal' or 'slide' the panel. The 'reveal' animation will give a more native app movement to the navigation.

##Features

####Swipe Controls With the help of hammer.js you can swipe to interact with the Flexpanel menu.

####CSS3 Animations There are no jQuery animations here. All animations are controlled by CSS3 properties.

####Fully Responsive From mobile applications to desktop websites, FlexPanel can handle your navigation.

##Usage

####HTML Structure

<div id="container">
	<div class="wrapper">
		// All site content here
	</div>
	<nav class="flexpanel">
		<div class="viewport-wrap">
			<div class="viewport">
				// Your Flexpanel menu would be here
			</div>
		</div>
	</nav>
</div>

####Basic Init Method

$('.flexpanel').flexpanel();

####Advanced Method

$('.flexpanel').flexpanel({
    animation: 'slide', // 'slide' | 'reveal'
    direction: 'right', // 'left' | 'right'
    wrapper: '#wrapper',
    button: '.flex-btn',  
    maxWidth: null // e.g. '768' if maxWidth is set FlexPanel will hide if viewport is larger then value
});

##Changelog

  • 09/02/2014, Updated Hammer JS to version 2
  • 09/02/2014, Updated core js, removing old deprecated functions
  • 03/14/2014, Added reveal animation
  • 03/12/2014, Removing maxWidth parameter
  • 03/1/2014, Added IE8 & 9 support

View the full changelog on the official website

You can’t perform that action at this time.