Ace responsive menu is a lightweight jQuery plugin to create responsive multi-level navigation menus with multi device support. Ace responsive menu comes with 3 variants like horizontal, vertical and accordion menu. It gives complete responsive menu solution for any kind of websites or admin templates. The plugin has clean and well commented val…
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead of samsono:master.
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
js
AUTHOR.txt
Help-Document.docx
MIT-license
README.md
accordion-menu.html
horizontal-menu.html
index.html
vertical-menu.html

README.md

Ace Responsive Menu

Ace responsive menu is a lightweight jQuery plugin to create responsive multi-level navigation menus with multi device support. Ace responsive menu comes with 3 variants like horizontal, vertical and accordion menu. It gives complete responsive menu solution for any kind of websites or admin templates. The plugin has clean and well commented valid code, easy to Integrate and modify.

Features

  • Fully Responsive multi-level Menu
  • Menu Styles: Horizontal, Vertical and Accordion menu
  • 4-Level Menu support
  • Icon Support [Integrated with FontAwesome]
  • Click / Hover Events
  • Lightweight jQuery script
  • Valid HTML5 and CSS3
  • Bootstrap Compatible
  • Easy to Integrate & customize
  • Cross-browser support
  • Clean and well commented code
  • Help documentation

Demo

https://webthemez.com/demo/ace-responsive-menu/index.html

Events

  • Mouse Click
  • Mouse Hover
  • Mouse Click (“Toggle”)

Compatible Browsers

This menu has been tested and works with all the following browsers:

  • Internet Explorer 7+
  • Firefox 3+
  • Chrome 4+
  • Safari 4+
  • Opera 10+

How to use

=> Add jQuery file before closing body tag = <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

=> Included aceResponsiveMenu.js after jQuery = <script src="js/ace-responsive-menu.js" type="text/javascript"></script>

=> Include “ace-responsive-menu.css” to the head of your document =

=> Here is the Markup for Responsive Menu structure:

<nav>
	<div class="menu-toggle">
		<h3>Menu</h3>
		<button type="button" id="menu-btn">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
	</div>

	<ul id="demoMenu" class="ace-responsive-menu" data-menu-style="horizontal">
		<li><a href="">Item one  </a></li>
		<li><a href="">Item two </a>
			<ul>
				<li><a href="">sub Item one </a></li>
				<li><a href="">sub Item two </a></li>
				<li><a href="">sub Item Three </a></li>
			</ul>
		</li>
		<li><a href="">Item three </a></li>
		<li><a href="">Item four </a></li>
	</ul>
</nav>

=> Change default style of the Menu (data-menu-style=””) to horizontal/Vertical/accordion

    => Initialize aceResponsiveMenu before your closing body tag

    <script type="text/javascript"> $("#demoMenu").aceResponsiveMenu(); </script>

    => Optional parameters:

    <script type="text/javascript">
    	  $("#demoMenu").aceResponsiveMenu({
    		 resizeWidth: '768', // Set the breakpoint same in Media query       
    		 animationSpeed: 'fast', //slow, medium, fast
    		 accoridonExpAll: false //Expands all the accordion menu on click
    	});     
    </script>
    

    For any support

    Samson Email: samson3d@gmail.com