UI-Pro Plugin

Metro style NavBar

Current Version: 1.3

Last Update: 12/03/2013

See Changelog
UI-Pro Plugin - Metro style NavBar
 

With this simple jQuery Plugin you can easily create Metro (now simply called Windows 8 UI) style navigation bars. The plugin package comes with the icon pack called iconic created by P.J. Onori, which you can easily set with CSS classes. This plugin has minimal features and options, it has been created for webmasters who need similar functionality on their site(s).

    • Metro UI style navigation bar
    • 249 Font Icons
    • Uses CSS3
    • Lightweight JS/CSS
    • HTML or Object source
    • Left or/and Right panel
    • Easy customization
    • Available as WordPress plugin too

Demonstration.

You can test the plugin with the following demo(s).
View Demo Envato Page

Basic Usage.

First Steps

Click here for Wordpress Plugin docs.

First you need to include the following in your HEADsection, see demo source for examples. (Skip jQuery loading if you already have in your code.) This will include the plugin, styles and init the script for you:

< link charset="utf-8" href="ui-pro/styles.css" rel="stylesheet" type="text/css" />
< link charset="utf-8" href="ui-pro/fontawesome/font-awesome.css" rel="stylesheet" type="text/css" />

< script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">< /script>
< script type="text/javascript" src="uipro.min.js"> < /script>

< script type="text/javascript">
    $(document).ready(function(){
        $.uipro({
            leftMenu : {
                            'item1' : {
                                'label' : 'Item One',
                                'link' : 'http://themeforest.net',
                                'klass' : 'icon_ampersand'
                            },
                'item2' : {
                                'label' : 'Item Two',
                                'link' : 'http://codecanyon.net',
                                'klass' : 'icon_aperture'
                            },
                'item3' : {
                                'label' : 'Item Four',
                                'link' : 'http://graphicriver.net',
                                'klass' : 'icon_arrow_left_alt1'
                            },
                'item4' : {
                                'label' : 'Item Five',
                                'link' : 'http://photodune.net',
                                'klass' : 'icon_chart_alt'
                            }
            }
        });
    })
< /script>

That's all, now your left panel should work!

 

Customizing the plugin.

JavaScript Parameters

Use these parameters to customize your panel(s).
Option Description Data Type Default
init Which menus do you want to init. Available values: both, left, right String both
leftMenu Left menu content. You can set with an object so it won't harm you SEO, or you can use a jQuery/CSS selector which element will be cloned into the panel. String or Object false
rightMenu Left menu content. You can set with an object so it won't harm you SEO, or you can use a jQuery/CSS selector which element will be cloned into the panel. String or Object false
threshold Threshold from left and right where the panel should be inited. (in pixels) Numeric 40
onMouse Enable or disable activation on mouse move. Boolean true
onSwipe Enable or disable activation on swiping the screen sides. Boolean true
Methods
$.uiPro.open('left'); Open panel defined in the first parameter (left or right)
$.uiPro.close('right'); Close panel defined in the first parameter (left or right)
$.uiPro.toggle('left'); Toggle panel defined in the first parameter (left or right)

Menu as object (left menu example)

leftMenu : {
                            'item1' : { /* Something unique */
                                'label' : 'Item One', /* Label of the link */
                                'link' : 'http://themeforest.net', /* Target of the link */
                                'klass' : 'icon-truck', /* Icon class of the link: icon-[ICON-NAME] */
                                'target' : '_blank'
                            },
			    'item2' : {
                                'label' : 'Item Two',
                                'link' : 'http://codecanyon.net',
                                'klass' : 'icon_aperture',
                                'target' : '_blank'
                            },
			    'item3' : {
                                'label' : 'Item Four',
                                'link' : 'http://graphicriver.net',
                                'klass' : 'icon_arrow_left_alt1'
                            },
			    'item4' : {
                                'label' : 'Item Five',
                                'link' : 'http://photodune.net',
                                'klass' : 'icon_chart_alt',
                                'target' : '_blank'
                            }
			}

Menu from HTML source

leftMenu : '.selector' /* The whole element will be cloned. */

 

 

Wordpress Plugin Installation and Usage

Fresh Install

  1. Extract the ui-pro.zip contents to the wp-contents/plugins folder.
  2. Go to the Wordpress Plugin manager and activate the plugin.
  3. Now you'll have an Ui-Pro Links post type. Create your links there.
  4. Go to the Settings -> Ui-Pro Settings page enable your menu.

Update from Previous Version

  1. Deactivate and unistall the previous instance of your (your links won't be deleted).
  2. Extract the ui-pro.zip contents to the wp-contents/plugins folder.
  3. Go to the Wordpress Plugin manager and activate the plugin.

 

Adding links

The only questionable field is the Image input box. You may use the built-in icons or you can use your own.

Built-in icons: use icon-[ICON-NAME] for value (use the dropdown selector for preview)
Custom Image URL: simple insert your image URL the plugin will recognize it automaticly.

UIPRO Shortcode

The shortcode will insert a link based on your parameters:

Side: left or right
Action: open, close or toggle

Example:

[UIPRO side="left" action="toggle"]Toggle Left Panel[/UIPRO]

Log Of Changes.

Version 1.3 (12/03/2013)

  • Added swipe support to open/close panels.
  • Added methods for certain actions.
  • Changed Iconic to FontAwesome for more icons and better customization.
  • onMouse parameter added.
  • onSwipe parameter added
  • WordPress version:
  • Added support for custom targets.
  • Added support for changing colors from the admin panel with color picker.
  • Added enable/disable options for onMouse/onSwipe parameters.
  • Added shortcode to create UIPRO link for certain actions.

 

Version 1.2 (03/01/2013)

  • Added target option when using object. Adapted into WordPress panel too.

 

Version 1.1 (30/12/2012)

  • Released as Wordpress Plugin too.

 

Version 1.0 (09/19/2012)

  • First stable release (Hurray!!!)

Support.

You may use my online support (if i'm online :) )
Live Support

You can use the comments page on the Envato Product Page or write me here: [wintercounter AT gmail DOT com]