Обрезать длинную навигацию, если она выключена.

Question

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

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

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

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

Буду признателен за любую помощь!

Спасибо!

Answer 1

Если вы знаете размеры навигации, я бы сказал, следующие шаги могут помочь:

1. Всегда есть элемент многоточия, со скрытым классом, переключаемым по мере необходимости.
2. Использование jquery $ ('navElement'). Offset(). Left + $ ('navElement'). Width вы получаете правое конечное положение для навигатора.
3. Теперь вы можете получить элемент в этом положении, возможно, используя Document.elementFromPoint(),
4. Идентифицируйте все элементы после этого элемента, вам нужно будет найти логику для этого, сделать их отображаемым блоком и обернуть все они в контейнере динамически.
5. Теперь отображение скрытия этого контейнера приведет к выпадающему эффекту.
6. До тех пор, пока вы можете идентифицировать логотип и другие компоненты, которые вы хотите показать/скрыть, когда они используются с помощью селекторов css, когда ваш навигатор становится липким, добавьте родительский класс в ваш навигатор и напишите css, чтобы скрыть эти элементы, когда внутри липкого класса ,

Такова логика, по которой я буду следовать на широком уровне, исходя из вашего вопроса.