SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Similar a How to position a JavaScript menu in Joomla

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
 

Similar a How to position a JavaScript menu in Joomla (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
 

Último

%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...masabamasaba
 
WSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go PlatformlessWSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go PlatformlessWSO2
 
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2
 
tonesoftg
tonesoftgtonesoftg
tonesoftglanshi9
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisamasabamasaba
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisamasabamasaba
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...SelfMade bd
 
WSO2Con204 - Hard Rock Presentation - Keynote
WSO2Con204 - Hard Rock Presentation - KeynoteWSO2Con204 - Hard Rock Presentation - Keynote
WSO2Con204 - Hard Rock Presentation - KeynoteWSO2
 
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...masabamasaba
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2
 
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024VictoriaMetrics
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension AidPhilip Schwarz
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrainmasabamasaba
 
%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benoni%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benonimasabamasaba
 
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...masabamasaba
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrandmasabamasaba
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...masabamasaba
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2
 
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...WSO2
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...Jittipong Loespradit
 

Último (20)

%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
 
WSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go PlatformlessWSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go Platformless
 
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
WSO2Con204 - Hard Rock Presentation - Keynote
WSO2Con204 - Hard Rock Presentation - KeynoteWSO2Con204 - Hard Rock Presentation - Keynote
WSO2Con204 - Hard Rock Presentation - Keynote
 
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benoni%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benoni
 
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
 
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 

How to position a JavaScript menu in Joomla

  • 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