FlexMenu

About

FlexMenu is a lightweight and rich-feature solution for creation responsive site navigations. It supports mega menu items, show and hide CSS3 animations, unlimited flyout submenus. The plugin is a bootstrap compatible solution, it’s easier than ever to build a mega menu with a full grid system build in. It can be deployed easily and runs on all modern browsers and mobile devices like iOS, Android and Windows.

The following video movie will show you the plugin work on a test site. This video is a quick overview. Please use our contact form if you have any further questions.

Demo & Features

Demo

• 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
• View customization - is easy to customize, including the themes and source files
• Easy Integration
• Help via Email
• and so more..

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,
	});

});