Код переключателя языков на мультиязычный ресурс. Этот код можно вставить на любую отдельную страницу, или на все страницы сайта, в любом удобном месте
Самописный код выгодно отличается от плагина тем, что не содержит в себе дополнительную нагрузку, которой перегружены все плагины, так-как они создаются для разносторонних потребностей пользователей.
Одним нужен маленький переключатель, другим большой, третьим нужен и автопереводчик с редактором, и админку, и библиотеки, вот разработчики и суют всё в одну коробочку, а до кучи ещё и рекламку и пару ссылочек и т.д., и т.п, зато бесплатно.
Код переключателя
HTML
<div class="blok">
<ul class="topmenu">
<!--Русский-->
<li><a href="https://site.ru/"><img src="images/Ru.jpg" alt="" width="89" height="34" /></a>
<ul class="submenu">
<!--Английский-->
<li><a href="https://site.ru/en/"><img src="images/En.jpg" alt="" width="89" height="34" /></a>
<!--Немецкий-->
<li"><a href="https://site.ru/de/"><img src="images/De.jpg" alt="" width="89" height="34" /></a>
<!--Испанский-->
<li"><a href="https://site.ru/es/"><img src="images/Es.jpg" alt="" width="89" height="34" /></a>
<!--Итальянский-->
<li"><a href="https://site.ru/it/"><img src="images/It.jpg" alt="" width="89" height="34" /></a>
<!--Французский-->
<li"><a href="https://site.ru/fr/"><img src="images/Fr.jpg" alt="" width="89" height="34" /></a>
<!--Еврейский-->
<li"><a href="https://site.ru/he/"><img src="images/He.jpg" alt="" width="89" height="34" /></a>
<!--Китайский-->
<li"><a href="https://site.ru/zh/"><img src="images/Zh.jpg" alt="" width="89" height="34" /></a>
<!--Турецкий-->
<li"><a href="https://site.ru/tr/"><img src="images/Tr.jpg" alt="" width="89" height="34" /></a>
</ul>
</li>
</ul>
</div>
CSS
.blok {
text-align: center;
width:89px;
}
.blok a {
text-decoration: none;
display: block;
transition: .5s linear;
}
.blok ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu > li {
display: block;
position: relative;
top:0;
left:0;
margin-bottom: 2px;
}
.submenu {
position: absolute;
left: 0;
top:0;
z-index: 5;
width:89px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .5s ease-in-out;
}
.submenu li {
position: relative;
top:0;
left:0;
}
.submenu .submenu {
position: absolute;
top: 0;
left: calc(100% - 1px);
left: -webkit-calc(100% - 1px);
}
.blok li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
Как видите — чистый html+css.
В темах оформления CMS, обычно задаются свойства для списков (теги li, ul, ol), поэтому, возможно, в теги li нужно будет ввести классы, и задать этим классам свои свойства позиционирования.
Картинки можно, и даже лучше, нарезать в Паинте прямо отсюда. В сервисах изображений вы ничего лучше не найдёте.
Желаю всем плодотворной работы.
