SlideShare ist ein Scribd-Unternehmen logo
1 von 25
How to position a JavaScript menu
in Joomla
&
www.likno.comAllWebMenus Pro
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
In general, there are 4 main choices to position a menu in
AllWebMenus Pro:
Relative to Window:
www.likno.comAllWebMenus Pro
Relative to an Element:
www.likno.comAllWebMenus Pro
Relative to an Image:
www.likno.comAllWebMenus Pro
Manually trigger Main Menu or any Group on user action:
www.likno.comAllWebMenus Pro
While you are in AllWebMenus Pro, you can set the Menu Positioning by
clicking on “Menu Positioning” button.
www.likno.comAllWebMenus Pro
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
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
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
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
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
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
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
So, after you have uploaded the produced zip file click on Extensions -> Module
Manager.
www.likno.comAllWebMenus Pro
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
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
Then, just visit your Joomla website and you will see the menu displayed in the
position you chose.
www.likno.comAllWebMenus Pro
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
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
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
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
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
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
Visit
www.likno.com
for more information
www.likno.comAllWebMenus Pro

Weitere ähnliche Inhalte

Was ist angesagt?

A2WPress Blogstrend Theme Documentation
A2WPress Blogstrend Theme DocumentationA2WPress Blogstrend Theme Documentation
A2WPress Blogstrend Theme DocumentationA2WPress
 
How to install additional WooCommerce language packs
How to install additional WooCommerce language packsHow to install additional WooCommerce language packs
How to install additional WooCommerce language packsGregory Karpinsky
 
A2WPress Squirrel Theme Documentation
A2WPress Squirrel Theme DocumentationA2WPress Squirrel Theme Documentation
A2WPress Squirrel Theme DocumentationA2WPress
 
Joomla 3 installation and management guide
Joomla 3 installation and management guideJoomla 3 installation and management guide
Joomla 3 installation and management guideSingsys Pte Ltd
 
How to create your own math blog revised
How to create your own math blog revisedHow to create your own math blog revised
How to create your own math blog revisedmlabuski
 
How to create your own math blog revised
How to create your own math blog revisedHow to create your own math blog revised
How to create your own math blog revisedmlabuski
 
A2WPress Themia Documentation
A2WPress Themia DocumentationA2WPress Themia Documentation
A2WPress Themia DocumentationA2WPress
 
WiZiQ Virtual Classroom Embed for Wordpress
WiZiQ Virtual Classroom Embed for WordpressWiZiQ Virtual Classroom Embed for Wordpress
WiZiQ Virtual Classroom Embed for Wordpresssarvinder
 
Earn money engaged hits
Earn money   engaged hitsEarn money   engaged hits
Earn money engaged hitsJamesGabriel21
 
A2WPress Cloriato Theme Documentation
A2WPress Cloriato Theme DocumentationA2WPress Cloriato Theme Documentation
A2WPress Cloriato Theme DocumentationA2WPress
 
Joomla Training for The C.A.L.L. in Arkansas
Joomla Training for The C.A.L.L. in ArkansasJoomla Training for The C.A.L.L. in Arkansas
Joomla Training for The C.A.L.L. in ArkansasRob McBryde
 
Flip to imovie
Flip to imovieFlip to imovie
Flip to imovieshirleywxf
 
Flip video to adobe
Flip video to adobeFlip video to adobe
Flip video to adobeshirleywxf
 
How To Insert Youtube Video Into PowerPoint - Infographic
How To Insert Youtube Video Into PowerPoint - InfographicHow To Insert Youtube Video Into PowerPoint - Infographic
How To Insert Youtube Video Into PowerPoint - InfographicSuperside
 
A2 w press coveradocs
A2 w press coveradocsA2 w press coveradocs
A2 w press coveradocsA2WPress
 

Was ist angesagt? (20)

A2WPress Blogstrend Theme Documentation
A2WPress Blogstrend Theme DocumentationA2WPress Blogstrend Theme Documentation
A2WPress Blogstrend Theme Documentation
 
How to install additional WooCommerce language packs
How to install additional WooCommerce language packsHow to install additional WooCommerce language packs
How to install additional WooCommerce language packs
 
A2WPress Squirrel Theme Documentation
A2WPress Squirrel Theme DocumentationA2WPress Squirrel Theme Documentation
A2WPress Squirrel Theme Documentation
 
Joomla 3 installation and management guide
Joomla 3 installation and management guideJoomla 3 installation and management guide
Joomla 3 installation and management guide
 
Read me st
Read me stRead me st
Read me st
 
How to create your own math blog revised
How to create your own math blog revisedHow to create your own math blog revised
How to create your own math blog revised
 
How to create your own math blog revised
How to create your own math blog revisedHow to create your own math blog revised
How to create your own math blog revised
 
A2WPress Themia Documentation
A2WPress Themia DocumentationA2WPress Themia Documentation
A2WPress Themia Documentation
 
