Getting Started

Superfly is a premium WordPress plugin that generates a side menu. Navigation is very important part of user experience and Superfly makes it easier for users of your site. It uses cutting-edge CSS3 and only pure CSS animations for better performance.

Installation

1. Unzip plugin archive.
2. Place superfly-menu folder into the .../wp-content/plugins/ directory of your site.

Or you can do the second part in more handy way via WordPress Admin panel:

1. On the Plugins panel press the Add New button.
2. Press Upload tab.
3. Browse for the superfly-menu.zip file, select it, press Open.
4. Click Install Now.

Troubleshooting: No valid plugins were found. Plugin install failed

Files Structure

Superfly has standard WordPress plugin structure. It includes both PHP files for server-side and JavaScript files to operate on client-side. Main plugin file main.php generates menu HTML and injects JS (like main JS superfly-menu.js) from /js folder and CSS from /css folder on your site page. Also it's responsible for plugin options and settings storage.

Source code: PHP and JavaScript

Plugin main PHP class is defined in main.php_. It provides standard WordPress plugin routine like settings and appearance presentation in admin and settings storage in WordPress database and also includes other .php files and injects .js, .css for browser pages. Nothing really to customize here, only in case of new functionality addition.

• Files options-page.php and settings.php are both dedicated to handle settings page presentation and scripting.
• Menu dynamic content and styles generation takes place in superfly-menu.php. There can be found base HTML.
• Logic of how plugin works on your page is encapsulated in superfly.min.js. Menu generation and animation logic can be found here. If you want to change something of this stuff you should edit this file.

IMPORTANT: by default plugin uses minified Superfly.min.js to optimize page load but editing of this file is much harder. We suggest you to switch to non-minified Superfly.js. Search for string Superfly.min.js in main.php and change path. Then edit this file (found in /js folder) and minify it here. Save as new Superfly.min.js.

This plugin imports two Javascript files only on Settings page:

1. jQuery plugin tinycolor.js to work with colors.
2. jQuery Colorpicker UI plugin jquery.colorpickersliders.js.

Design: CSS and images

We use two CSS files in this theme. The first one admin.css is for plugin styles in WordPress admin like settings page. The second file superfly-menu.css contains all of the specific stylings for the Superfly on your site pages.

Feel free to edit any of this CSS. Please double-check if editing more than just font or background color.

Usage

Superfly will use WordPress menu mapped to location specified on Superfly options page to generate the side menu. You can edit these menus and its mappings in Appearance/Menus. Superfly requires standard WordPress 3 menu structure to work:

<div id="my-menu">
    <ul>
        <li>
            <a href="#">Page1</a>
        </li>

        <li>
            <a href="#">Page2</a>
            <ul class="sub-menu">
                <li><a href="">SubPage1</a></li>
            </ul>
        </li>

        <li>
            <a href="#">Page3</a>
        </li>
    </ul>
</div>

If you have custom menu with similar structure and want to use it as Superfly menu source please send me message with request for instructions.

Browser support

• Chrome >= 20
• Mozilla Firefox >= 15
• Internet Explorer >= 9
• Safari >= 5
• Opera >= 15
• Safari Mobile for iOS
• Chrome for Android / iOS
• Firefox for Android

Dependencies

Only dependency is jQuery equal or greater than 1.7 version.

Support

To get support for any our product please visit our Help Center. Our Help Center is the only official Looks Awesome support handling mechanism. Questions sent using other channels may be ignored without notice. Check out our Support Policy.