Submenu Animations:
Sidemenu Slide Animations:

FLEXMENU

The Responsive Mega Menu Plugin

The Awesome jQuery Responsive
Mega Menu Plugin

Start build your own responsive site navigation today!!!


FULLWIDTH EXAMPLE

jQuery Powered

With jQuery we make the ultimate menu plugin with individual layout controls for each menu item.

Bootstrap Compatible

Our plugin is a bootstrap compatible solution, it's easier than ever to build a mega menu with a full grid system build in.

After Sale Support

If you faced any problem or have a question about this plugin just email us.

The Feature List

  • Full Responsive Layout Design
  • Bootstrap Grid Compatible
  • Mega or Flyout Submenus
  • Unlimited Number of Submenu Levels
  • Left & Right Submenu Alignment
  • Show Submenus on Hover or Click
  • Collapsible Off-canvas Sidemenu
  • Simple HTML Markup
  • Awesome Looks (2 Predefined Themes - Dark & Light)
  • LESS Files For The Theme Creation
  • Easy Integration to Your Projects
  • Help via Email
  • and so more..
FlexMenu Preview

How To Use

1. Load jQuery.js and jquery.flexmenu.min.js in the head section for your html document:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flexmenu.min.js"></script>

2. Load the CSS base, theme and animation file that styles the menu:

<link rel="stylesheet" type="text/css" href="css/flexmenu.css">
<link rel="stylesheet" type="text/css" href="css/flexmenu.animate.css">
<link rel="stylesheet" type="text/css" href="css/flexmenu.theme.dark.css">

3. Set up your HTML:

<ul id="yourmenu">
	<li class="fxm-item"><a href="#">Home</a></li>
	<li class="fxm-item"><a href="#">Blog</a></li>
	<li class="fxm-item">
		<a href="#">Portfolio</a>
		<ul class="fxm-submenu">
			<li class="fxm-item"><a href="#">Applications</a></li>
			<li class="fxm-item"><a href="#">Web Design</a></li>
			<li class="fxm-item"><a href="#">Typography</a></li>
		</ul>
	</li>
	<li class="fxm-item"><a href="#">Service</a></li>
	<li class="fxm-item"><a href="#">Contact</a></li>
</ul>

4. Finally just call the plugin on your menu:

4.1 Simple example

$(document).ready(function() {

	$("#yourmenu").flexmenu({theme:"dark-theme"});
	
});

4.2 Advanced example.

$(document).ready(function() {
	
	$("#yourmenu").flexmenu({
		theme:"light-theme",
		responsive:true,
		responsiveWidth:987,
		triggerClick:true,
		dropdownShowClass:"fxm-slideInLeft",
		dropdownHideClass:"fxm-slideOutRight",
		sidemenuPosition:"left",
		sidemenuSlideShowClass:"fxm-fadeIn",
		sidemenuSlideHideClass:"fxm-slideOutRight",
		sidemenuWidth: "50%",
		sidemenuSlideSync: true,
		sidemenuSidebar: false,
	});

});