26
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.c om
| Date post: | 21-Dec-2014 |
| Category: |
Software |
| Upload: | likno-software |
| View: | 164 times |
| Download: | 0 times |
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
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
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
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
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 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
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.
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.
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
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
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
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
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).
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.
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.
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
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 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.
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 Image and Text together.
www.likno.com
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
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 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
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
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
