Responsive Multi-Level Navigation Menus – Ace Menu

Responsive Multi-Level Navigation Menus - Ace Menu
Project: Ace-Responsive-Menu
Author: samsono
Fork: Fork on GitHub
License: MIT

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 in 3 variants horizontal, vertical, and accordion menu. It gives a complete responsive menu solution for any kind of website or admin template. The plugin has clean and well-commented valid code, easy to Integrate and modify.


  • 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



  • 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 =

=> Included aceResponsiveMenu.js after jQuery =

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

=> Here is the Markup for Responsive Menu structure:

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

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

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

=> Initialize aceResponsiveMenu before your closing body tag


=> Optional parameters:

<script type="text/javascript">
		 resizeWidth: '768', // Set the breakpoint same in Media query       
		 animationSpeed: 'fast', //slow, medium, fast
		 accoridonExpAll: false //Expands all the accordion menu on click

For any support


  • AUTHOR.txt
  • Help-Document.docx
  • MIT-license
  • accordion-menu.html
  • css
  • horizontal-menu.html
  • index.html
  • js
  • vertical-menu.html
No Chnagelog!

Leave a Reply

Leave a Comment


No comments yet. Why don’t you start the discussion?

Leave a Reply

Scroll to Top