2

Есть меню, которое открывается на полный экран. Меню

#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;, чтобы невмещающиеся ссылки "перекидывались" направо.

flex-flow: column wrap;

Ссылки, которые не влезали, действительно переместились правее. Теперь ограничим высоту блока, чтобы тот занимал до 80% от доступной высоты.

Ограничили высоту

Получилось. Теперь вопрос. Как добиться того, чтобы ссылки перекидывались ровно настолько дальше, насколько это нужно для того, чтобы в будущем можно было просто нажать кнопку вправо и те ссылки оказались бы по центру. Подробнее: открыл меню - 4 (например) ссылки (на самом деле, столько, сколько может влезть). Нажал на стрелку - страница "передвинулась", теперь видны 4 новые ссылки. Перелистнул еще - видны оставшиеся, например, 3 (тоже оцентрированные вертикально).

Что пытался сделать я: я установил overflow: hidden; родителю ссылок, чтобы полосы горизонтальной прокрутки видно не было. Далее я добавил 100%-ую ширину ссылке (в надежде на то, что остальные сдвинутся на всю ширину меню). Вот, что получил.

100% ширина ссылок

Это не то поведение, которое мне надо. Дело в том, что ссылки теперь занимают 100% ширину, а ширина рамок (сделаны с использованием ::before и ::after) зависит именно от ширины ссылки. Соответственно рамки будут занимать всю ширину, в то время как тест ссылки может быть всего 10 символов длиной. Ставить на костыли рамки недопустимо по определенным причинам.

Собственно говоря, можно было бы поместить каждую группу ссылок в отдельный контейнер, ширина которого зависела бы от длины ссылок. Но я не знаю, сколько ссылок будет в контейнере, так как это количество зависит напрямую от доступной контейнеру высоты. Облом.

Итог: как разместить ссылки, оцентрированные горизонтально и вертикально, в несколько столбцов, чтобы при горизонтальном перелистывании можно было добавить контейнеру со ссылками margin-left: -100%; (или что-то типа того) средствами JS и блок ссылок бы "провернулся" на доступную контейнеру ширину?

UPD.

Приведу более понятный пример. Представьте, что вы на каком-нибудь сайте нажали на фото и оно открылось в полный размер. Фото заняло 100% ширины экрана (браузера) и 100% высоты. После этого вы захватили его [фото] мышкой, потянули влево, перетащив тем самым новую фотографию. Теперь новая фотография заняла 100% ширины и высоты.

У меня та же самая ситуация, но:

  1. Вместо фотографии - n-ное количество ссылок.
  2. Количество ссылок зависит от высоты экрана (на одном мониторе поместится 10 ссылок, на другом - 5).
  3. Ссылки должны быть оцентрированы по вертикали и по горизонтали.
  4. Те ссылки, что не поместились на экран, переносятся в другую колонку. Но другая колонка тоже должна занимать 100% ширины и 80% (пускай 100%) высоты.
  5. При смахивании одной колонки со ссылками в сторону, должна, как фотография, выезжать новая колонка.

Проблема: вопрос заключается в следующем: как поделить ссылки на блоки (1) (частично решен с помощью flex-wrap)? Как разместить второй (третий, четвертый) блок со ссылками на таком расстоянии от предыдущего, чтобы при перелистывании новый блок был по центру? Аналогия: в ряд стоят 4 монитора (одинаковых). Первый блок - на первом мониторе, второй - на втором (и т.д.). Вот только мне нужно разместить эти блоки на одном мониторе, как будто бы друг за другом. Причем стоит учесть, что, если пользователь "стянул" окно браузера, то в блоке из 4-х ссылок останется 3. Соответственно, если было 4 блока по 4 ссылки, то после их перемещения, должно стать 5 блоков по 3 ссылки и еще один с одной ссылкой.

Надеюсь, теперь стало понятнее.

7
  • 1
    Самый большой вопрос, который я тут видел, и дважды прочитав всеравно не понятно что в итоге хотите получить. тут без фидла и рисунка не обойтись 8 сен 2016 в 14:09
  • Вот такой вариант: список ссылок сделать тегами <ul> и <li>. <li> назначить ширину 100%, а внутри них отцентровать <a> уже с имеющимися рамками 8 сен 2016 в 14:15
  • Что-то вроде слайдера для меню применить.
    – SVE
    8 сен 2016 в 14:20
  • Кстати, а зачем вы делаете рамки псевдоэлементами? 8 сен 2016 в 14:53
  • @tutankhamun как вариант неплохо. Надо будет протестировать. 8 сен 2016 в 16:17

1 ответ 1

1

Поскольку вам все равно делать листалку на JS, вы можете разбивать ссылки на слайды по количеству или по высоте средствами JS.

Но как вариант можно сделать и так:

$('#prev, #next').on('click', function(e) {
  var el = $('.content'),
  	step = $('#menu').width(),
    leftLim = -$('li', el).last().position().left,
    leftNew;
  e.preventDefault();
  if ($(e.target).is('#next')) {
  	step = -step;
  }
  leftNew = Math.floor((el.position().left - step) / step) * step;
  leftNew = Math.min(leftNew, 0);
  leftNew = Math.max(leftNew, leftLim);
	el.css({left: leftNew});
});
#prev,
#next {
  position: absolute;
  top: 10px;
}
#prev {
  left: 80px;
}
#next {
  right: 80px;
}
#menu {
  position: fixed;
  display: flex;
  flex-flow: row 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: 10;
}
#menu .content {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  left: 0;
  transition: left .5s;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 10%;
  height: 80%;
  z-index: 20;
  width: auto;
}
#menu .content li {
  display: block;
  list-style: none;
  margin: .5rem 0;
  z-index: 20;
  width: 100vw;
  text-align: center;
}
#menu .content li a {
  padding: 0.85rem 1rem;
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 30px;
  font-family: 'Philosopher', sans-serif;
  text-decoration: none;
  text-align: center;
}
#menu .content li a:before {
  background: red;
  content: '';
  display: block;
  height: 2px;
  top: 0px;
  left: 0px;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
  <div id="prev">««</div>
  <div id="next">»»</div>
  <ul class="content">
    <li><a href="">Ссылка1</a>
    </li>
    <li><a href="">Ссылка2</a>
    </li>
    <li><a href="">Ссылка3333</a>
    </li>
    <li><a href="">Ссылка4</a>
    </li>
    <li><a href="">Ссылка5555555</a>
    </li>
    <li><a href="">Ссылка6</a>
    </li>
    <li><a href="">Ссылка77</a>
    </li>
    <li><a href="">Ссылка8</a>
    </li>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.