多语言资源的语言切换器代码。 可以在任何方便的位置将此代码插入网站的任何单个页面或所有页面上
自写代码与插件相比具有优势，因为它不包含使所有插件过载的额外负载，因为它们是为满足用户的通用需求而创建的。
有些需要一个小的开关，有些需要一个大的开关，还有一些需要带有编辑器，管理面板和库的自动翻译器，因此开发人员将所有内容都放在一个盒子中，并把它们放到一个堆中，它们还需要广告和几个链接等，依此类推， 但免费。
切换码
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/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标签中输入类并将定位属性设置为这些类。
可以从这里直接在Paint中剪切图片，甚至更好。 在图像服务中，您找不到更好的选择。
祝大家工作顺利。