WiZiQ Virtual Classroom Embed for Wordpress
WiZiQ Virtual Classroom Embed for WordpressWiZiQ Virtual Classroom Embed for Wordpress
WiZiQ Virtual Classroom Embed for Wordpress
 
Earn money engaged hits
Earn money   engaged hitsEarn money   engaged hits
Earn money engaged hits
 
A2WPress Cloriato Theme Documentation
A2WPress Cloriato Theme DocumentationA2WPress Cloriato Theme Documentation
A2WPress Cloriato Theme Documentation
 
Pc version help manual v2
Pc version help manual v2Pc version help manual v2
Pc version help manual v2
 
Joomla Training for The C.A.L.L. in Arkansas
Joomla Training for The C.A.L.L. in ArkansasJoomla Training for The C.A.L.L. in Arkansas
Joomla Training for The C.A.L.L. in Arkansas
 
Flip to imovie
Flip to imovieFlip to imovie
Flip to imovie
 
Flip video to adobe
Flip video to adobeFlip video to adobe
Flip video to adobe
 
E speakers profile update
E speakers profile updateE speakers profile update
E speakers profile update
 
Readme
ReadmeReadme
Readme
 
How To Insert Youtube Video Into PowerPoint - Infographic
How To Insert Youtube Video Into PowerPoint - InfographicHow To Insert Youtube Video Into PowerPoint - Infographic
How To Insert Youtube Video Into PowerPoint - Infographic
 
Themia docs
Themia docsThemia docs
Themia docs
 
A2 w press coveradocs
A2 w press coveradocsA2 w press coveradocs
A2 w press coveradocs
 

Ähnlich wie Position JavaScript menus in Joomla with AllWebMenus Pro

JSN ImageShow Configuration Manual
JSN ImageShow Configuration ManualJSN ImageShow Configuration Manual
JSN ImageShow Configuration ManualJoomlaShine
 
Customization: Buttons & Links
Customization: Buttons & LinksCustomization: Buttons & Links
Customization: Buttons & LinksWebsiteAlive
 
A2WPress Dzonia Theme Documentation
A2WPress Dzonia Theme DocumentationA2WPress Dzonia Theme Documentation
A2WPress Dzonia Theme DocumentationA2WPress
 
WebsiteAlive Customization - Adding Buttons & Links to Your Website
WebsiteAlive Customization - Adding Buttons & Links to Your WebsiteWebsiteAlive Customization - Adding Buttons & Links to Your Website
WebsiteAlive Customization - Adding Buttons & Links to Your WebsiteWebsiteAlive
 
User guide
User guideUser guide
User guidenhockiki
 
Building websites-with-joomla-1-5-sample-chapter-chapter-7-the-menus-menu
Building websites-with-joomla-1-5-sample-chapter-chapter-7-the-menus-menuBuilding websites-with-joomla-1-5-sample-chapter-chapter-7-the-menus-menu
Building websites-with-joomla-1-5-sample-chapter-chapter-7-the-menus-menuGiang Nguyễn
 
Reff 04 macme-installation-tutorial
Reff 04 macme-installation-tutorialReff 04 macme-installation-tutorial
Reff 04 macme-installation-tutorialSalvatore Iaconesi
 
Joomla Quick Start 1
Joomla  Quick  Start 1Joomla  Quick  Start 1
Joomla Quick Start 1guest38bfe1
 
Easyweb demonstration scenario : What's Easyweb?
Easyweb  demonstration scenario : What's Easyweb?Easyweb  demonstration scenario : What's Easyweb?
Easyweb demonstration scenario : What's Easyweb?Dong Nguyen
 
A2 w press geocraftdocs
A2 w press geocraftdocsA2 w press geocraftdocs
A2 w press geocraftdocsA2WPress
 
A2WPress Regal Theme Documentation
A2WPress Regal Theme DocumentationA2WPress Regal Theme Documentation
A2WPress Regal Theme DocumentationA2WPress
 
Mobile Website Tutorial
Mobile Website TutorialMobile Website Tutorial
Mobile Website TutorialPuttiApps
 
Magento 2 Advance Shop By Brand Extension, Display Logo Slider on Store
Magento 2 Advance Shop By Brand Extension, Display Logo Slider on StoreMagento 2 Advance Shop By Brand Extension, Display Logo Slider on Store
Magento 2 Advance Shop By Brand Extension, Display Logo Slider on StoreBiztech Store
 
Mobile Website Tutorial
Mobile Website TutorialMobile Website Tutorial
Mobile Website TutorialMy App Editor
 
Joomla 2.5 Made Easy | Free ebook
Joomla 2.5 Made Easy | Free ebook Joomla 2.5 Made Easy | Free ebook
Joomla 2.5 Made Easy | Free ebook JoomlaShine
 

Ähnlich wie Position JavaScript menus in Joomla with AllWebMenus Pro (20)

Joomla gwt manual
Joomla gwt manualJoomla gwt manual
Joomla gwt manual
 
