Create a Responsive Menu in AllWebMenus Pro

  • 165 views
Uploaded on

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

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.

More in: Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
165
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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. We create the menu structure and set any styling properties we might want. www.likno.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. In order to remove the header we go to Style Editor -> Main Group Style -> Has Header and select No. www.likno.com
  • 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. In order to have a menu image icon we can select the Menu Icon item and click on Image. www.likno.com
  • 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. 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. We select “No Image”. www.likno.com
  • 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. 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. 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. Visit www.likno.com for more information www.likno.com