Just wanted to document a quick method I used to create a drop down menu effect for the jdlanguage module in case anyone else was looking to do the same.
Notes:
My 1st attempt of a technical write up, so apologies if its hard to follow.
I'll try differentiate between whats needed for it to work, and what I did specifically for our version.
Positioning is also important to create the effect, so it helps if the module position your using to display jdlanguage in is position:relative, so that you can use absolute positions within this container.
Lastly, I used JQuery for the drop down functionality.
Step One: Set-up For this to work you need to set the jdlanguage modules
Style (under basic options) to "Text-only".
--> I also set
Show Current Language to "No" so I could display current language as the drop down menu text (step Four(B)).
Step Two: Create Drop Down List Add following CSS to display the languages vertically
div.languageswitcher a {
display:block;
text-decoration: none; /* this is personal preference */
}Step Three : Style Drop Down ListAdd the following to modify look of drop down.
div.languageswitcher {
display:none;
position:absolute;
z-index: 999999; /* my menu was displaying under a banner */
width:120px; /* resize, so your longest language fits in without linebreak */
top:20px; /* this is the height of the drop down menu button we create in step four */
/* Personal Styles */
padding: 5px 0px 5px 0px;
background-color: #ffffff;
border-left: thin solid #ccc;
border-right: thin solid #ccc;
border-bottom: thin solid #ccc;
text-align:center;
border-radius:0px 0px 5px 5px;
}Step Four(A): Create Drop Down Button. (simply)Create a custom HTML module within the same module position as the jdlanguage module. with the following.
<div id="languagemenu">Select Language ▼</div>
Step Four(B): Create Drop Down Button. (with language item)Create a Flexi Custom Code module (or your preference for adding php) within the same position as the jdlanguage module with the following.
--> Couldn't find if there is a simply
$lang->getNative(); that could simplify this step.
<div id="languagemenu">
<?php
$lang = JFactory::getLanguage();
$tag = $lang->getTag();
if ($tag == 'en-GB') {
echo "English (UK) ▼";
}
if ($tag == 'en-US') {
echo "English (US) ▼";
}
if ($tag == 'de-DE') {
echo "Deutch ▼";
}
if ($tag == 'es-ES') {
echo "Español ▼";
}
if ($tag == 'fr-FR') {
echo "Français ▼";
}
if ($tag == 'fr-CA') {
echo "Français canadien ▼";
}
if ($tag == 'it-IT') {
echo "Italiano ▼";
}
?>
</div>http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/15251Step Five: Styling Drop Down buttonOnce again you can style to taste. But for the effect, the #languagemenu and .languageswitcher widths needs to match (note: including padding). Also the .languageswitcher top: needs to match the #languagemenu height, so it drops down from under the button.
div#languagemenu {
width: 120px; /* match .languageswitcher width */
/* Personal Styles */
border-radius: 5px;
border: 1px solid #CCC;
height: 20px;
background: #FFF;
text-align:center;
padding: 4px 0px 0px 0px;
}
div#languagemenu:hover {
cursor:pointer;
}Step Six: Give it life!To have the drop down work, now you just need to add some jquery to your .js file.
$(document).ready(function() {
$('#languagemenu').click(function(){
$('.languageswitcher').slideDown();
});
$('.languageswitcher').mouseleave(function(){
$('.languageswitcher').slideUp();
});
$('.languageswitcher a').click(function(){
$('.languageswitcher').hide();
});
Hope this helps anyone else wanting to get a drop down menu for this great plugin. This will auto populate as you add languages as it IS the core jdiction module restyled, with the exception of needing to updated step four(B) if you use it.
Attached are images of the final effect.
