Sprachumschaltcode für mehrsprachige Ressourcen. Dieser Code kann auf jeder einzelnen Seite oder auf allen Seiten der Website an einem beliebigen Ort eingefügt werden.
Selbstgeschriebener Code ist im Vergleich zu einem Plugin insofern günstig, als er nicht die zusätzliche Last enthält, mit der alle Plugins überladen sind, da sie für die vielseitigen Bedürfnisse der Benutzer erstellt wurden.
Einige benötigen einen kleinen Schalter, andere einen großen und wieder andere einen automatischen Übersetzer mit einem Editor, einem Admin-Panel und Bibliotheken. Die Entwickler packen also alles in eine Box, und auf einen Haufen benötigen sie auch eine Werbung und ein paar Links usw. und so weiter. aber frei.
Code wechseln
HTML
<div class="blok">
<ul class="topmenu">
<!--Russisch-->
<li><a href="https://site.ru/"><img src="images/Ru.jpg" alt="" width="89" height="34" /></a>
<ul class="submenu">
<!--Englisch-->
<li><a href="https://site.ru/en/"><img src="images/En.jpg" alt="" width="89" height="34" /></a>
<!--Deutsche-->
<li"><a href="https://site.ru/de/"><img src="images/De.jpg" alt="" width="89" height="34" /></a>
<!--Spanisch-->
<li"><a href="https://site.ru/es/"><img src="images/Es.jpg" alt="" width="89" height="34" /></a>
<!--Italienisch-->
<li"><a href="https://site.ru/it/"><img src="images/It.jpg" alt="" width="89" height="34" /></a>
<!--Französisch-->
<li"><a href="https://site.ru/fr/"><img src="images/Fr.jpg" alt="" width="89" height="34" /></a>
<!--jüdisch-->
<li"><a href="https://site.ru/he/"><img src="images/He.jpg" alt="" width="89" height="34" /></a>
<!--Chinesisch-->
<li"><a href="https://site.ru/zh/"><img src="images/Zh.jpg" alt="" width="89" height="34" /></a>
<!--Türkisch-->
<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);
}
Wie Sie sehen können — reines HTML + CSS.
In CMS-Designs werden normalerweise Eigenschaften für Listen festgelegt (Tags li, ul, ol). Daher müssen Sie möglicherweise Klassen in die li-Tags eingeben und Ihre Positionierungseigenschaften auf diese Klassen festlegen.
Bilder können von hier aus noch besser in Paint geschnitten werden. In Bilddiensten finden Sie nichts Besseres.
Ich wünsche Ihnen allen fruchtbare Arbeit.
