javascript - para - menu desplegable vertical html

¿Cómo puedo usar la lista<ul> en lugar del menú desplegable<select> para el selector de idiomas?

Question

Uso msDropDown para convertir la lista <select> a <ul> para el selector de idiomas. Pero el problema es que con este complemento jQuery, la selección tarda mucho tiempo en cargarse después de la página cargada.

Entonces, ¿cómo puedo usar una lista ul lugar de select ?

Este es mi código de selección:

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

Intenté con:

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

pero el value y el cambio no son compatibles con ul y a .
¿Hay alguna manera de hacer que ul funcione con los atributos select ?

¡Gracias! ¡Y perdón por mi mal inglés!

Answer 1

Respuesta actualizada 2015

Como esta pregunta todavía se visita con mucha frecuencia y debido a algunas solicitudes en los comentarios, he vuelto a visitar mi código. Aún puedes encontrar mi respuesta original a continuación.

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;
}

Manifestación

Pruebe antes de comprar

Respuesta original de 2013

Lo haría así:

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>

Este agrega una clase el elemento seleccionado. Esto funciona, si permaneces en esa misma página después de seleccionar y no utilizas location.href .

Answer 2

No puede usar los atributos de selección, en su lugar puede crear sus propios atributos y usarlos en el elemento <ul>

Tal vez esto te ayude

Primero el código html

<div id="language">Change Lang</div>
<ul id="lang">
    <li>
        <a href="" name="lang" data-val="de">
           <img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/ad-icon.png"/>
        English</a></li>
    <li>
        <a href="" name="lang" data-val="he">
            <img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/il-icon.png"/>
            Hebrew</a></li>
</ul>

Siguiente el código jquery

$("#language").click(function(){
   $("#lang li").slideToggle();
});

$("#lang li").click(function() {
    var url = location.href = "index.php?lang=" + $(this).find(''a'').attr("data-val");
   location.href =url;
});

lo hice sin el complemento.

Preste atención a que creé un atributo de data-val para almacenar el lenguaje deseado. y obtengo este atributo usando el código jquery

Answer 3

Una muy simple (ul para seleccionar la transformación de jquery desplegable) sin necesidad de cambiar html, muy útil para los menús móviles:

$(function(){
  var close = function() {
    $("ul").each(function() {
      var $thisUl = $(this);    
      if($thisUl.find("li > a.click").length == 0) {
        var $li = $(document.createElement(''li'')).append($(document.createElement(''a'')).attr({
          "class": "click selectable visible",
          "href": "#"
        }).text("Select"));
        $thisUl.append($li);
      }
      else {
        $thisUl.find("li > a.click").addClass("visible");
      }
      $thisUl.find("li:has(> a:not(.click))").hide();
      $thisUl.find("li > a.click").show();
    });
  };

  var sentinel = function() {
    $("ul").each(function(){
      var $thisUl = $(this);
      $($thisUl).find("li > a").click(function(event){
        if($(event.target).is(''ul li a.visible'')) {
          event.preventDefault();
          $thisUl.find("li:has(> a:not(.click))").show();
          $thisUl.find("li > a.selectable").hide();
          $thisUl.find("li > a.click").removeClass("visible");
        }
        else {
          $thisUl.find("li").each(function(){
            $(this).find("a").removeClass("click selectable visible");
            $(this).find("a.selectable").remove();
          });
          $(this).addClass("click visible");
          close();
        }
      });
    });
  };

  var reconnaissance = function() {
    $(document).click(function(event) {
      if(!$(event.target).is(''ul li a'')) {
        close();
      }
    });
  };

  close();
  sentinel();
  reconnaissance();
});

ul { 
  width: auto;
  margin: 2px auto;
  background-color: #ddd;
  border-top: 1px solid #999;
  border-bottom: 3px solid #999;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  border-radius: 8px;
  list-style:none;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: left 2px;
  background-color: transparent;
  cursor: pointer;
}
li > a.click { 
  color: darkgreen; 
  font-weight: bold;
}
li a {
  color:darkblue;
  text-decoration:none;
}
li a:active, li a:hover {
  color:darkred;
  background-color: lightyellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Option 1</a></li>
  <li><a class="click" href="#">Option 2</a></li>
  <li><a href="#">Option 3</a></li>
</ul>

<ul>
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
  <li><a href="#">Option 3</a></li>
</ul>