Приветствую!
Была поставлена задача реализовать меню как на скриншоте
https://goo.gl/RNTVgw.
Все бы ничего, но при hover, фон у пункта должен меняться на полупрозрачный.
Сейчас сделано следующим образом: динамически создаю before и after элементы через JS и назначаю им ширину да позиционирую, чтобы замостили свободное место.
var fillColumns = function () {
var headerWidth = $('header').innerWidth();
var navWidth = $('.navbar .navbar-nav').innerWidth();
var fillColumnWidth = Math.ceil((headerWidth - navWidth) / 2);
$('#fillColumns').remove();
var css = '<style id="fillColumns">.navbar .navbar-nav::before,.navbar .navbar-nav::after{width:' + fillColumnWidth + 'px;}</style>';
document.head.insertAdjacentHTML('beforeEnd', css);
};
Без них меню выглядит следующим образом
https://goo.gl/QebXC8. На голом CSS реализацию нашел
stackoverflow.com/questions/8283225/three-column-l... , но центральный блок не обтекается по контенту, поэтому остается пустое место без фона.
В общем вопрос таков. Как можно реализовать fluid layout из 3 столбцов, где центральный имеет ширину, равную ширине внутреннего контента, а боковые блоки растягиваются по свободному месту.
