Eсть такая задача:
На моем сайте с десктоп
версией есть блоки со списками:
<div class="let-column" style="width: 49%; float: left">
<ul>
<li>Таб_1</li>
<li>Таб_2</li>
<li>Таб_3</li>
</ul>
</div>
<div class="right-column" style="width: 49%; float: left">
<ul>
<li>Тело_1</li>
<li>Тело_2</li>
<li>Тело_3</li>
</ul>
</div>
Что дает мне некую природу табов
в 2 колонки.
Требуется на мобильной версии сайта сделать так, чтобы те же блоки располагались вот так:
<div class="let-column" style="width: 49%; float: left">
<ul>
<li>Таб_1</li>
<li>Тело_1</li>
<li>Таб_2</li>
<li>Тело_2</li>
<li>Таб_3</li>
<li>Тело_3</li>
</ul>
</div>
<div class="right-column" style="width: 49%; float: left; display: none">
<ul>
</ul>
</div>
Вместо перемещение елементов, можно добавить во второй список елеметы первого и скрывать/показывать их с помощью @media
.tabs {
display: flex;
width: 100%;
border: 1px solid #eaeaea;
padding: 15px;
}
.tabs__nav,
.tabs__content {
flex: 1 1 50%;
list-style: none;
}
@media only screen and (min-width: 640px) {
.tabs__mobile-item {
display: none;
}
}
@media only screen and (max-width: 640px) {
.tabs__nav {
display: none;
}
}
<div class="tabs">
<ul class="tabs__nav">
<li class="tabs__nav-item">Tab 1</li>
<li class="tabs__nav-item">Tab 2</li>
<li class="tabs__nav-item">Tab 3</li>
</ul>
<ul class="tabs__content">
<li class="tabs__nav-item tabs__mobile-item">Tab 1</li>
<li class="tabs__content-item">Content 1</li>
<li class="tabs__nav-item tabs__mobile-item">Tab 2</li>
<li class="tabs__content-item">Content 2</li>
<li class="tabs__nav-item tabs__mobile-item">Tab 3</li>
<li class="tabs__content-item">Content 3</li>
</ul>
</div>
.tabs {
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid #eaeaea;
padding: 15px;
}
.tabs__nav {
display: flex;
justify-content: space-around;
}
@media only screen and (max-width: 640px) {
.tabs__nav {
flex-direction: column;
justify-content: space-around;
}
}
<div class="tabs">
<ul class="tabs__nav">
<li class="tabs__nav-item">Tab 1</li>
<li class="tabs__content-item">Content 1</li>
</ul>
<ul class="tabs__nav">
<li class="tabs__nav-item">Tab 2</li>
<li class="tabs__content-item">Content 2</li>
</ul>
<ul class="tabs__nav">
<li class="tabs__nav-item">Tab 3</li>
<li class="tabs__content-item">Content 3</li>
</ul>
Каким образом можно реализовать всплывающее окно "Остались вопросы" для Joomla?
Смотрю пример кодаУдивило, что сначала ConfigureAwait(false) вызывается на httpClient