Çok dilli kaynak için dil değiştirici kodu. Bu kod herhangi bir sayfaya veya sitenin tüm sayfalarına uygun herhangi bir yere eklenebilir.
Kendi kendine yazılan kod, kullanıcıların çok yönlü ihtiyaçları için oluşturuldukları için tüm eklentilerin aşırı yüklendiği ek yükü içermemesi açısından bir eklentiyle olumlu bir şekilde karşılaştırılır.
Bazılarının küçük bir anahtara ihtiyacı var, bazılarının büyük bir anahtara ihtiyacı var ve diğerlerinin bir düzenleyiciye, bir yönetici paneline ve kitaplıklara sahip bir otomatik çevirmene ihtiyacı var, bu nedenle geliştiriciler her şeyi bir kutuya koyuyorlar ve bir yığın halinde bir reklama ve birkaç bağlantıya vb. İhtiyaçları var. ama ücretsiz.
Kodu değiştir
HTML
<div class="blok">
<ul class="topmenu">
<!--Rusça-->
<li><a href="https://site.ru/"><img src="images/Ru.jpg" alt="" width="89" height="34" /></a>
<ul class="submenu">
<!--Ingilizce-->
<li><a href="https://site.ru/en/"><img src="images/En.jpg" alt="" width="89" height="34" /></a>
<!--Almanca-->
<li"><a href="https://site.ru/de/"><img src="images/De.jpg" alt="" width="89" height="34" /></a>
<!--İspanyol-->
<li"><a href="https://site.ru/es/"><img src="images/Es.jpg" alt="" width="89" height="34" /></a>
<!--İtalyan-->
<li"><a href="https://site.ru/it/"><img src="images/It.jpg" alt="" width="89" height="34" /></a>
<!--Fransızca-->
<li"><a href="https://site.ru/fr/"><img src="images/Fr.jpg" alt="" width="89" height="34" /></a>
<!--Çince-->
<li"><a href="https://site.ru/zh/"><img src="images/Zh.jpg" alt="" width="89" height="34" /></a>
<!--Türk-->
<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);
}
Gördüğünüz gibi saf html + css.
CMS temalarında, listelerin özellikleri genellikle ayarlanır (li, ul, ol etiketleri), bu nedenle li etiketlerine sınıflar girmek ve konumlandırma özelliklerini bu sınıflara ayarlamak gerekebilir.
Resimler, Paint’te buradan kesilebilir ve daha da iyisi kesilebilir. Görüntü hizmetlerinde daha iyi bir şey bulamazsınız.
Hepinize verimli çalışmalar dilerim.
