
The jQuery menu.js plugin transforms the regular multi-level dropdown menu into a fullscreen hamburger navigation that will slide out or fade in when toggled.
Supports desktop, tablet, and mobile devices. Compatible with most browsers.
1. Insert jQuery JavaScript library and the jQuery menu.js plugin's files into the page.
<link rel="stylesheet" href="menu.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="menu.min.js"></script>
2. Include the fastclick.js to remove click delays on touch devices (OPTIONAL).
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
3. Create a multi-level dropdown menu from nested lists.
<div class="ve-menu"> <ul class="ve-menu-pc"> <li><a href="#">Home</a></li> <li><a href="#">Category</a> <ul> <li><a href="#">jQuery</a></li> <li><a href="#">Script</a></li> <li><a href="#">NET</a></li> </ul> </li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div>
4. Initialize the plugin by calling the function on the top container.
$('.ve-menu').menu();
5. Possible options to customize the plugin.
$('.ve-menu').menu({ // font size fontSize: '16px', // font size (sub menu) subFontSize: '16px', /* themeColor = { blue: { fontColor: '#fff', bgColor: '#0E90D2', hoverFontColor: '#fff', hoverBgColor: '#0C79B1' }, dark: { fontColor: '#9D9D9D', bgColor: '#1F1F1F', hoverFontColor: '#fff', hoverBgColor: '#000' } }; */ fontColor: this.themeColor.blue.fontColor, bgColor: this.themeColor.blue.bgColor, hoverFontColor: this.themeColor.blue.hoverFontColor, hoverBgColor: this.themeColor.blue.hoverBgColor, subFontColor: this.themeColor.blue.fontColor, subBgColor: this.themeColor.blue.bgColor, subHoverFontColor: this.themeColor.blue.hoverFontColor, subHoverBgColor: this.themeColor.blue.hoverBgColor, // height height: 40, // item width itemWidth: 20, // space between items itemSpace: 1, // see above theme: 'blue', // options for hamburger navigation mMenuBtnColor: '#000', mMaskColor: '#000', mBgColor: '#000', mFontColor: '#fff', mSubBgColor: '#222', mSubFontColor: '#fff', mCloseBtnColor: '#fff', // 'slide' or 'fade' animate: false, // animation speed speed: 200 });
This awesome jQuery plugin is developed by zhangsilei. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 30.07.2018
- Source