Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу высшего качества --

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.

Запись опубликована в рубрике Без рубрики. Добавьте в закладки постоянную ссылку.
А так же:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *