Language switcher code for multilingual resource. This code can be inserted on any individual page, or on all pages of the site, in any convenient place.
Self-written code compares favorably with a plugin in that it does not contain the additional load that all plugins are overloaded with, since they are created for the versatile needs of users.
Some need a small switch, others need a large one, and still others need an auto-translator with an editor, an admin panel, and libraries, so the developers put everything in one box, and to a heap they also need an advertisement and a couple of links, etc., and so on, but free.
Switch code
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);
}
As you can see — pure html + css.
In CMS themes, properties for lists are usually set (tags li, ul, ol), therefore, it may be necessary to enter classes in the li tags and set their positioning properties to these classes.
Pictures can, and even better, be cut in Paint right from here. You won’t find anything better in image services.
I wish you all fruitful work.
