Super Floating and Fly Menu Documentation

The application provides the choice to display the side panel menu in side/skew orientation, full-screen mode, and also includes a navigation indicator. This documentation will guide you through installing and implementing the Super Floating and Fly Menu plugin into your website. Incorporating this extension enhances users’ ability to seamlessly explore the menu options, significantly contributing to user-friendliness and enhancing the entire user journey.

If you have any questions or need any assistance related to the plugin, please feel free to ask us questions. Our support team will be happy to help you.

Here are the Demo and Purchase links in case you need it.

The Super Floating and Fly Menu plugin offers two distinct menu configurations within a single plugin. This allows users to choose between the Floating Menu and the Fly Menu options, providing versatility and flexibility in menu design and functionality. The Floating Menu is a flexible tool that allows users to easily browse through menu items. It can serve as a stationary navigation feature, a social media menu, or a simplified one-page scroll, providing an improved user experience for website visitors. The Fly Menu is designed to enhance the navigation functionality of your website, providing an ultimate solution. With this, you can improve the user experience by implementing a dynamic and interactive menu that enhances navigation and makes it more engaging for visitors.

The installation of Super Floating and Fly Menu is a simple process of uploading a .zip file. Here is the Purchase/Download link if you need it.

Installing Super Floating and Fly Menu follows the standard plugin installation procedure, which you may already be familiar with. If not, here are the steps to guide you:

After making your purchase, go to Downloads by hovering over the right-top corner menu of the Codecanyon website.
Download the Super Floating and Fly Menu .zip file and save it to your computer.

Log in to your WordPress dashboard and navigate to Plugins > Add New.
Select Upload Plugin and then choose the plugin file you saved earlier.
Click Install Now.
Wait for the plugin to be installed on your server, and once the installation is complete, click the Activate Plugin button.
These steps should help you successfully install the Super Floating and Fly Menu on your website.

The plugin Super Floating and Fly Menu relies on the creation of a menu in order to function properly. Before you can configure the settings for the plugin, you will need to create a new menu. This can be done by following these steps:

Go to Appearance > Menu.
Click on Create a New Menu.
Give your menu a Title.
Click on Create Menu to save the changes made.

You can add more menus and sub-menus according to your needs.

Enable the Super Menu after creating the menu in WordPress.

In the Menus screen, select the menu you want to enable as the Super Menu.
Look for the Enable Super Menu option, usually located at the top or bottom of the menu settings.
Check the box or toggle the button to enable the Super Menu feature.
Save your changes.

Once you have enabled the Super Menu, the menu you created will have enhanced functionality and features beyond a regular menu on your WordPress site.

As mentioned before, this plugin has two configurations: Here you will learn how to adjust the settings of the Floating Menu. The Super Floating Menu is a versatile tool that enables users to effortlessly navigate through the menu items. It can function as a fixed navigation tool, social menu, or even a streamlined one-page scroll, offering enhanced ease of use for visitors.

To modify your website using the Floating Menu, the initial step is to choose the menu type. This guide will demonstrate how to designate the Floating menu as your preferred menu setting. To set up the Super Floating Menu:

Log in to your WordPress dashboard.
Go to Appearance > Menu.
You will be directed to the Add menu item page, which serves as the repository for all the Super Menu items you have created.
Select Floating Menu from the option.

This feature provides a selection of pre-designed templates that you can utilize to customize the appearance of your menu according to your preferences. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button located on the left panel under the Add Menu icon.
Typically, the Layout Tab will show up on its own. If it doesn’t, just give it a click to access the settings.

Select Template

Here you can select from various templates. There are 10 pre-built templates with additional :

Quarter Circular
Half Circular
Full Circular
and Navigation Indicators.

1) Quarter Circular

A quarter circular trigger button is a rounded button shaped like a quarter of a circle. It’s used in interfaces to prompt actions when tapped, making interaction with an app or website more intuitive and engaging.

2) Half Circular

