How to position a JavaScript menu in Joomla

1,258 views
1,183 views

Published on

In this presentation you can see how to position a JavaScript menu in Joomla through the AllWebMenus Pro and the AllWebMenus Joomla Component.

AllWebMenus Pro is a powerful menu creator with a WYSIWYG interface. It requires absolutely no coding skills as the application creates all the code needed. You are able to create any type of JavaScript/CSS menus, such as horizontal drop down menus, vertical menus, sliding menus, responsive menus, floating menus, mega menus and many more. All the menus created in AllWebMenus Pro are going to perfectly work in all browsers and devices (PCs, tablets, smartphones).

AllWebMenus info: http://www.likno.com/allwebmenusinfo.html
AllWebMenu Joomla Component info: http://www.likno.com/addins/joomla-menu.html

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,258
On SlideShare
0
From Embeds
0
Number of Embeds
436
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to position a JavaScript menu in Joomla

  1. 1. How to position a JavaScript menu in Joomla & www.likno.comAllWebMenus Pro
  2. 2. In this presentation we will show you how to position your JavaScript menu in your Joomla website, through AllWebMenus Pro and the AllWebMenus Joomla Component. www.likno.comAllWebMenus Pro
  3. 3. In general, there are 4 main choices to position a menu in AllWebMenus Pro: Relative to Window: www.likno.comAllWebMenus Pro
  4. 4. Relative to an Element: www.likno.comAllWebMenus Pro
  5. 5. Relative to an Image: www.likno.comAllWebMenus Pro
  6. 6. Manually trigger Main Menu or any Group on user action: www.likno.comAllWebMenus Pro
  7. 7. While you are in AllWebMenus Pro, you can set the Menu Positioning by clicking on “Menu Positioning” button. www.likno.comAllWebMenus Pro
  8. 8. Let’s see each choice separately and the steps needed to be done in AllWebMenus Pro and in AllWebMenus Joomla Component. www.likno.comAllWebMenus Pro
  9. 9. First, let’s see the “Relative to Window” positioning. Click on “Menu Positioning” and choose “Relative to Window”. You are able to also set the Window Anchor and the Offsets. www.likno.comAllWebMenus Pro
  10. 10. Then, you need to Compile your menu project for Joomla and upload the zip file through your AllWebMenus Joomla Component panel. www.likno.comAllWebMenus Pro
  11. 11. Then, just visit your Joomla website and you will see the menu displayed where you placed it relative to the window. www.likno.comAllWebMenus Pro
  12. 12. Let’s see the “Relative to an Element” positioning. Click on “Menu Positioning” and choose “Relative to an Element”. You see that you have 2 choices, relative to the Default ID or relative to a Custom ID (in which you can type your custom ID). You are able to also set the Window Anchor and the Offsets. www.likno.comAllWebMenus Pro
  13. 13. If you know that you have a specific ID in your Joomla website or you want to manually add it, you can choose the Custom ID. Then, you only need to compile your menu project and upload the zip file to your Joomla. The menu will be displayed on your pages as long as the custom ID exists on them. www.likno.comAllWebMenus Pro
  14. 14. If you choose the Default ID you need to also compile and upload the zip file. Then, in order for the menu to be displayed you need to publish the specific AllWebMenus Module that is created for your menu. www.likno.comAllWebMenus Pro
  15. 15. So, after you have uploaded the produced zip file click on Extensions -> Module Manager. www.likno.comAllWebMenus Pro
  16. 16. Search for “AllWebMenus” and you will see that a module with the name of your menu is created. You can click on that to select the position where you want it to appear. www.likno.comAllWebMenus Pro
  17. 17. Choose the Position where you want your menu to be displayed. Also, make sure that the status is set to Published. Then, the menu should appear where you selected. www.likno.comAllWebMenus Pro
  18. 18. Then, just visit your Joomla website and you will see the menu displayed in the position you chose. www.likno.comAllWebMenus Pro
  19. 19. Let’s see the “Relative to an Image” positioning. Click on “Menu Positioning” and choose “Relative to an Image”. Type the Image Filename. Note that the image should exist in your page. Then, you can also set the Anchors and Offsets. www.likno.comAllWebMenus Pro
  20. 20. Then, you need to Compile your menu project for Joomla and upload the zip file through your AllWebMenus Joomla Component panel. www.likno.comAllWebMenus Pro
  21. 21. Then, just visit your Joomla website and you will see the menu displayed where you placed it relative to the image. www.likno.comAllWebMenus Pro
  22. 22. Now, let’s see the Manually trigger Main Menu or any Group on user action. This is a more advanced method to show your menu and it requires that you insert some code on your Joomla page. Click on Click here to generate the “Trigger Code” for Main Menu or any Group. www.likno.comAllWebMenus Pro
  23. 23. You are able to select if the menu will be triggered on Mouse Over or on Mouse Click. You can choose the Positioning Element as well as the Anchors and Offsets for the menu. Finally, you can click on “Copy” to copy the produced code. Of course, when you are done you need to compile your menu project and upload the produced zip file to your Joomla. www.likno.comAllWebMenus Pro
  24. 24. In order for the menu to appear on your page, you need to paste in your menu trigger element the code you copied in AllWebMenus Pro. So, you could have for example a button that clicking on it the menu would be displayed: <button onclick="awmShowGroup('menu-gr0',0,0,0,0,this);" onmouseout="awmHideMenu('menu');" >Click here</button> www.likno.comAllWebMenus Pro
  25. 25. Visit www.likno.com for more information www.likno.comAllWebMenus Pro

×