Google News Style Responsive Menu Bar In jQuery

ResponsiveMenuBar.js is a simple jQuery plugin to create a dynamic and responsive menu bar that looks and functions like the one used by Google News. 

If there are too many menu items to fit on the screen, they are moved to a separate dropdown and display a "three vertical dots" icon that users can click to access the additional items.

See Also:

• Material Design Style Context Menu With jQuery - 3Dot Context Menu

How to use it:

1. Load jQuery and the ResponsiveMenuBar.js plugin's files in the document.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- ResponsiveMenuBar.js Plugin -->
<link rel="stylesheet" href="menu.css" />
<script src="jquery.ResponsiveMenuBar.js"></script>

2. Code the HTML for the responsive menu bar.

<div class="rowContainer">
  <div id="header">
    <div class="menuContainer opacity0">
      <div class="menuLink" urlto="01.html">Menu Item 1</div>
      <div class="menuLink" urlto="02.html">Long Menu Item 2</div>
      <div class="menuLink" urlto="03.html">Menu 3</div>
      <div class="menuLink" urlto="04.html">0004</div>
      <div class="menuLink" urlto="05.html">Menu Item 5</div>
      <div class="menuLink" urlto="06.html">Menu 6</div>
      <div class="menuLink" urlto="07.html">Menu 7</div>
      <div class="menuLink" urlto="08.html">Long Menu Item 008</div>
    </div>
    <div class="iconExileMenu displayNone">
    </div>
    <div class="exileMenuContainer displayNone">
    </div>
  </div>
</div>

3. Call the function ResponsiveMenuBar and the plugin will do the rest.

$(document).ResponsiveMenuBar({
  funcClickOnActive: null,
  showDebugInfo: true
});

---

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