Codice di cambio lingua per risorsa multilingue. Questo codice può essere inserito su qualsiasi singola pagina, o su tutte le pagine del sito, in qualsiasi posto conveniente.
Il codice scritto da sé si confronta favorevolmente con un plug-in in quanto non contiene il carico aggiuntivo di cui sono sovraccarichi tutti i plug-in, poiché sono creati per le esigenze versatili degli utenti.
Alcuni hanno bisogno di un piccolo interruttore, altri hanno bisogno di uno grande e altri ancora hanno bisogno di un traduttore automatico con un editor, un pannello di amministrazione e librerie, quindi gli sviluppatori mettono tutto in una scatola e in un mucchio hanno anche bisogno di una pubblicità e un paio di collegamenti, ecc. ma gratis.
Cambia codice
HTML
<div class="blok">
<ul class="topmenu">
<!--Russo-->
<li><a href="https://site.ru/"><img src="images/Ru.jpg" alt="" width="89" height="34" /></a>
<ul class="submenu">
<!--Inglese-->
<li><a href="https://site.ru/en/"><img src="images/En.jpg" alt="" width="89" height="34" /></a>
<!--Tedesco-->
<li"><a href="https://site.ru/de/"><img src="images/De.jpg" alt="" width="89" height="34" /></a>
<!--Spagnolo-->
<li"><a href="https://site.ru/es/"><img src="images/Es.jpg" alt="" width="89" height="34" /></a>
<!--Italiano-->
<li"><a href="https://site.ru/it/"><img src="images/It.jpg" alt="" width="89" height="34" /></a>
<!--Francese-->
<li"><a href="https://site.ru/fr/"><img src="images/Fr.jpg" alt="" width="89" height="34" /></a>
<!--Ebraica-->
<li"><a href="https://site.ru/he/"><img src="images/He.jpg" alt="" width="89" height="34" /></a>
<!--Cinese-->
<li"><a href="https://site.ru/zh/"><img src="images/Zh.jpg" alt="" width="89" height="34" /></a>
<!--Turco-->
<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);
}
Come puoi vedere — puro html + css.
Nei temi CMS, le proprietà per gli elenchi sono solitamente impostate (tag li, ul, ol), quindi potrebbe essere necessario inserire classi nei tag li e impostare le loro proprietà di posizionamento su queste classi.
Le immagini possono, e anche meglio, essere ritagliate in Paint proprio da qui. Non troverai niente di meglio nei servizi di immagine.
Auguro a tutti voi un lavoro fruttuoso.
