Question

65

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

rated 0 times [ 71] [ 6] / answers: 1 / hits: 68235 / 12 Years ago, sun, february 17, 2013, 12:00:00

I use msDropDown to convert the <select> to <ul> list for languages switcher. But the problem is that with this jQuery plugin, the select takes a long time to load after page loaded.

So, how can I use a ul list rather than select?

This is my 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 and onchange is not supported by ul and a.

Is there a way to make ul works with the select attributes?

Thank you! And sorry for my bad English!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

danae

Add To Favorites

Follow

Total Points: 26

Total Questions: 97

Total Answers: 112

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

answered 12 Years ago jocelynkarsynr · Accepted Answer

Updated Answer 2015

As this question is still visited very often and due to some requests in the comments, I've revisit my code. You can still find my original answer 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);

});



// this is optional to close the list while the new page is 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 Answer From 2013

I would do it like this:

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 to select the current language

    select.removeClass('active');

    $(this).addClass('active');



    alert (location.href = 'index.php?lang= + $(this).attr('data-value'));

});

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;

}

<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 one adds a class the the selected element. This works, if you stay on that very page after the select and don't use location.href.