Я создаю мега-меню, стараясь соответствовать современным стандартам;CSS, jquery, bootstrap.
Google Images - Мега-меню
Мое меню предназначено для категорий товаров, которые я хочу динамически создавать в газетном стиле столбцов.Достаточно просто, у меня это хорошо работает.Для этого требуется фиксированная высота, из-за которой он переполняется по горизонтали.
В настоящее время я думаю, что при загрузке увеличивайте высоту каждого подменю до тех пор, пока не произойдет горизонтальное переполнение.Я могу заставить его работать с некоторым ручным вмешательством, которое не соответствует цели динамического макета.
.container {
width: 800px;
height: 100px;
display: flex;
flex: 1 1 auto;
}
.container .wrap {
display: flex;
flex: 1 1 auto;
flex-flow: column wrap;
align-content: flex-start;
}
.container .wrap .item {
width: 150px;
}
<div class="container">
<div class="wrap">
<div class="item">Item 1<br>a<br>b</div>
<div class="item">Item 2<br>a</div>
<div class="item">Item 3<br>a<br>b<br>c<br>d</div>
<div class="item">Item 4<br>a</div>
<div class="item">Item 5<br>a</div>
</div>
</div>
Этот стиль отлично работает для выравнивания элементов сверху вниз, слева направо, как требуется.
Теперь я пытаюсь увеличить высотукаждое подменю по мере необходимости.Лучшее решение состоит в том, чтобы обнаружить переполнение ширины и увеличить высоту для компенсации.
Я пробовал нативные JS и jQuery, я, кажется, застреваю, запуская их в функцию.Я могу обнаружить переполнение и увеличить высоту, как мой код ниже.Я хочу, чтобы операторы if были в цикле и выходили, когда больше не было переполнения, и заканчивались идеальной подгонкой.
EDIT Текущее рабочее решение
$(function () {
$(".container").each( function( index, element ){
var my_height = $(element).outerHeight();
if( $(element).prop('scrollWidth') > $(element).outerWidth() ) {
while( $(element).prop('scrollWidth') > $(element).outerWidth() )
{
my_height += 100;
$(element).css('height', my_height + "px");
}
}
});
});
Работает точно так, как задумано.
РЕДАКТИРОВАТЬ
Обновлен вопрос.Есть ли лучшее решение?Что-то, что не связано с циклом над каждым элементом на каждой странице.Чистый CSS был бы хорош, но пока не думаю, что это возможно.
Решил мою проблему перехода.При попытке обновить высоту в цикле, как указано выше, переход CSS вмешивается и создает бесконечный цикл.Это было легко исправить, я добавил новый класс в .container .transition и добавил $(element).removeClass("transition"); в начало или цикл и $(element).addClass("transition"); в конец.Это удаляет переход CSS из внутреннего цикла и добавляет его обратно в конце.
FINAL EDIT
Моя первая попытка была использовать столбцы CSS, но я не смогзаставить его работать в соответствии с моей спецификацией.Так было до тех пор, пока я не прочитал принятый ответ ниже. Я снова посетил колонки и после некоторого тестирования получил его работу.
Ref https://developer.mozilla.org/en-US/docs/Web/CSS/columns