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.

 

 

OneMenu Navigation Metro UI

 

Demos:

  1. Demo 1: Open OneMenu by clicking on a button.
  2. Demo 2: Auto show Control Bar, disable close menu, hide submenu at default.

 

 

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 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:

 

 

Table of Contents:

  1. Installing Metro UI OneMenu plugin.
  2. OneMenu Structure.
  3. Call Plugin.
  4. Parameters.

 

 

Section 1: Installing Metro UI OneMenu Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.

Include the following code into HEAD section of the page.

Include CSS files:

<!-- 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 type="text/javascript">
 document.createElement('nav');
</script>
<![endif]-->

include Javascript files:

<!-- Start jQuery Library -->
<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery-2.1.4.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.11.3.js"></script>
<![endif]-->
<!-- End jQuery Library -->

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

<!-- OneMenu Plugin -->
<script type="text/javascript" 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
    </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 type="text/javascript">
  $(window).load(function(){	
    $('body').onemenu();
  });
</script>

With Javascript parameters:

<script type="text/javascript">
$(window).load(function(){
	$('body').onemenu({
		autoshow: 'om-nav',
		openstyle: 'pushdown',
		ctrlalign: 'right',
		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.

 

HTML Parameters:

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

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in OneMenu jQuery Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!

 

 

More Plugins with Metro UI:

 

Tagged with:
 
Set your Twitter account name in your settings to use the TwitterBar Section.