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.
For the impatient: the demo is here.
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 …
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.
Since we’re angling for good accessibility, our base version is a standard select drop down and submit button wrapped in a
<div id="country-select"> <form action="server-side-script.php"> <select id="country-options" name="country-options"> <option selected="selected" title="http://www.yoursite.com" value="us">United States</option> <option title="http://www.yoursite.co.uk" value="uk">United Kingdom</option> <option title="http://www.yoursite.fr" value="fr">France</option> <option title="http://www.yoursite.de" value="de">Germany</option> <option title="http://www.yoursite.nl" value="nl">Netherlands</option> </select> <input value="Select" type="submit" /> </form> </div>
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
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:
<div id="country-select"> <dl id="target" class="dropdown"> <dt class="us"> <a href="#"><span class="flag"></span><em>United States</em></a> </dt> <dd> <ul> <li class="us"><a href="http://www.yoursite.com"><span class="flag"></span><em>United States</em></a></li> <li class="uk"><a href="http://www.yoursite.co.uk"><span class="flag"></span><em>United Kingdom</em></a></li> <li class="fr"><a href="http://www.yoursite.fr"><span class="flag"></span><em>France</em></a></li> <li class="de"><a href="http://www.yoursite.de"><span class="flag"></span><em>Germany</em></a></li> <li class="nl"><a href="http://www.yoursite.nl"><span class="flag"></span><em>Netherlands</em></a></li> </ul> </dd> </dl> </div>
The rest of the code inside languageswitcher.js joyfully fulfills the following tasks, all called from inside the
- 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.)
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.
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.
That’s it. Have fun. As always, released under a WTFPL.