@lazy_mind

Как реализовать скрывающуюся кнопку переключения языка в мобильной версии сайта?

Как реализовать скрывающуюся кнопку переключения языка в мобильной версии сайта...
Сайт - лендинг. Место для кнопки в обычной версии есть. В мобильной ее нужно как-то скрыть, оставив торчать что-то вроде галочки. Чтобы при необходимости пользователь кликнул, оно раскрылось и он сменил язык, наконец.
Скрин текущей реализации кнопки прилагаю.
Желательно на чистом CSS.
<div class="langswitch">
    <a href="/en"><b>Switch to English</b></a>
</div>

div.langswitch {
    display: block;
    text-align: center;
    border: none;
    width: 150px;
    border-radius: 4px;
    padding: 5px 5px;
    background: #0b77ce;
    position: fixed;
    right: 30px;
    top: 30px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;
}
div.langswitch a {
    display: block;
    height: 100%;
    width: 100%;
    color: #fff;
    text-decoration: none;
}

602ddb80946f9726098504.png
  • Вопрос задан
  • 391 просмотр
Пригласить эксперта
Ответы на вопрос 1
@qpz
Через медиа-запрос и псевдоэлемент можно вот так, немного подправил ваши стили. Ну и вместо стрелки можно картинку залить. Разметку с языками допишите сами, там принцип тот же.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы