create a responsive wordpress menu in allwebmenus pro
Post on 13-May-2015
340 Views
Preview:
DESCRIPTION
TRANSCRIPT
How to create a Responsive WordPress menu in AllWebMenus Pro
In this presentation we will see how we can create a Responsive WordPress menu using AllWebMenus Pro
and the AllWebMenus WP plugin.
www.likno.com
The responsive menu feature was first included in AllWebMenus Pro v5.3.902 (January 2013).
To download the latest AllWebMenus version go to: http://www.likno.com/download.html
www.likno.com
AllWebMenus Pro has a WordPress plugin to help you create WordPress menus with ease in AllWebMenus Pro.
The AllWebMenus WordPress Menu add-in & plugin combination is designed to transfer information from your blog (such as posts, pages, etc.) into the AllWebMenus application and then create stylish, feature-rich navigation menus based on those posts, pages, etc.!
Apart from creating menu items derived from your blog's structure, you can also fully customize your menus by adding your own non-WordPress menu items with external or internal links, html-rich content, colors, borders, effects, designs of your choice and many more!
www.likno.com
You can download AllWebMenus Pro: http://www.likno.com/download.html
You can download AllWebMenus Pro WordPress plugin: http://www.likno.com/addins/wordpress-menu.html
You can download WordPress: https://wordpress.org/download/
www.likno.com
Login to your WordPress and go to Plugins -> AllWebMenus.Create a new menu and give it a name.Then, you need to select the Menu Structure. You can populate the menu either with an existing WordPress menu or by choosing Pages, Posts, Categories etc.For this presentation, we select to populate the menu from an existing menu.
www.likno.com
Then, select the Menu Type.
We select “Static” Menu Type as we want the 2nd menu version to be a menu item that clicking on it will display the whole menu as a sliding menu.
So, we cannot have Dynamic or Mixed type as we need to manually add the new menu item in AllWebMenus Pro.
www.likno.com
Last, but not least, we select the Menu Positioning.
Then, hit the Publish menu (also saves changes in settings).
www.likno.com
Select the Generated “Menu Structure Code” and Copy that.
www.likno.com
Open AllWebMenus Pro.
A welcome screen appears, choose “Create a new menu project” and then click on “Continue”.
A new window is displayed, in this window you can choose the menu theme you would like to start from. After you have selected the desired theme click on “Select”.
www.likno.com
Go to the main menu and click on “Add-ins” -> “WordPress Menu” -> “Import/Update Menu Structure from WordPress”.
www.likno.com
This popup window will appear, paste the menu structure code (you previously copied from AllWebMenus WordPress plugin) and click on “Next”.
www.likno.com
Click on “Import Menu Structure (and replace existing)”.
www.likno.com
The Menu Structure seems like in the following screenshot.
The “W” icon in front of each menu item means that this is a menu item imported from WordPress.
www.likno.com
We want our menu to be responsive, so we need to create the menu versions we need.
Go to Global Properties -> Responsive Menu -> Select Yes -> Select 2 menu versions and change the width to 479.
So, the menu version 1 will be displayed for screens with width greater than 479px and menu version 2 will be displayed in screens with smaller than 478px width.
www.likno.com
We select Version 2 from the toolbar.We notice that the Menu Structure is copied by the version 1 menu structure.
www.likno.com
Now, it’s time to add a new menu item in Menu Structure of menu version 2, so that the whole current menu structure will fit in it.
This way, we will create the effect we need for the responsive version of our menu.
www.likno.com
www.likno.com
Right click on Main Menu Group and select Add Item.
When you create it the following dialog will appear, write the name you want and hit the right arrow to copy it in all menu states.
www.likno.com
Select the item we just added and click on the up arrow. This will move this item upper in the structure.
Alternatively, you can right click on it and select Move Item Up.
www.likno.com
Next step is to move the whole menu structure inside that new MENU item.
www.likno.com
We select each of the main menu items and click on the right arrow to move them under the MENU item.
www.likno.com
The structure now looks like in the following screenshot.
The whole menu structure we previously had, is inside the new MENU item we added. As a main menu item we only have the MENU item and the actual menu is inside this, as a submenu.
We need to change the Menu Type to Sliding.Click on Menu Type and select Sliding.
www.likno.com
We need to also define as Sliding Menu types the other levels of our menu.In Style Editor, we select the Sub Groups Style and click on Type, select the Sliding menu type and click on Refresh.We do the same process for the Sub Groups Style+.
www.likno.com
Let’s give some minimum width to our menu version 2 so that it takes the full width.
Go to Style Editor -> Main Group Style -> Minimum Width and type 478 (px).
www.likno.com
You are free to make any other customization you need.
The menu version 1 looks like:
www.likno.com
The menu version 2 looks like (MENU appear first and on click or mouse over the users will see the rest of the menu):
Finally, you can set the Menu Positioning for your menu versions.
In case all the versions will have the same menu positioning, you can set it in one menu version and then Clone the positioning to the other versions, as well.
www.likno.com
Compile the menu project.
Go to Tools -> Compile WordPress Menu…
www.likno.com
Finally, switch back to your WordPress Admin page (in AllWebMenus Plugin).
Choose the zip file produced and click Upload ZIP file.
The menu will be published and act as responsive according to your settings.
www.likno.com
top related