A half-circular trigger button is a button that appears as half of a circle. It is frequently utilized in user interfaces to initiate actions when users interact with it, offering a visually appealing and intuitive way to engage with a website or application.

3) Full Circular

A complete circular trigger button is a fully circular button used in interfaces to prompt actions when clicked, providing a user-friendly way to interact with an app or website.

4) Navigation Indicator

A navigation indicator is a visual element used in user interfaces to provide guidance and show users their current location within a system. It helps users understand where they are with other sections or pages, making navigation more intuitive and user-friendly. Templates 1 through 7 offer standard options, which allow you to select from the various button shapes, including :

Square
Round
and Rounded Square

Whereas the templates from 8 to 10 have different settings that come with the extra added configurations.

Button Shapes

These templates allow you to choose from the button shapes. The available button shapes are:

Square
Round
Triangle
Rounded Square
Oval
Star
Rhombus
Pentagon
Hexagon
Rabbet
and Animating Blob

Animation

When the trigger button is clicked, it employs a distinct animation for both opening and closing, enhancing the user experience during the interaction with the trigger button. The available animations are :

One by One
- Fade
- Scale
- Fade and Scale
- Fade and Rotate
- Rotate and Scale
- Fade, Rotate, and Scale
All at Once
- Fade
- Scale
- Fade and Scale
- Fade and Rotate
- Rotate and Scale
- Fade, Rotate, and Scale

If you want to see the demo of the animations mentioned please click here.

Trigger Icon

A trigger icon is a symbolic button that you can tap or click to make something happen on a website. It’s like a little button that sets things in motion when you interact with it. Here you can choose from various trigger icons:

Font Icon
Image Icon
Hamburger Icon

1) Font Icon

In this section, you have the option to select from a diverse range of font icons for opening and closing. You can effortlessly choose from a wide array of trigger open and close icons that best suit your preferences.

2) Image Icon

This section enables you to customize the trigger open and close icon. You can easily upload images from your desktop, and the trigger button will be represented by the image you have selected.

3) Hamburger Icon

The hamburger icon is the three horizontal lines you often see in the corner of a website or app. When you click or tap on it, it opens up a menu with more options. There are 16 predefined hamburger icons that you can select from.

Hover Animation

This section allows you to choose the animation that takes effect when you hover over the button just before clicking on it. To set your hover animation:

Go to Dashboard > Appearance > Menu.
Find the Settings Button on the left-hand panel, just below the Add Menu icon. Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
Within the Hover Animation section, you can pick from a range of animations including:
1. Grow
2. Shrink
3. Pulse
4. Pulse Grow
5. Pulse Shrink
6. Push
7. Pop
8. Bounce In
9. Bounce Out
10. Tilt
11. Grow Tilt
12. Float
13. Sink
14. Bob
15. Hang
16. Skew
17. Skew Forward
18. Skew Backward
19. Buzz
20. Buzz Out
21. and numerous others
Click on the Save Changes button.

Idle Animation

The menu button, even when not in use, features subtle animations. These animations are designed to captivate users’ interest as they browse and shop. To adjust your idle button animation:

Go to Dashboard > Appearance > Menu.
Find the Settings Button on the left-hand panel, just below the Add Menu icon. Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
In the Idle Animation section, you get to make a captivating choice for how the trigger button behaves when it’s not actively in use.
You have several options to choose from for the idle animation:
1. Bounce
2. Flash
3. Pulse
4. Rubber Band
5. Shake X
6. Shake Y
7. Swing
8. Tada
9. Wobble
10. Jello
11. Heartbeat
Click on the Save Changes button.

Open Sub Items

The submenu items can be opened in two ways. You have the option to either click or hover to open the submenu items.

The general settings allow you to choose the menu position, and tweak the button sizes, and spaces between the buttons. Top configure this setting:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the General tab.

Here you can make changes under the following sections:

Menu Position

