javascript - How can I use list instead of dropdown for the languages switcher? -

javascript - How can I use <ul> list instead of <select> dropdown for the languages switcher? -

i utilize msdropdown convert <select> <ul> list languages switcher. problem jquery plugin, select takes long time load after page loaded.

so, how can utilize ul list rather select?

this select code:

<select name="lang" class="language" onchange="location.href='index.php?lang='+this.value+''.$trackpage.'"> <option name="lang" data-image="style/lang/de.png" value="de">deutsch</option> <option name="lang" data-image="style/lang/en.png" value="en" selected="selected">english</option> <option name="lang" data-image="style/lang/es.png" value="es">espanol</option> <option name="lang" data-image="style/lang/fr.png" value="fr">francais</option> <option name="lang" data-image="style/lang/it.png" value="it">italiano</option> </select>

i tried with:

<ul onchange="location.href='index.php?lang='+this.value+'"> <li> <a href="" name="lang" data-image="style/lang/de.png" value="de">english</a> </li> </ul>

but value , onchange not supported ul , a. there way create ul works select attributes?

thank you! , sorry bad english!

updated reply 2015

as question still visited , due requests in comments, i've revisit code. can still find original reply below.

html

<button class="language_selector">choose language</button> <ul class="languages"> <li><a href="/en">english</a></li> <li><a href="/de">deutsch</a></li> </ul> <article> <h1>more content</h1> </article>

javascript

var trigger = $('.language_selector'); var list = $('.languages'); trigger.click(function() { trigger.toggleclass('active'); list.slidetoggle(200); }); // optional close list while new page loading list.click(function() { trigger.click(); });

css

.language_selector { width: 200px; background: #222; color: #eee; line-height: 25px; font-size: 14px; padding: 0 10px; cursor: pointer; } .languages { display: none; position: absolute; margin: 0; background: #dddddd; } .languages > li { width: 200px; background: #eee; line-height: 25px; font-size: 14px; padding: 0 10px; cursor: pointer; } .languages > li:hover { background: #aaa; }

demo

try before buy

original reply 2013

i this:

class="snippet-code-js lang-js prettyprint-override">var nav = $('#nav'); var selection = $('.select'); var select = selection.find('li'); nav.click(function(event) { if (nav.hasclass('active')) { nav.removeclass('active'); selection.stop().slideup(200); } else { nav.addclass('active'); selection.stop().slidedown(200); } event.preventdefault(); }); select.click(function(event) { // updated code select current language select.removeclass('active'); $(this).addclass('active'); alert ("location.href = 'index.php?lang=" + $(this).attr('data-value')); }); class="snippet-code-css lang-css prettyprint-override">h2 { width: 200px; background: #222; color: #eee; line-height: 25px; font-size: 14px; padding: 0 10px; cursor: pointer; } ol.select { display: none; } ol.select > li { width: 200px; background: #eee; line-height: 25px; font-size: 14px; padding: 0 10px; cursor: pointer; } ol.select > li:hover { background: #aaa; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h2 id="nav">choose language</h2> <ol class="select"> <li data-value="en">english</li> <li data-value="de">deutsch</li> </ol>

this 1 adds class the selected element. works, if remain on page after select , don't utilize location.href.

javascript jquery html drop-down-menu language-switching