Basic Responsive Collapsed Menu With jQuery - flexmenu2

Basic Responsive Collapsed Menu With jQuery - flexmenu2

flexmenu2 is an easy, lightweight, cross-browser jQuery responsive menu plugin that transforms the traditional navigation into a toggleable dropdown menu on mobile (small screen) devices.

1. Load the main stylesheet flex.css in the head section of the web page.

<link rel="stylesheet" href="flex.css">

2. Create a normal site navigation from an unordered HTML list.

<ul class="flex">
  <li class="selected"><a href="#" class="active">HomePage</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Company Blog</a></li>
  <li><a href="#">Company Resources</a></li>

3. Load jQuery JavaScript library and the jQuery flexmenu2 plugin's script index.js at the bottom of the web page.

<script src="" 
<script src="index.js"></script>

4. Call the function on the menu list.


5. Set the threshold you prefer. For example example if the threshold is set to 5 and there are only 5 menu items the dropdown won't trigger.

  'threshold' : 2

This awesome jQuery plugin is developed by mylastore. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 03.02.2018
  • Source