This section provides you with the option to select the menu placement and gives you the freedom to adjust its position by adding a pixel offset. This allows you to place the menu exactly where you desire. To configure the Menu position:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the General tab.
Choose the position that best suits your page settings from the following options:
1. Top Left
2. Top Right
3. Bottom Left
4. Bottom Middle
5. Bottom Right
6. Middle Left
7. or Middle Right
Moreover, you can fine-tune the exact placement of the menu position by adjusting the offset (in pixels) from your chosen position.
Click on the Save Changes button.

Button Sizes

To customize the menu button size

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the General tab.
In the Button Sizes section, you have the option to manually input the pixel values for the Button shape, as well as the Font/Image Size Icon.
Click on the Save Changes button.

Spacing Between Button

You have the option to include a small gap between your buttons. You can specify the pixel offset that you prefer for the buttons. This means you can determine the exact amount of space between each button by specifying the number of pixels you want to offset them.

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the General tab.
In the Button Spacing section, you can enter the pixel values manually to create space between the buttons according to your preference.
Click on the Save Changes button.

Z-Index

The z-index determines the stacking order of elements on a webpage, indicating which elements should be positioned in front of or behind others. You have the ability to set the index value based on your website’s layout requirements.

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the General tab.
Set the Z-index value.
Click on the Save Changes button.

This section particularly allows you to display the Floating Menu selectively on different pages. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Display tab.
Under the Hide in Screens section, select the options where you wish the Super Floating Menu to be hidden, whether it’s Desktop, Tablet, or Mobile.
Moreover, you can show/hide the Floating Menu in the selective pages.
Click on the Save Changes button.

With this setting, you can customize the button color, font family, and style, as well as configure options for the Tooltip, Trigger Button, and Circle Background.

Button

Within this section, you have the option to modify the background color, background color on hover, icon color, icon color on hover, and button shadow. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Design tab.
Under the Button Section, select the color of your linking for each section.
Click on the Save Changes button.

ToolTip

When you hover over the menu items, a text appears providing information. This is the tooltip that helps users understand where they are navigating. Here, you can adjust the background color and text as well. To configure this setting:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Design tab.
In the Tool Tip section, choose the color scheme for the Tooltip Background, including the background color when hovered over, as well as the icon color and its hover color.
Here you can choose the Font family/ style, Text transformation, text decoration, and tweak the font size as well.
Click on the Save Changes button.

Trigger Button

Trigger button colors can also be customized. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Design tab.
In the Trigger Button section, choose the color scheme for the Trigger Button Background, including the background color when hovered over, as well as the icon color and its hover color.
Click on the Save Changes button.

Now, you can simply import the templates that you like and make your e-commerce site like you want to.

Eliminate the need to repeatedly configure identical settings for multiple menus. Simply export the settings from one menu and seamlessly import them into another menu. Moreover, there are Prebuilt Templates that you can import. If you want to view the demo templates click here. Effortlessly download the menu settings with a single click. Then, effortlessly import them into any other menus on the same website or different websites. Streamline your workflow and save valuable time with the Super Floating & Flying Menu.

The import settings functionality in the Super Floating Menu allows for a seamless transition from the free Simple Floating Menu plugin to the premium version. By using this feature, you can swiftly import your previous menu settings, saving time and effort in configuring the menu from scratch. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Import From Free tab.
Choose the file you want to import from your device.
Click on the Save Changes button.

Note: The imported menu items will be registered as Custom Links, and no post/page/category will be imported. For more detail on how to import/ export templates from Simple Floating Menu to Super Flying Menu follow this article: Migrating from Simple Floating Menu to Super Floating Menu

Moreover, you can opt to personalize the configurations for each individual menu item within the Super Floating Menu. For this:

Go to Dashboard > Appearance > Menu.
Go to the Menu Structure.
Choose the item you wish to configure.

To make changes to each menu item:

