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.
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.
https://webthemez.com/demo/ace-responsive-menu/index.html
This menu has been tested and works with all the following browsers:
=> 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
<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>
Samson Email: [email protected]