jDiction Forum

Please login or register.

Login with username, password and session length
Advanced search  

News:

jDiction 2.2.0 released. http://jdiction.org/downloads

Author Topic: Drop down menu  (Read 15196 times)

gerardtolosa

  • Newbie
  • *
  • Posts: 18
    • View Profile
Drop down menu
« on: October 30, 2013, 06:26:29 pm »

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

If someone has developed this option could you share?

Thanks,
Logged

Harald Leithner

  • Administrator
  • Hero Member
  • *****
  • Posts: 1688
    • View Profile
Re: Drop down menu
« Reply #1 on: October 30, 2013, 06:33:59 pm »

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.
Logged
Joomla! 5.0 Release Manager
Vote at JED

StudioMieke

  • Newbie
  • *
  • Posts: 1
    • View Profile
Re: Drop down menu
« Reply #2 on: May 19, 2014, 10:36:22 am »

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!
Logged

Harald Leithner

  • Administrator
  • Hero Member
  • *****
  • Posts: 1688
    • View Profile
Re: Drop down menu
« Reply #3 on: May 19, 2014, 11:56:41 am »

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.
Logged
Joomla! 5.0 Release Manager
Vote at JED

jstead

  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: Drop down menu
« Reply #4 on: September 10, 2014, 02:26:29 am »

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: [Select]
div.languageswitcher a {
display:block;
text-decoration: none;           /* this is personal preference */
}

Step Three : Style Drop Down List
Add the following to modify look of drop down.
Code: [Select]
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.
Code: [Select]
<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.
Code: [Select]
<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/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: [Select]
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.
Code: [Select]
$(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.
Logged

Harald Leithner

  • Administrator
  • Hero Member
  • *****
  • Posts: 1688
    • View Profile
Re: Drop down menu
« Reply #5 on: September 11, 2014, 04:52:09 pm »

Thx for you good post.

Code: [Select]
echo $language->title_native;
Will output the native title.
Logged
Joomla! 5.0 Release Manager
Vote at JED

jstead

  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: Drop down menu
« Reply #6 on: September 15, 2014, 07:00:21 am »

I tried using this $language->title_native in place of the code I am currently using, but it kept returning nothing. Are there any prerequisites for it to work?
Logged

nlit

  • Newbie
  • *
  • Posts: 1
    • View Profile
Re: Drop down menu
« Reply #7 on: May 27, 2016, 11:32:53 pm »

Hi, I just wanted to ask,
In joomla 3.5.1 I tried to make the drop down menu as you describe but I can't.
There is something I miss with the last part (.js)
In what exact file I must include the code? And in what part of the file?
Also I think there is a mistake in the code with an open "{" that doesn't close.
Please don't get me wrong, I am not judging you, I am novice and just want to make it work.
Thanks,

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