To make specific changes, just select the menu item you want to modify, like clicking on the ‘Home’ item, for example. This action will allow you to access and adjust the settings for that particular item.
Once you’ve opened the item, hover your cursor over the menu to find the Super Menu Setting button. It’s located right next to the menu box you want to configure. Remember that the button will vanish if you move your cursor away from the menu.
Click on this setting to make any additional adjustments.

Note: Please be aware that the Super Menu Settings do not apply to the sub-menus. Let’s see what changes you can make for each menu:

General

The general setting allows you to choose the menu icon type and make further changes in the tooltip button as well.

Menu Icon

The menu icon allows you to choose the menu icon type. The available options are:

Font Icon
Image Icon

i) Font Icon

Within the font icon section, you have the option to select from a wide range of icons for the menu items you are customizing. The icons are further divided into sections for your convenience:

Font Icon
Close Icon
Font Awesome
Essential Icon
Material Icon
Elegant Icon

When picking an icon for the menu, think about how it will represent the menu item. If you’re having trouble finding the right icon, utilize the search field. Input a keyword related to the menu item, like “Home,” and it will display the home icon specifically for you to select.

ii) Image Icon

The image icon feature enables you to upload your own custom icon from your desktop. Just choose the menu icon for the item you’re working on and upload it in this section. After the upload, the menu will display the icon you uploaded.

Tool Tip Text

When you hover over the menu items, a text appears providing information. This is the tooltip that helps users understand where they are navigating. This section allows you to choose the tooltip text.

Design

The design settings enable you to select the background color for the text and tooltip, as well as the color of the icon.

Button

Within this section, you have the option to modify the background color, background color on hover, icon color, and icon color on hover for the button. Choose the appropriate color for each as per your preference.

ToolTip

Within this section, you have the option to modify the background color, background color on hover, icon color, and icon color on hover for the ToolTip. Choose the appropriate color for each as per your preference. Note: When using the super menu setting, please be aware that any changes you make will exclusively impact the main menu. Sub-menus, however, will remain unaffected by these adjustments.

The other configuration of this plugin is the Fly Menu. A fly menu is a stylish menu type popular among the latest trends. It displays your web content in the sidebar with beautiful animation effects to provide the best navigation experience. This provides you with the choice to display the side panel menu in side/skew orientation, full-screen mode, and also includes a navigation indicator.

To set up the Super Fly Menu:

Log in to your WordPress dashboard.
Navigate to the Super Floating and Fly Menu option in the left-hand menu of your dashboard.
Go to Appearance > Menu.
You’ll arrive at the Add menu item page, where all your created Super Menu items are stored.
Select Fly Menu from the option.

You can configure the Super Fly Menu settings hereafter. The settings you can make changes:

Layout
Trigger Button
Content Panel
Content
Display
Design
Import/ Export

This setting allows you to choose the menu type and make necessary changes. To configure the settings:

Go to Dashboard > Appearance > Menu.
Find the Settings Button on the left-hand panel, just below the Add Menu icon. Click on the Settings Button to continue.
Typically, the Layout Tab will show up on its own. If it doesn’t, just give it a click to access the settings.

Select the Menu Type

Here you can choose to select the type of menu that suits your preference. The options available are as:

Side Panel Menu
Skew Side Panel Menu
Full-Screen Menu
Nav Icon Menu

1/2) Side Panel Menu/Skew Side Panel Menu

The Skew/ Side Panel Menu appears on the side of the screen. The trigger button allows the menu panel to appear, which can be positioned at different spots as needed. Additionally, you can customize the side/skew panel by changing settings such as how the sub-menus appear, how the menu behaves when you hover over it, the type of overlay, whether the main menu can be clicked, the icons used to show and hide sub-menus, and the layering of the panel over other elements.

3) Full-Screen Menu

The title of the menu suggests that it will fill the entire screen, and this happens when you click the trigger button. Moreover, you can choose the fullscreen columns, sub-menu open animation, menu hover animation, and set the Z-index.

4) Nav Icon Menu

The Nav Icon menu is a bordered menu that appears on the side of the screen as you scroll, without requiring a separate trigger button. The Nav Icon menu comes with the following set of features:

