Вёрстка переключателя языков?

Я сделал такой переключатель языков сейчас:
<select name="lang" id="lang">
	<option value="/">Русский</option>
	<option class="eng" value="/en/main">English</option>
</select>

<script>
$(document).ready(function () {
  var lang = document.getElementById("lang");
  lang.onchange = function () {
    window.location =
      "https://studyintomsk.ru" +
      lang.options[lang.options.selectedIndex].value;
  };
});
</script>

Код работает правильно, но есть одна проблема: в option нельзя добавлять картинки языков сбоку. А мне это нужно. Как сверстать по-другому(с картинкой), но чтобы работало по такому же принципу(перекидывало на нужную страницу при выборе), а на выбранной странице должен отображаться выбранный язык.
  • Вопрос задан
  • 206 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
То, что делает приведенный код — через сложности выполняет роль обычной ссылки. Поэтому просто заверни это в ссылку и их в выпадашку. Как работает и выглядит выпадашка → гугли dropdown.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Froggyweb
в данном варианте custom select например select2 или мне нравится formstyler оба требуют jQuery, наверняка уже и нативные варианты появились.

вообще вариантов много, все зависит от дизайна.
твой скрипт прикольный, но бесполезный, после перезагрузки страницы все сбросится.
Ответ написан
$(document).ready(function(){
  $('.language .head').click(function() {
    $(this).closest('.language').find('ul').stop().slideToggle();
  });
});

<div class="language">
  <span class="head">Ru</span>
  <ul>
    <li><a href="http://exemple.com/">Ru</a></li>
    <li><a href="http://exemple.com/en/">En</a></li>
  </ul>
</div>

.language {
    display: inline-block;
    position: relative;
}
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 5px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 5px;
    border-bottom: none;
    border-top: 5px solid #FFF;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.language .head {
    padding: 5px 25px 5px 15px;
    color: #FFF;
    background: #000;
}
.language ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #000;
}
.language ul li a {
    display: block;
    color: #FFF;
    padding: 5px 15px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы