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

 

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:

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. Setup Metro UI OneMenu.
  2. OneMenu Structure.
  3. Call OneMenu Plugin.
  4. Parameters.

 

 

Section 1: Setup Metro UI OneMenu.

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:

<link rel="stylesheet" href="css/onemenu.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 file:

<!-- jQuery Library ver 1.9.1-->
<script type="text/javascript" src="js/jquery/jquery.min.191.js"></script>
<!-- Masonry Plugin -->
<script type="text/javascript" src="js/masonry/masonry.min.js""></script>
<!-- OneMenu Plugin -->
<script type="text/javascript" src="js/onemenu.min.js"></script>

 

Setup is finished.

 

Section 2: OneMenu Navigation Structure.

This section should be read along with the example file ( “demo.html” file ) 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 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.

<!-- 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 OneMenu Plugin.

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

<script type="text/javascript">
  $(window).load(function(){	
    $('.onemenu').onemenu({
    	animEffect:'fade'
    });
  });
</script>

 

Section 4: Parameters.

Parameters Properties Description
hidezone string. This param is used to set the block you want to hide when nav panel is opened.
animEffect string. This param is used to set animation effect for navigation panel.
Value: none, fade.

 

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to email me via Contact Form. No guarantees, but I’ll do my best to assist you. Thanks so much!

 

 

More Plugins with Metro UI:

 

 

LEAVE A COMMENT
Tagged with:
 

Comments are closed.

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