Download - How to create a JavaScript menu
![Page 1: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/1.jpg)
How to create a JavaScript menu in AllWebMenus Pro
www.likno.comAllWebMenus Pro
![Page 2: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/2.jpg)
AllWebMenus Pro is a powerful WYSIWYG application for creating stunning JavaScript/CSS menus. It requires no coding skills as the application handles all the code needed.
www.likno.comAllWebMenus Pro
![Page 3: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/3.jpg)
You can choose from among a wide range of menu themes/templates/examples that come with the application to create your own menus.
www.likno.comAllWebMenus Pro
![Page 4: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/4.jpg)
With AllWebMenus Pro you can create any type of menu, such as horizontal drop down menus, vertical menus, sliding menus, responsive menus, mega menus, popup menus, floating menus and many more.
www.likno.comAllWebMenus Pro
![Page 5: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/5.jpg)
All the menus produced by AllWebMenus Pro are going to perfectly work in all browsers, platforms and devices.
www.likno.com
They work alike in all Editors (like DreamWeaver, Microsoft Expression Web, Net Objects Fusion, CoffeeCup and more) and all CMS (such as WordPress, Joomla, Drupal, DotNetNuke and more).
AllWebMenus Pro
![Page 6: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/6.jpg)
In this presentation we are going to show you how you can create a basic horizontal drop down JavaScript menu in AllWebMenus Pro.
www.likno.comAllWebMenus Pro
![Page 7: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/7.jpg)
Open AllWebMenus Pro.In the splash screen that appears, click on Create a new menu project and click Continue.
www.likno.comAllWebMenus Pro
![Page 8: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/8.jpg)
On the next screen select any menu theme you want (for this presentation we have selected the “Flat Floral” menu theme) and click Select.
www.likno.com
![Page 9: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/9.jpg)
First, let’s save our menu project. You can go on the menu File -> Save as or just click Ctrl + S. Select the folder where you want to save your menu project, give it a name and save it.
www.likno.comAllWebMenus Pro
![Page 10: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/10.jpg)
Let’s change our menu structure.
We are going to create the following menu structure:
HomeServices
- Development - Design - Web Design - Graphics Design - Digital Marketing
About UsContact Us
www.likno.comAllWebMenus Pro
![Page 11: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/11.jpg)
In Menu Editor we click on the first menu item and then we click on Text property. We insert “Home” and we click on the right arrow shown below so we can transfer that value to the Mouse Over and Mouse Click states, as well.
www.likno.comAllWebMenus Pro
![Page 12: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/12.jpg)
Then, we select the Main Item 2 and we write “Services” in the Text property, we click on the right arrow so we can transfer that value to all the states.We do the same steps for all the main items (Home, Services, About Us, Contact Us).
www.likno.comAllWebMenus Pro
![Page 13: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/13.jpg)
In our default menu structure we only have 3 main menu items. But for this example we need a forth main menu item. So, we select the last menu item (About Us), we click on the “plus” icon and then click Add Item – After Select. This way we create a new main menu item right after the “About Us” menu item.
www.likno.comAllWebMenus Pro
![Page 14: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/14.jpg)
For the submenu items we select the Sub Item 1 first and on the Text property we write “Development”. We do the same for all our sub menu items.
www.likno.comAllWebMenus Pro
![Page 15: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/15.jpg)
For the third level submenu items we select the Sub Items inside the Submenu Group+ and we change their Text values. So, for the “Web Design” item we select the Sub Item 4 and we change its Text value to “Web Design”.
www.likno.comAllWebMenus Pro
![Page 16: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/16.jpg)
Finishing our menu structure we notice that we do not need the Sub Item 6 that has been left. Select it and click on the “minus” icon as shown below (or simply hit Del) to remove that item from the menu structure.
www.likno.comAllWebMenus Pro
![Page 17: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/17.jpg)
The menu structure now looks the way we wanted. In the Menu Preview pane we can see the way that menu looks like.
www.likno.comAllWebMenus Pro
![Page 18: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/18.jpg)
Now, let’s customize its styling. Of course, if you don’t want to change any values you can leave it as is. In general, you can change the Styling properties in Style Editor Tab.
www.likno.comAllWebMenus Pro
![Page 19: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/19.jpg)
Now, let’s change the Background Color of the Main Menu Items.Go to Style Editor -> Main Items Style -> Background Color and click on it.Select the color you want and click OK.
www.likno.comAllWebMenus Pro
![Page 20: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/20.jpg)
The Menu looks like below. We notice that still there is a red color around the main menu items and we do not want that. This comes from the Main Group.
www.likno.comAllWebMenus Pro
![Page 21: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/21.jpg)
Go to the Style Editor -> Main Group Style -> Background Color and select “None (transparent background)”.
www.likno.comAllWebMenus Pro
![Page 22: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/22.jpg)
Go to the Style Editor -> Main Group Style -> Padding and set it to “0” in order to remove the extra padding.
www.likno.comAllWebMenus Pro
![Page 23: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/23.jpg)
Now, we need to choose the Menu Positioning. Click on Menu Positioning -> select Relative to an Element, leave the Default ID, set the Element anchor and Menu Anchor.
www.likno.comAllWebMenus Pro
![Page 24: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/24.jpg)
We are ready to compile our menu project. Click on Compile and the Project Properties window will appear. Select your Site_Root folder, the Compiled menu name (you can leave the default) and click OK.
www.likno.comAllWebMenus Pro
![Page 25: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/25.jpg)
Then, you receive the Menu compiled successfully window, click on Link menu to web pages so that you can link the menu to your pages.
www.likno.comAllWebMenus Pro
![Page 26: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/26.jpg)
Select the page/s in which you want the menu to be linked, click the right arrows button to move them to the right side and finally click Link.
www.likno.comAllWebMenus Pro
![Page 27: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/27.jpg)
Then, click on Preview Page to see your page in your default browser.
www.likno.comAllWebMenus Pro
![Page 28: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/28.jpg)
As we see, the menu is still not displayed in the page. This is because we still haven’t placed our menu positioning element in our page.
www.likno.comAllWebMenus Pro
![Page 29: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/29.jpg)
In AllWebMenus go to Menu Positioning and click on Copy to copy the default ID so we can place that element to our page.
www.likno.comAllWebMenus Pro
![Page 30: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/30.jpg)
We create a <div> element in our page, where we want the menu to be displayed and we give it an ID value the value we copied before in AllWebMenus.
www.likno.comAllWebMenus Pro
![Page 31: How to create a JavaScript menu](https://reader033.vdocument.in/reader033/viewer/2022061214/549a3dcbb47959514d8b59a1/html5/thumbnails/31.jpg)
Let’s reload our page. This time we see that the menu appears as it should.
www.likno.comAllWebMenus Pro