JSN ImageShow Configuration Manual
JSN ImageShow Configuration ManualJSN ImageShow Configuration Manual
JSN ImageShow Configuration Manual
 
Customization: Buttons & Links
Customization: Buttons & LinksCustomization: Buttons & Links
Customization: Buttons & Links
 
JOOMLA
JOOMLAJOOMLA
JOOMLA
 
A2WPress Dzonia Theme Documentation
A2WPress Dzonia Theme DocumentationA2WPress Dzonia Theme Documentation
A2WPress Dzonia Theme Documentation
 
WebsiteAlive Customization - Adding Buttons & Links to Your Website
WebsiteAlive Customization - Adding Buttons & Links to Your WebsiteWebsiteAlive Customization - Adding Buttons & Links to Your Website
WebsiteAlive Customization - Adding Buttons & Links to Your Website
 
User guide
User guideUser guide
User guide
 
Building websites-with-joomla-1-5-sample-chapter-chapter-7-the-menus-menu
Building websites-with-joomla-1-5-sample-chapter-chapter-7-the-menus-menuBuilding websites-with-joomla-1-5-sample-chapter-chapter-7-the-menus-menu
Building websites-with-joomla-1-5-sample-chapter-chapter-7-the-menus-menu
 
Reff 04 macme-installation-tutorial
Reff 04 macme-installation-tutorialReff 04 macme-installation-tutorial
Reff 04 macme-installation-tutorial
 
Joomla Quick Start 1
Joomla  Quick  Start 1Joomla  Quick  Start 1
Joomla Quick Start 1
 
Easyweb demonstration scenario : What's Easyweb?
Easyweb  demonstration scenario : What's Easyweb?Easyweb  demonstration scenario : What's Easyweb?
Easyweb demonstration scenario : What's Easyweb?
 
A2 w press geocraftdocs
A2 w press geocraftdocsA2 w press geocraftdocs
A2 w press geocraftdocs
 
Wps
WpsWps
Wps
 
A2WPress Regal Theme Documentation
A2WPress Regal Theme DocumentationA2WPress Regal Theme Documentation
A2WPress Regal Theme Documentation
 
Mobile Website Tutorial
Mobile Website TutorialMobile Website Tutorial
Mobile Website Tutorial
 
Magento 2 Advance Shop By Brand Extension, Display Logo Slider on Store
Magento 2 Advance Shop By Brand Extension, Display Logo Slider on StoreMagento 2 Advance Shop By Brand Extension, Display Logo Slider on Store
Magento 2 Advance Shop By Brand Extension, Display Logo Slider on Store
 
Mobile Website Tutorial
Mobile Website TutorialMobile Website Tutorial
Mobile Website Tutorial
 
GuideMaker Design Customization Guideline
GuideMaker Design Customization GuidelineGuideMaker Design Customization Guideline
GuideMaker Design Customization Guideline
 
Joomla 2.5 Made Easy | Free ebook
Joomla 2.5 Made Easy | Free ebook Joomla 2.5 Made Easy | Free ebook
Joomla 2.5 Made Easy | Free ebook
 
Developing a website
Developing a websiteDeveloping a website
Developing a website
 

Kürzlich hochgeladen

Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran
 
Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Mater
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesŁukasz Chruściel
 
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanySuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanyChristoph Pohl
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 
Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Hr365.us smith
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024StefanoLambiase
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprisepreethippts
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxTier1 app
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtimeandrehoraa
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based projectAnoyGreter
 
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEOrtus Solutions, Corp
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Natan Silnitsky
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfAlina Yurenko
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作qr0udbr0
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfFerryKemperman
 

Kürzlich hochgeladen (20)

Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
 
Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New Features
 
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanySuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 
Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprise
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtime
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. Salesforce
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based project
 
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作
 
2.pdf Ejercicios de programación competitiva
2.pdf Ejercicios de programación competitiva2.pdf Ejercicios de programación competitiva
2.pdf Ejercicios de programación competitiva
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdf
 

Position JavaScript menus in Joomla with AllWebMenus Pro

  • 1. How to position a JavaScript menu in Joomla & www.likno.comAllWebMenus Pro
  • 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. In general, there are 4 main choices to position a menu in AllWebMenus Pro: Relative to Window: www.likno.comAllWebMenus Pro
  • 4. Relative to an Element: www.likno.comAllWebMenus Pro
  • 5. Relative to an Image: www.likno.comAllWebMenus Pro
  • 6. Manually trigger Main Menu or any Group on user action: www.likno.comAllWebMenus Pro
  • 7. While you are in AllWebMenus Pro, you can set the Menu Positioning by clicking on “Menu Positioning” button. www.likno.comAllWebMenus Pro
  • 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. 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. 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. 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. 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. 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. 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. So, after you have uploaded the produced zip file click on Extensions -> Module Manager. www.likno.comAllWebMenus Pro
  • 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. 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. Then, just visit your Joomla website and you will see the menu displayed in the position you chose. www.likno.comAllWebMenus Pro
  • 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. 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. 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. 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. 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. 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