OneMenu – Responsive Navigation Menu For Metro UI Themes

January 1, 2019February 13, 2023 SONHLAB dynamic grid, masonry, menu, metro, mobile menu, mobile navbar, navbar, panel, responsive, responsive menu, tile

OneMenu is a jQuery Navigation Menu Plugin for Metro UI themes. With this plugin you can create unlimited navigation panel and menus easily, responsive design of OneMenu will align automatically all items to fit with screen sizes. Additionally, you can customize the style of items with a lot of colors that have already created in CSS.

Buy Now

Demos:

OneMenu Metro UI Features:

Responsive Design for Metro UI.
Unlimited Menus.
Unlimited Items in one menu.
Works on Aalmost Platforms.
Auto align items in Dynamic Grid.
Light weight.
Easy Customiztion.

Change Logs:

Jan 2019: Update version 3:

Added new javascript parameter [closeoutside] to close menu when clicking outside of the menu
Optimized the plugin and updated new libraries.

Jan 2016: Update version 2.0:

Updated Masonry version.
Changed Calling method.
A new param to set showed/hidden status for Submenu.
A new param to set position for Control Items.
A new param to enable/disable close menu.
A new param to set OneMenu overlay content or push content down.
Added Font Awesome.
Support to add image buttons into Submenu.
Support to add external links for control items.

17 Apr 2013: Update version 1.1:

Fix some important bugs.

12 Dec 2012: First Version.

Credits:

This plugin is developed by SONHLAB.com and used below third parties:

<!-- OneMenu Style -->
<link rel="stylesheet" href="css/onemenu.css" type="text/css" />
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no" />

For IE 8 and older:

<!--[if lt IE 9]>
<script>
 document.createElement('nav');
</script>
<![endif]-->

include Javascript files:

<!-- Start jQuery Library -->
<script src="js/jquery/jquery.min.js"></script>
<!-- End jQuery Library -->

<!-- Masonry Plugin -->
<script src="js/masonry/masonry.min.js"></script>

<!-- OneMenu Plugin -->
<script src="js/onemenu.dev.js"></script>

Done. The plugin is now ready to use.

Section 2: OneMenu Structure.

This section should be read along with the example files also contained in the download package.

Navigation Panel:

<nav id="om-nav" class="om-nav img-darkwood">

 <!-- Control Bar -->
 <div class="om-ctrlbar>
  <div class="om-controlitems">

   <!-- Close Button -->
   <div class="om-closenav om-controlitem">
    <img src="images/icon.png" alt="" />
   </div>
   <!-- End Close Button -->

   <!-- Control Item List -->
   <div class="om-ctrlitems">
    <div class="om-centerblock">

     <!-- Control Item Example -->
     <div class="om-ctrlitem" data-groupid="group1">
      <img src="images/home.png" alt="" />
     </div>
     <!-- Control Item Example -->

    </div>
   </div>
   <!-- End Control Item List -->

   <!-- Next Button -->
   <div class="om-movenext om-controlitem">
    <img src="images/rightarrow.png" alt="" />
   </div>
   <!-- End Next Button -->

  </div>
 </div>
 <!-- End Control Bar -->

 <!-- Item Holder -->
 <div class="om-itemholder">
  <!-- ItemList -->
  <div class="om-itemlist">

   <!-- Item Example -->
   <div class="tile-bt-extralarge solid-blue-2 shadow-blue om-item" data-group="group1">
    <a href="#" class="gradient">
     <img src="images/icon.png" alt="" />
     <span class="light-text">Item Title</span>
    </a>
   </div>
   <!-- End Item Example -->

  </div>
  <!-- End ItemList -->
 </div>
 <!-- End Item Holder -->

</nav>

Important Classes: (You should keep these classes when you customize the plugin design).

om-nav
om-ctrlbar
om-controlitems
om-closenav
om-controlitem
om-ctrlitems
om-centerblock
om-ctrlitem
om-movenext
om-itemholder
om-itemlist
om-item

In the above code, when a control item with data-groupid=”group1″ is clicked all items have data-group=”group1″ will be shown.

To open the navigation above we need to create a menu button, when visitors click on this menu the navigation will be shown.

<!-- Start OneMenu -->
 <div data-navid="om-nav" class="tile-bt solid-red-2 shadow-red onemenu">
  <a href="javascript:void(0);" class="gradient">
   <img src="images/icon.png" alt="" />
   <span class="light-text">OneMenu</span>
  </a>
 </div>
<!-- End OneMenu -->

In the above code, when the OneMenu with data-navid=”om-nav” is clicked the navigation has id=”om-nav” will be opened.

Section 3: Call Plugin.

To call the plugin, please add below code into <head> section.

Without parameter:

<script>
  $(window).on('load', function(){	
    $('body').onemenu();
  });
</script>

With Javascript parameters:

<script>
$(window).on('load', function(){
  $('body').onemenu({
    autoshow: 'om-nav',
    openstyle: 'pushdown',
    ctrlalign: 'right',
    closeoutside: true,
    closemenu: 'hide',
    submenu: 'hide',
    animEffect: 'slide'
  });
});
</script>

Section 4: Parameters.

Javascript Parameters:

Parameters	Properties	Description
hidezone	string.	This param is used to set the block you want to hide when an OneMenu is opened.
animEffect	string.	This param is used to set animation effect for navigation panel. Value: none, fade, slide.
autoshow	string.	This param is used to set which menu will be displayed at default load.
openstyle	string.	This param is used to set which style the menu will showed. Value: overlay (default), pushdown.
ctrlalign	string.	This param is used to set control items position. Value: left, center (default), right.
closemenu	string.	This param is used to enable/disable the close button on Control Bar. Value: show (default), hide.
submenu	string.	This param is used to show/hide submenu when an OneMenu is activated. It can be overwritten by HTML param.
closeoutside	boolean.	This param is used to enable clicking outside the menu to close. Value: true \| false.

HTML Parameters:

Parameters	Positions	Description
data-submenu	onemenu button	This param is used to show/hide submenu when the OneMenu is activated.

[endedwords product=”OneMenu jQuery”]https://talk.sonhlab.com/room/onemenu-jquery-plugin[/endedwords]