Sleek Bordered Design: It boasts a neat, well-defined look with borders that add a touch of elegance to the overall appearance.
Seamless Auto-Display: Without the need for a separate button, the menu smoothly appears on the side of the screen, ensuring an effortless and unobtrusive user experience.
Intelligent Responsive Behavior: It cleverly adapts to your scrolling, making sure it stays accessible and within reach without obstructing your view, allowing for convenient navigation at all times.

Once you have selected the menu type let’s configure the settings from thereon.

Sub Menu Open Animation

A sub-menu animation refers to the visual effect or movement that occurs when a sub-menu, which is a secondary menu within a main menu, appears or disappears on the screen. This animation adds an aesthetic and interactive element to the user experience, making the transition between different menu levels more visually appealing and engaging. For instance, you can decide if it smoothly slides into view, appears suddenly, or perhaps fades in gradually. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
From the Select Menu Type choose the Skew side panel menu.
Choose the sub menu animation. The options available are:
1. Slide Up/ Down
2. Flip
3. Translate X
4. Translate Y
5. Zoom In
6. and Zoom Out
Click on the Save Changes button.

Menu Hover Animation

This section allows you to choose the animation that takes effect when you hover over the trigger button just before clicking on it. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
From the Menu Hover Animation section select the animation that you prefer. The options available are:
1. Side Border
2. Border Bottom
3. and Liner Slide
Click on the Save Changes button.

Overlay Type

The overlay option lets you decide how the background looks when the menu is open. You can select a Colored Background, Blurred Background, or even opt for no overlay. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
Select the Overlay type.
Click on the Save Changes button.

Clickable Parent Menu

The clickable Parent Menu setting enables users to click on main menu items on a website, leading to either a page or submenu options. Once the submenu appears, users can interact with it by clicking the toggle button on the side, usually represented by an arrow or plus/minus sign.

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
Enable/Disable the Clickable Parent menu.
Click on the Save Changes button.

Close the Panel on Clicking Outside

If you wish to eliminate the extra click required to close the menu panel, you can enable this setting, allowing the panel to close when you click anywhere outside of the menu.

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
Enable/ Disable if you want to close the menu panel when clicked outside.
Click on the Save Changes button.

Freeze the Scroll Bar

This setting gives you the ability to immobilize the scrollbar when the menu panel is open. This effectively prevents any unintended scrolling of the website’s main panel while you’re hovering on the menu.

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
Enable/Disable the Freeze the Scroll Bar settings.
Click on the Save Changes button.

Sub Menu Toggle Icons

You have the option to modify the icons for the sub-menu toggle here. Additionally, you can customize both the toggle for opening and closing the sub-menu.

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
Choose the appropriate icons for each open and close toggle.
Click on the Save Changes button.

Z-Index

Z-index determines the priority of elements on a webpage, specifying which elements should appear in front of or behind others. You can set the index value according to your website layout.

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
Set the Z-index value.
Click on the Save Changes button.

Inclination Direction

You can also choose the inclination direction of the Skew Side Panel menu. To configure the settings:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
From the Select Menu Type, choose the Skew side panel menu.
Choose the inclination direction: Forward or Backward.
Click on the Save Changes button.

Note: This setting is only applicable to the Skew Side Panel Menu

Inclination Angle

Furthermore, you can choose to select the inclination angle of the Menu. For this:

Go to Dashboard > Appearance > Menu.
Click on the Settings Button to continue.
The settings page will appear. Click on the Layout tab.
From the select menu type choose the Skew side panel menu.
Tweak the Inclination Angle.
Click on the Save Changes button.

Note: This setting is only applicable to the Skew Side Panel Menu

Trigger Button Type

A trigger icon is a tiny symbol that you can tap or click to make something happen on a website. It’s like a little button that sets things in motion when you interact with it. Here you can choose from various trigger icons:

Font Icon
Image Icon
Hamburger Icon