Есть меню, которое открывается на полный экран.
#menu {
position: fixed;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: linear-gradient(127deg, #ff6666, #902999);
overflow: hidden;
z-index: 100000;
}
<div id="menu"></div>
Теперь добавим несколько ссылок:
#menu {
position: fixed;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: linear-gradient(127deg, #ff6666, #902999);
overflow: hidden;
z-index: 100000;
}
#menu .content {
display: flex;
flex-flow: column;
}
#menu .content a {
margin: 1rem 0;
padding: 0.85rem 1rem;
position: relative;
color: #fff;
font-size: 30px;
font-family: 'Philosopher', sans-serif;
text-decoration: none;
}
<div id="menu">
<div class="content">
<a href="">Ссылка</a>
<a href="">Ссылка</a>
<a href="">Ссылка</a>
<a href="">Ссылка</a>
</div>
</div>
Пока что все нормально и работает как надо. Но давайте добавим намного больше ссылок (сколько их будет - не знаю).
Теперь ссылки не вмещаются. Попробуем использовать flex-wrap: wrap;
, чтобы невмещающиеся ссылки "перекидывались" направо.
Ссылки, которые не влезали, действительно переместились правее. Теперь ограничим высоту блока, чтобы тот занимал до 80% от доступной высоты.
Получилось. Теперь вопрос. Как добиться того, чтобы ссылки перекидывались ровно настолько дальше, насколько это нужно для того, чтобы в будущем можно было просто нажать кнопку вправо и те ссылки оказались бы по центру. Подробнее: открыл меню - 4 (например) ссылки (на самом деле, столько, сколько может влезть). Нажал на стрелку - страница "передвинулась", теперь видны 4 новые ссылки. Перелистнул еще - видны оставшиеся, например, 3 (тоже оцентрированные вертикально).
Что пытался сделать я: я установил overflow: hidden;
родителю ссылок, чтобы полосы горизонтальной прокрутки видно не было. Далее я добавил 100%-ую ширину ссылке (в надежде на то, что остальные сдвинутся на всю ширину меню). Вот, что получил.
Это не то поведение, которое мне надо. Дело в том, что ссылки теперь занимают 100% ширину, а ширина рамок (сделаны с использованием ::before
и ::after
) зависит именно от ширины ссылки. Соответственно рамки будут занимать всю ширину, в то время как тест ссылки может быть всего 10 символов длиной. Ставить на костыли рамки недопустимо по определенным причинам.
Собственно говоря, можно было бы поместить каждую группу ссылок в отдельный контейнер, ширина которого зависела бы от длины ссылок. Но я не знаю, сколько ссылок будет в контейнере, так как это количество зависит напрямую от доступной контейнеру высоты. Облом.
Итог: как разместить ссылки, оцентрированные горизонтально и вертикально, в несколько столбцов, чтобы при горизонтальном перелистывании можно было добавить контейнеру со ссылками margin-left: -100%;
(или что-то типа того) средствами JS и блок ссылок бы "провернулся" на доступную контейнеру ширину?
UPD.
Приведу более понятный пример. Представьте, что вы на каком-нибудь сайте нажали на фото и оно открылось в полный размер. Фото заняло 100% ширины экрана (браузера) и 100% высоты. После этого вы захватили его [фото] мышкой, потянули влево, перетащив тем самым новую фотографию. Теперь новая фотография заняла 100% ширины и высоты.
У меня та же самая ситуация, но:
- Вместо фотографии - n-ное количество ссылок.
- Количество ссылок зависит от высоты экрана (на одном мониторе поместится 10 ссылок, на другом - 5).
- Ссылки должны быть оцентрированы по вертикали и по горизонтали.
- Те ссылки, что не поместились на экран, переносятся в другую колонку. Но другая колонка тоже должна занимать 100% ширины и 80% (пускай 100%) высоты.
- При смахивании одной колонки со ссылками в сторону, должна, как фотография, выезжать новая колонка.
Проблема: вопрос заключается в следующем: как поделить ссылки на блоки (1) (частично решен с помощью flex-wrap)? Как разместить второй (третий, четвертый) блок со ссылками на таком расстоянии от предыдущего, чтобы при перелистывании новый блок был по центру? Аналогия: в ряд стоят 4 монитора (одинаковых). Первый блок - на первом мониторе, второй - на втором (и т.д.). Вот только мне нужно разместить эти блоки на одном мониторе, как будто бы друг за другом. Причем стоит учесть, что, если пользователь "стянул" окно браузера, то в блоке из 4-х ссылок останется 3. Соответственно, если было 4 блока по 4 ссылки, то после их перемещения, должно стать 5 блоков по 3 ссылки и еще один с одной ссылкой.
Надеюсь, теперь стало понятнее.
<ul>
и<li>
.<li>
назначить ширину 100%, а внутри них отцентровать<a>
уже с имеющимися рамками