How to create a Responsive
menu in AllWebMenus Pro
In this presentation we will see how we can
create a Responsive menu in...
Responsive menu feature was first included in AllWebMenus v5.3.902.
Make sure that you have version 5.3.902 or newer.
In c...
Through the Responsive Menu feature you can specify the menu to show a different
version of itself depending on screen siz...
Open AllWebMenus Pro.
Create a new Menu Project.
Choose the Theme you would like to start with.
In this presentation we ar...
We create the menu structure and set any styling properties we might want.
www.likno.com
Once we have created the menu the way we wanted, it’s time to make it act as
Responsive Menu, thus to create the other men...
After selecting the responsive versions, you will notice in the toolbar area
that Responsive Menu with the versions has be...
We can select to Clone the Content, the Styling the Positioning or All the above.
www.likno.com
We can also select what is...
In this presentation we are going to choose All,
as Source version the version 1,
as the Destination version, the versions...
Now we have all 4 menu versions identical.
The menu version 1 is a Horizontal Drop Down menu.
We want menu version 2, 3 an...
Select menu Version 2 and then go to Style Editor -> Main Group Style -> Type ->
select Sliding.
Then select Sub Groups St...
However, we want to have a menu icon appear in menu versions 2, 3 and 4.
When the user clicks on it then our sliding menu ...
But, we need to have it as a submenu item inside of the Menu Icon item.
www.likno.com
So, we select the Main Item 1, right...
www.likno.com
For the Main Item 2 we just right click and
select Cut Item.
Then, we right click the Main Item 1 and select...
www.likno.com
For the Main Item 3 we just right click and
select Cut Item.
Then, we right click the Main Item 1 and select...
Now, our menu looks like in the screenshot. We have moved all our menu structure inside
a main menu item that will act as ...
In order to remove the header we go to Style Editor -> Main Group Style ->
Has Header and select No.
www.likno.com
In order not to re-create the menu structure for the version 3 and 4, we can use the
Clone feature.
So, we hit Clone and s...
In order to have a menu image icon we can select the Menu Icon item and
click on Image.
www.likno.com
We select the image we want to use and where we want to place it.
We can also have only the image to appear instead of Ima...
In order to remove the “Has Submenu” icon that appears on the right of the
menu item, we select the Menu Icon item and cli...
We select “No Image”.
www.likno.com
We can set a minimum width for the menu so that it looks better on the set screen sizes.
Go to Style Editor -> Main Group ...
Finally, you can set the Menu Positioning.
In case all the versions will have the same menu positioning, you can set it in...
The menu is ready. You can Compile it and Link it to your pages.
You can see the menu live in action as well as download a...
Visit
www.likno.com
for more information
www.likno.com
Upcoming SlideShare
Loading in …5
×

Create a Responsive Menu in AllWebMenus Pro

676 views

Published on

In this presentation we are showing the process to create a Responsive menu (with 4 menu versions) in AllWebMenus Pro.

Responsive Design is extremely famous and very useful when you want your users to have the best possible experience when accessing your website by any device (PCs, tablets, smartphones).

