.nav оверрайд



На десктопах есть замес с "еще" в самом верхнем меню. Первым делом помечаем его .nav_fold - говорим о том, что в этом меню есть какое-то схлопывание. Это нужно для того, чтобы не затронуть какие-то остальные менюшки, которые так же делаются блоком .nav.

Дальше мы добавляем .nav__more и в этот элемент помещаем выпадайку .fold, все динамика выпадей убрана а этот блок.

Самое сложное здесь это понять в какой момент нужно скрыть последние айтемы меню и показать "еще". Пока что у нас проблемы только с Лоты/Участвую/Отзывы/Достижения. Ее рассматриваем индивидуально, и, получается, то надо в диапазаоне 768 - 960 скрыть два последних айтема. Это все я делаю в CSS`е медиазапросами.

Еще нам повезло, что скрывать надо именно два айтема (один - тупо, а больше и не надо). Если айтемов вдруг станет больше, то придется фигарить модификаторы типа
.nav__more_hide-from_item-3
.nav__more_hide-from_item-4 и т.д. И, соответтсвено, придется дублировать все эти выпадайки с разным количеством компонентов.

Это все нужно делать только в тех менюшках в которых может быть переполнение. Смотрим саму узкую версию в 768px. Если там все ок: http://prntscr.com/b5sj2m то ничего не предпринимаем. Если не ок: http://prntscr.com/b5sj8f то проворачиваем все вышесказанное.

Смотрим: