Website Language Dropdown With jQuery

Going global means getting funky with languages, which means adding multi-lingual support to websites. Instead of a sticking on a boring string of flags to the top your site, try this jQuery-powered dropdown that degrades perfectly without JS support.

One of the pleasures and pains of working for a growing company is the inevitable global expansion, and the circus of language challenges that crop up just by going into first-world European countries. Because our products and services are tailored for a country, not a language (big difference there), we procured the appropriate TLDs (.de, .fr, .co.uk, .it, .nl, etc) to serve up unique, country-specific sites instead of simply using our content management system’s built-in language switcher. This not only means the experience is localized, but provides the daily recommended amount of SEO vitamins as well.

So now we have a pile of crazy wacky domain names, and we need to provide a centralized way of quickly switching between countries, and by association, languages. The general UI pattern, of course, is a dropdown in the header of the site. When we embarked on the task, we had three criteria:

It had to look as fabulous as the rest of the site, so …

We would use our framework of choice, jQuery, but …

It had to work without JavaScript enabled, so progressive enhancement was key

Not too hard right?

Thankfully, Janko Jovanovic did some of the legwork for us in his reinventing a dropdown article. This script builds off of his with a few enhancements.

The HTML

Since we’re angling for good accessibility, our base version is a standard select drop down and submit button wrapped in a form element. This ensures that if JavaScript or CSS is disabled, or if we want to use less eye candy for a mobile version, the user is still presented a mechanism that is functional.

Since we’re using actual URLs instead of dynamic language redirects (common in many expensive web content management systems), we’re storing the value as a title attribute and saving the value attribute for processing server-side. The title provides vague semantic value, but more importantly does not interfere with the form submit and enables us to avoid getting mired in conditional redirects in JavaScript. (In other words, we don’t need if/else scripts to match up “german” with “yoursite.de”.)

The jQuery

Instead of publishing the script, which you can download here, I’ll just briefly explain the components.

At the bottom is the actual function to convert the form and select element into a definition list with links. It hides the form, finds the “selected” language option to use as the definition list title, then loops through all options to create the complete list of links. So at the end of the day, our above form is transformed into this:

The rest of the code inside languageswitcher.js joyfully fulfills the following tasks, all called from inside the $(document).ready() function:

Calls the function to do the actual HTML transformation

Sets up a few variables

Establishes the main open/close functionality via click event

Establishes additional functionality that makes the list close whenever anything else on the screen is clicked

Sets one final bit of code that does some element re-arrangement when a link is clicked, essentially replacing the current active language with the one that was clicked. (Why do this when the link is going to take the person to whole different domain and reload the script? Mostly for user experience. The visitor gets instant feedback when their link is clicked; they see their selected language “activate” immediately. When the new domain loads, the transition is seamless.)

The CSS

Now that we’ve established the new HTML structure, we can freely style our new dropdown. I used famfamfam’s unbelievably awesome country flag icons as a sprite for the different languages. Another good library is Dave Shea’s Chalkwork Flags.

You can see all of the CSS on the demo page. We start with a few rough styles for the people who have JavaScript disabled. For the actual list element containing the language, the span houses the flag icon and is floated left, the em houses the text and is floated right. Because we’re pulling the language code for each item and applying it as a class to the <li>, we can create a quick sprite with all the flags, calling one image instead of six, and making future expansion a piece of cake.

You will see some CSS3 stuff in there (box-shadow, border-radius, RGBA), but it’s purely for visual enhancement and the solution degrades just dandy in crapolla browsers.

Awesome! exactly the code that I was looking for! many thanks going to try it right now!

Moonwalker

wrote the following on Wednesday September 28, 2011

Hi,

Thanks a lot for the script.

Just one question: What to change when I need two dropdown menus?

I managed to get them show up, the way I want them. But once I click on the first one, the second one opens too.

Thanks for any solution how to get this working.

phil

wrote the following on Thursday January 5, 2012

Great script. Exactly what I was looking for. Just one question. I have copied your script and it works. I use it to switch language on a php page. Language switches but the flag always reamains on the first selected and does not change according to my selection. Any idea? Regards

jamzorz

wrote the following on Thursday October 4, 2012

Thanks for this! When the page first loads, it flashes the un-styled Select button before hiding it. Any tips for how to prevent this?

David

wrote the following on Friday October 12, 2012

This is close to being exactly what I need. However, our app allows our customer to define what languages (and the associated flag images) they support, so that information is dynamic. The flag sprite this uses disqualifies this as a viable option for me. Is there any way to associate a image per option?

I love this piece of code, it was exactly what I was looking for, easy to implement and adapt and works great. However I have an annoying issue I can’t seem to fix. The language selector drop down menu is not alligned properly. I believe it has something to do with the parent DIV, however I can’t seem to fix it. I was hoping you have a quick fix for this? The website is linked to this post.

Graphicpush is a sporadically but faithfully updated blog on a variety of topics like web design and development, content strategy, accessibility, writing and a smattering of related stuff. It is written by Kevin Potts.