So, with AllWebMenus Pro you are able to create Responsive Menus that will work perfectly with the rest of your design. The most important is that you can achieve this without writing any code and the result will work in all devices and browsers.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Create a Responsive Menu in AllWebMenus Pro

  1. 1. How to create a Responsive menu in AllWebMenus Pro In this presentation we will see how we can create a Responsive menu in AllWebMenus Pro, which is going to have 4 versions. www.likno.com
  2. 2. Responsive menu feature was first included in AllWebMenus v5.3.902. Make sure that you have version 5.3.902 or newer. In case you want to download the latest version of AllWebMenus go to: http://www.likno.com/download.html www.likno.com
  3. 3. Through the Responsive Menu feature you can specify the menu to show a different version of itself depending on screen size (width). This is very useful when your website uses a responsive web design (RWD) layout. Each different responsive menu version of the same menu project may have different content, styling or page positioning (at any combination). You can find more information here: http://www.likno.com/blog/responsive-menu/4038/ www.likno.com
  4. 4. Open AllWebMenus Pro. Create a new Menu Project. Choose the Theme you would like to start with. In this presentation we are going to choose the “Above Green Line” theme. www.likno.com
  5. 5. We create the menu structure and set any styling properties we might want. www.likno.com
  6. 6. Once we have created the menu the way we wanted, it’s time to make it act as Responsive Menu, thus to create the other menu versions. Click on Global Properties -> Responsive Menu -> select Yes and choose how many versions you want. In this presentation we are going to choose 4 versions. We do not need to change the width values as they are the default for PCs, tablets (portrait/landscape), smartphones (portrait/landscape). Note, in case you need some other width values, you are able to edit them and insert the values you need. www.likno.com
  7. 7. After selecting the responsive versions, you will notice in the toolbar area that Responsive Menu with the versions has been displayed. www.likno.com Mouse over this area and a tooltip will appear with options “Edit settings” and “Clone values”. Click on Clone values in order to clone the values from version1 we created to the other versions.
  8. 8. We can select to Clone the Content, the Styling the Positioning or All the above. www.likno.com We can also select what is the source version and what is the destination version.
  9. 9. In this presentation we are going to choose All, as Source version the version 1, as the Destination version, the versions 2, 3 and 4. www.likno.com
  10. 10. Now we have all 4 menu versions identical. The menu version 1 is a Horizontal Drop Down menu. We want menu version 2, 3 and 4 to be vertical sliding. On the next slide we are going to see how we can make them sliding. www.likno.com
  11. 11. Select menu Version 2 and then go to Style Editor -> Main Group Style -> Type -> select Sliding. Then select Sub Groups Style and Sub Groups Style+ and do the same process. www.likno.com
  12. 12. However, we want to have a menu icon appear in menu versions 2, 3 and 4. When the user clicks on it then our sliding menu should appear. We select the Main Menu Group in Menu Structure, we right click and select Add Item. Then, we select the Main Item 1, right click and select Cut Item. We select Menu Icon item (we previously created), right click and select Paste Item after Selected. www.likno.com
  13. 13. But, we need to have it as a submenu item inside of the Menu Icon item. www.likno.com So, we select the Main Item 1, right click and select Move Item Right (as child of previous item).
  14. 14. www.likno.com For the Main Item 2 we just right click and select Cut Item. Then, we right click the Main Item 1 and select Paste Item – After Selected.
  15. 15. www.likno.com For the Main Item 3 we just right click and select Cut Item. Then, we right click the Main Item 1 and select Paste Item – After Selected.
  16. 16. Now, our menu looks like in the screenshot. We have moved all our menu structure inside a main menu item that will act as the menu icon element. Still, we have to remove the menu header, as we do not need it for the versions 2, 3 and 4. www.likno.com
  17. 17. In order to remove the header we go to Style Editor -> Main Group Style -> Has Header and select No. www.likno.com
  18. 18. In order not to re-create the menu structure for the version 3 and 4, we can use the Clone feature. So, we hit Clone and select to clone the Content from version 2 to versions 3 and 4. www.likno.com We can also Clone the Styling from responsive version 2 to versions 3 and 4.
  19. 19. In order to have a menu image icon we can select the Menu Icon item and click on Image. www.likno.com
  20. 20. We select the image we want to use and where we want to place it. We can also have only the image to appear instead of Image and Text together. www.likno.com
  21. 21. In order to remove the “Has Submenu” icon that appears on the right of the menu item, we select the Menu Icon item and click on Has Submenu Image property. www.likno.com
  22. 22. We select “No Image”. www.likno.com
  23. 23. We can set a minimum width for the menu so that it looks better on the set screen sizes. Go to Style Editor -> Main Group Style and set the minimum width to the minimum width value for each of your responsive menu versions. For example in menu version 2 you can insert 768 (px). www.likno.com
  24. 24. Finally, you can set the Menu Positioning. 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 version, as well. www.likno.com
  25. 25. The menu is ready. You can Compile it and Link it to your pages. You can see the menu live in action as well as download and edit it in your AllWebMenus Pro: http://www.likno.com/examples/responsive-menu-above-green-line-resize- page.html www.likno.com
  26. 26. Visit www.likno.com for more information www.likno.com

×