# WP Smart Fullscreen Menu

This plugin allows you to easily create complex and powerful smart menus to your Wordpress website. By Loopus

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Item Support
Credits

Author: | Loopus
Contact: | http://codecanyon.net/user/loopus#contact

Author URL: | http://www.loopus-plugins.com/
Item URL: | https://codecanyon.net/item/wp-smart-fullscreen-menu/19619995/

# Installation How to Install the plugin

### 1. Install Plugin

Here's a brief information about how to install this plugin

1.1) Upload the plugin

Go to your Wordpress website backend and click the "Plugins" menu link.
Click the button "Add new", then the button "Upload plugin".
Select the file "WP_SmartFullscreenMenu.zip" then click the button "Install now" .

1.2) Activate plugin

Login into your Wordpress backend, then go on the "Plugins" page. You should see "WP Smart Fullscreen Menu" in the list. Click on "Activate", under the title of the plugin.

# Use How to use the plugin

### 2. Use the plugin

Here's a brief information about how to use this plugin

2.1) Create a menu

Click on the "Smart Menu" menu link to open the WP Smart Fullscreen Menu backend.

### Steps manager

The steps manager allows you to visually create, edit and link your steps, to easily create a complex menu and strongly help your customers.

### Menu settings

Under the steps manager, you can find the settings panel of your menu .
Freely change settings and colors of your menu clicking on the different tabs and editing options.
Simply move your cursor over an option to see a tooltip explaining how works this option.

2.2) Create a step

On the steps manager of your menu, click on the "Add a new step" button.
You will see a new step named "My Step" at center of the steps manager.

Moving your cursor over a step to see the action icons, allowing you to edit, duplicate or remove it. You can define a step as first step clicking on the "flag" icon.
Click on the pencil icon of the step to edit it :

On the step panel, you can edit the title of the step and choose to show this title in the frontend menu or not.
On the items list, you can freely manage the items contained in the selected step.

2.3) Create an item

Each steps of the menu is composed of items. To add a new item, edit a step from the steps manager, then click the button "Add a new item".
Here is the item panel :

Simply select the wanted type of the current item to show/hide the corresponding options on the item panel.
To see more details on each option, simply move your cursor hover it to read the explanation in a tooltip.

You can assign an action to each item except the titles. This action will be triggered after the user will interact with this item.
Here are the different available actions :

- Go to the next step : this action must be used on an item of the step to allow the user to call the next step. The plugin will verify all links starting from the current step and will select the one having its conditions filled. If there is no next step, the menu is closed.
- Open a page : fill the "URL" option to open a specific page when the user clicks this item
- Show an element of the website : use the "Target element" option to visually select any element of your website. The selected element will be highlighted and the page will scroll to it when the action will be launched.
- Execute JS code : fill your own javascript code in the "JS code to execute" option. This code will be executed when the action will be launched.

2.4) Create a link

When you have created several steps, you need to create links to define the path of the user depending on his answers and interactions.
Move the cursor over the first step, and click on the "link" icon to start a new link.
Then click on a second step to finish the link.
Click on the pencil icon you can see at center of the link to edit it :

When the user clicks an item having the action "Go to the next step", the plugin checks all the links starting from the current step, and select one that all its conditions filled.

To create a condition, simply click the "Add a condition" button. You will see a new condition displayed in the list.
Select the target item using the first dropdown, then the wanted condition in the second .
Simply click the cross icon to remove a condition .

If you want to use a different first step depending on the current page, simply leave the start step empty of items and use links with condition "If the current page is" from it to call the wanted next step depending on the current url.
A step is always skipped if it contains no item.

2.5) Integration

There are two ways to easily integrate your menu on your website. You can find them editing the option "Integration method" in the "Settings" backend tab.

- Fixed button : It will show a button in the defined corner of the screen. You can freely change the icon and the color of the button from the "Design" tab. The menu will be displayed when the user will click this button.
- Existing element : Use the "Existing button" option to visually select any existing element of your website. The menu will be displayed when the user will click this element.

2.6) Import / export data

If you work on a development server, you will need to transfer your menus to the final website once your website finished.
To do that, simply open the menus list clicking on the "Smart menu" link, then click on the "Export menu" button to download a .json file containing all the required data.
Then, on your final website, click the "Import menu" button and select the previously exported file to import your data.

2.7) MailChimp / GetResponse Support

You can use textfields in your menu to collect informations and send them as a new contact to your MailChimp or GetResponse list.

Here is the way to do that :

- Create "Textfields" items in your steps and fill their option "Type of information" to allow the plugin to send the correct informations to your list
- Activate the "Send a contact to Mailchimp" or "Send a contact to GetResponse" option in the "Settings" tab, fill the corresponding API key and select the target list
- Now you need to activate the option "Send contact on change ?" on an item of your menu to define when the contact will be sent (if the email field at least is filled).

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugins on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

### Credits

### JavaScript & CSS

1. jQuery
2. jQuery UI
3. Bootstrap 3
4. Bootstrap Flat UI