English > General Questions

Drop down menu

(1/2) > >>

gerardtolosa:
Is there a way to present the different languages in a drop down menu.

If someone has developed this option could you share?

Thanks,

Harald Leithner:
you can create a copy of
/modules/mod_jdlanguageswitcher/tmpl/default.php
to
/templates/<yourtemplate>/html/mod_jdlanguageswitcher/default.php

and change the html code.

StudioMieke:
I'm trying to get the languages in a menu too, but I do not understand what I should change in which html document. Could you please explain in more detail what I need to change? Thank you!

Harald Leithner:
Its not possible to get the language into a menu, the only thing you can do is to add a menuitem of the type externl link and as url /en for english or /de for german if you use SEF.

jstead:
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

--- Code: ---div.languageswitcher a {
display:block;
text-decoration: none;           /* this is personal preference */
}
--- End code ---

Step Three : Style Drop Down List
Add the following to modify look of drop down.

--- Code: ---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;
}
--- End code ---

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.

--- Code: ---<div id="languagemenu">Select Language ▼</div>

--- End code ---

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.

--- Code: ---<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>
--- End code ---
http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/15251

Step Five: Styling Drop Down button
Once 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.

--- Code: ---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;
}
--- End code ---

Step Six: Give it life!
To have the drop down work, now you just need to add some jquery to your .js file.

--- Code: ---$(document).ready(function() {
     $('#languagemenu').click(function(){
          $('.languageswitcher').slideDown();
     });
     $('.languageswitcher').mouseleave(function(){
  $('.languageswitcher').slideUp();
     });
     $('.languageswitcher a').click(function(){
          $('.languageswitcher').hide();
     });

--- End code ---


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.

Navigation

[0] Message Index

[#] Next page