How to create a Responsive
WordPress menu in AllWebMenus Pro
In this presentation we will see how we can create a
Responsi...
The responsive menu feature was first included in AllWebMenus Pro v5.3.902
(January 2013).
To download the latest AllWebMe...
AllWebMenus Pro has a WordPress plugin to help you create WordPress menus with
ease in AllWebMenus Pro.
The AllWebMenus Wo...
You can download AllWebMenus Pro: http://www.likno.com/download.html
You can download AllWebMenus Pro WordPress plugin:
ht...
Login to your WordPress and go to Plugins -> AllWebMenus.
Create a new menu and give it a name.
Then, you need to select t...
Then, select the Menu Type.
We select “Static” Menu Type as we want the 2nd menu version to be a menu
item that clicking o...
Last, but not least, we select the Menu Positioning.
Then, hit the Publish menu (also saves changes in settings).
www.likn...
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 selec...
Go to the main menu and click on “Add-ins” -> “WordPress Menu” ->
“Import/Update Menu Structure from WordPress”.
www.likno...
This popup window will appear, paste the menu structure code (you
previously copied from AllWebMenus WordPress plugin) and...
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 me...
We want our menu to be responsive, so we need to create the menu versions we need.
Go to Global Properties -> Responsive M...
We select Version 2 from the toolbar.
We notice that the Menu Structure is copied by the version 1 menu structure.
www.lik...
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 f...
www.likno.com
Right click on Main Menu Group and select Add Item.
When you create it the following dialog will appear,
wri...
www.likno.com
Select the item we just added and click on the
up arrow. This will move this item upper in the
structure.
Al...
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 ins...
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...
Let’s give some minimum width to our menu version 2 so that it takes the full width.
Go to Style Editor -> Main Group Styl...
You are free to make any other customization you need.
The menu version 1 looks like:
www.likno.com
The menu version 2 loo...
Finally, you can set the Menu Positioning for your menu versions.
In case all the versions will have the same menu positio...
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 Z...
Visit
www.likno.com
for more information
www.likno.com
Upcoming SlideShare
Loading in …5
×

Create a Responsive WordPress menu in AllWebMenus Pro

622 views

Published on

In this presentation, it is described how a Responsive WordPress menu can be created, by using AllWebMenus Pro and the AllWebMenus WP Plugin.

Nowadays, Responsive Design is very popular as it is a great way for websites to be viewed perfectly by all the devices (PCs, tablets, smartphones).

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
622
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Create a Responsive WordPress menu in AllWebMenus Pro

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. Last, but not least, we select the Menu Positioning. Then, hit the Publish menu (also saves changes in settings). www.likno.com
  8. 8. Select the Generated “Menu Structure Code” and Copy that. www.likno.com
  9. 9. Open AllWebMenus Pro. A welcome screen appears, choose “Create a new menu project” and then click on “Continue”.
  10. 10. 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
  11. 11. Go to the main menu and click on “Add-ins” -> “WordPress Menu” -> “Import/Update Menu Structure from WordPress”. www.likno.com
  12. 12. This popup window will appear, paste the menu structure code (you previously copied from AllWebMenus WordPress plugin) and click on “Next”. www.likno.com
  13. 13. Click on “Import Menu Structure (and replace existing)”. www.likno.com
  14. 14. 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
  15. 15. 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
  16. 16. We select Version 2 from the toolbar. We notice that the Menu Structure is copied by the version 1 menu structure. www.likno.com
  17. 17. 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
  18. 18. 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.
  19. 19. 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.
  20. 20. www.likno.com Next step is to move the whole menu structure inside that new MENU item.
  21. 21. www.likno.com We select each of the main menu items and click on the right arrow to move them under the MENU item.
  22. 22. 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.
  23. 23. We need to change the Menu Type to Sliding. Click on Menu Type and select Sliding. www.likno.com
  24. 24. 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
  25. 25. 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
  26. 26. 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):
  27. 27. 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
  28. 28. Compile the menu project. Go to Tools -> Compile WordPress Menu… www.likno.com
  29. 29. 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
  30. 30. Visit www.likno.com for more information www.likno.com

×