Хотите навсегда избавиться от простатита, геморроя, молочницы и других воспалительных заболеваний?
Эффективное лечение народными средствами!
Прополис + эфирные масла целебных растений + масло какао

Selector de idioma sin complemento

Código de cambio de idioma para recurso multilingüe. Este código se puede insertar en cualquier página individual, o en todas las páginas del sitio, en cualquier lugar conveniente.

El código escrito por uno mismo se compara favorablemente con un complemento en el sentido de que no contiene la carga adicional con la que están sobrecargados todos los complementos, ya que se crean para las necesidades versátiles de los usuarios.

Algunos necesitan un interruptor pequeño, otros necesitan uno grande y otros necesitan un traductor automático con un editor, un panel de administración y bibliotecas, por lo que los desarrolladores ponen todo en una caja, y antes del montón también necesitan un anuncio y un par de enlaces, etc., etc. pero libre.

Cambiar código


HTML

<div class="blok">
<ul class="topmenu">
<!--Ruso-->
<li><a href="https://site.ru/"><img src="images/Ru.jpg" alt="" width="89" height="34" /></a>
<ul class="submenu">
<!--Inglés-->
<li><a href="https://site.ru/en/"><img src="images/En.jpg" alt="" width="89" height="34" /></a>
<!--Alemán-->
<li"><a href="https://site.ru/de/"><img src="images/De.jpg" alt="" width="89" height="34" /></a>
<!--Español-->
<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>
<!--Francés-->
<li"><a href="https://site.ru/fr/"><img src="images/Fr.jpg" alt="" width="89" height="34" /></a>
<!--Judío-->
<li"><a href="https://site.ru/he/"><img src="images/He.jpg" alt="" width="89" height="34" /></a>
<!--Chino-->
<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);
}

Como puede ver, puro html + css.

En los temas de CMS, las propiedades de las listas generalmente se establecen (etiquetas li, ul, ol), por lo que, quizás, las clases deban ingresarse en etiquetas li y establecer sus propiedades de posicionamiento en estas clases.

Las imágenes pueden, y mejor aún, cortarse en Paint desde aquí. No encontrarás nada mejor en los servicios de imágenes.

Les deseo a todos un trabajo fructífero.

Esta entrada fue publicada en Без рубрики. Guarda el enlace permanente.
А так же:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *