Code de sélecteur de langue pour la ressource multilingue. Ce code peut être inséré sur n’importe quelle page individuelle, ou sur toutes les pages du site, à n’importe quel endroit pratique.
Le code auto-écrit se compare favorablement à un plugin en ce qu’il ne contient pas la charge supplémentaire avec laquelle tous les plugins sont surchargés, car ils sont créés pour les besoins polyvalents des utilisateurs.
Certains ont besoin d’un petit commutateur, d’autres ont besoin d’un gros commutateur, et d’autres encore ont besoin d’un traducteur automatique avec un éditeur, un panneau d’administration et des bibliothèques, de sorte que les développeurs mettent tout dans une seule boîte, et avant un tas, ils ont également besoin d’une publicité et de quelques liens, etc., etc. mais gratuit.
Changer de code
HTML
<div class="blok">
<ul class="topmenu">
<!--Russe-->
<li><a href="https://site.ru/"><img src="images/Ru.jpg" alt="" width="89" height="34" /></a>
<ul class="submenu">
<!--Anglais-->
<li><a href="https://site.ru/en/"><img src="images/En.jpg" alt="" width="89" height="34" /></a>
<!--Allemand-->
<li"><a href="https://site.ru/de/"><img src="images/De.jpg" alt="" width="89" height="34" /></a>
<!--Espagnol-->
<li"><a href="https://site.ru/es/"><img src="images/Es.jpg" alt="" width="89" height="34" /></a>
<!--Italien-->
<li"><a href="https://site.ru/it/"><img src="images/It.jpg" alt="" width="89" height="34" /></a>
<!--Français-->
<li"><a href="https://site.ru/fr/"><img src="images/Fr.jpg" alt="" width="89" height="34" /></a>
<!--Juif-->
<li"><a href="https://site.ru/he/"><img src="images/He.jpg" alt="" width="89" height="34" /></a>
<!--Chinois-->
<li"><a href="https://site.ru/zh/"><img src="images/Zh.jpg" alt="" width="89" height="34" /></a>
<!--turc-->
<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);
}
Comme vous pouvez le voir — pur html + css.
Dans les thèmes CMS, les propriétés des listes sont généralement définies (balises li, ul, ol), par conséquent, il peut être nécessaire de saisir des classes dans les balises li et de définir leurs propriétés de positionnement sur ces classes.
Les images peuvent, et encore mieux, être coupées dans Paint à partir d’ici. Vous ne trouverez rien de mieux dans les services d’image.
Je vous souhaite à tous un travail fructueux.
