Create a Responsive Menu in AllWebMenus Pro
-
Upload
likno-software -
Category
Software
-
view
166 -
download
0
description
Transcript of Create a Responsive Menu in AllWebMenus Pro
![Page 1: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/1.jpg)
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
![Page 2: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/2.jpg)
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
![Page 3: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/3.jpg)
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
![Page 4: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/4.jpg)
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
![Page 5: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/5.jpg)
We create the menu structure and set any styling properties we might want.
www.likno.com
![Page 6: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/6.jpg)
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
![Page 7: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/7.jpg)
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.
![Page 8: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/8.jpg)
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.
![Page 9: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/9.jpg)
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
![Page 10: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/10.jpg)
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
![Page 11: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/11.jpg)
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
![Page 12: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/12.jpg)
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
![Page 13: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/13.jpg)
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).
![Page 14: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/14.jpg)
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.
![Page 15: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/15.jpg)
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.
![Page 16: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/16.jpg)
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
![Page 17: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/17.jpg)
In order to remove the header we go to Style Editor -> Main Group Style -> Has Header and select No.
www.likno.com
![Page 18: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/18.jpg)
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.
![Page 19: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/19.jpg)
In order to have a menu image icon we can select the Menu Icon item and click on Image.
www.likno.com
![Page 20: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/20.jpg)
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
![Page 21: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/21.jpg)
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
![Page 22: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/22.jpg)
We select “No Image”.
www.likno.com
![Page 23: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/23.jpg)
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
![Page 24: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/24.jpg)
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
![Page 25: Create a Responsive Menu in AllWebMenus Pro](https://reader035.fdocuments.net/reader035/viewer/2022070303/549a3d70ac795987318b4f0b/html5/thumbnails/25.jpg)
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