Столбцы меню в стиле кладки в мегаменю - PullRequest
Новая
       15

Столбцы меню в стиле кладки в мегаменю

1 голос
/ 14 июля 2020

Я пытаюсь организовать столбцы мегаменю так, чтобы они выглядели как мансардный макет, так что это не обязательно мансарда, это просто меню с нижними столбцами, ближайшими к верхним столбцам, причина этого в что в настоящее время нижняя часть столбцов выровнена друг с другом, оставляя большое пространство между верхними частями, когда ссылок мало. Я пробовал подход, показанный здесь: https://w3bits.com/css-masonry/, но у него есть свои недостатки и разбивает столбцы на 6/6, когда в нем меньше 8 столбцов, в меню должно быть 4 столбца, а затем разбить его на следующую строку .

структура html - это <u> с <li> внутри со ссылками.

каждый <li> - столбец, <ul> - контейнер

this is a design only of how this must be

here's is what the html structure looks like: https://jsfiddle.net/leandrorr/1wmdbsn7/11/

Я уже пробовал column-count: 4; в css и дочерние элементы с: display: inline-block; width: 100%;

Ответы [ 2 ]

3 голосов
/ 17 июля 2020

Использование кирпичной кладки здесь не лучший вариант. Поскольку каждый список должен начинаться и заканчиваться в одном столбце (каждый список имеет первый элемент, который является своего рода заголовком).

Другой вариант - у вас есть 4 столбца, тогда вы можете сложить 2 списка в один столбец (вам нужно найти хорошую комбинацию, чтобы она выглядела упорядоченной)

Пример: 

.list-container {
  display: flex;
  
}

.col {
  flex: 1;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 16px;
}
ul li {
  
}
ul li:first-of-type {
  font-weight: bold;
  padding-bottom: 10px;
}
<div class="list-container">
  <div class="col">
    <ul>
      <li>Group 1</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>   
    </ul>
    <ul>
      <li>Group 2</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
  <div class="col">
    <ul>
      <li>Group 3</li>
      <li>Item</li>
      <li>Item</li> 
    </ul>
    <ul>
      <li>Group 4</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>  
    </ul>  
  </div>
  <div class="col">
    <ul>
      <li>Group 5</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>  
    </ul>
    <ul>
      <li>Group 6</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>  
  
  </div>
  <div class="col"></div>
</div>

И если вы ищете способ сгруппировать их автоматически, чтобы они имели почти одинаковую высоту, вам нужно либо вручную, либо использовать javascript или код сервера для обработки этого (который по-прежнему требует наличия хороших комбинаций)

0 голосов
/ 17 июля 2020

Не идеально, но отзывчивый и простой в управлении. Не использует отображение Flexbox или Grid.

Использует CSS column-count для изменения количества отображаемых столбцов UL. Можно настроить на столбцы, отличные от 5,3 и 1. Промежутки между заголовками можно отрегулировать с помощью пустого

в списке.

Я добавил несколько псевдо-элементов, чтобы увеличить изображение только для демонстрации.

...