Развернуть меню на основе ширины

Question

Я изучал способы создания респираторного меню.

Стандартной методикой является использование навигатора на более мелких устройствах, который запускает какое-то выпадающее меню.

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

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

Вот меню: http://www.money.co.uk/

Как вы увидите изменения ширины экрана изменяет доступные параметры.

Я мог бы создать полудинамическую версию с использованием контрольных точек для запросов на мультимедиа, но было бы неплохо создать полностью динамическую версию. Я предполагаю, что он использует javascript, но, если технический агент сможет определить доступное пространство и необходимое пространство, я не знаю с чего начать.

У меня есть некоторые базовые знания js/jquery, но было бы признательно, если бы кто-нибудь мог дать мне несколько советов о том, как приблизиться к этому.

Заранее спасибо.

Answer 1

Отзывчивые меню - это ничего, но это просто манипулирование стилем по размеру экрана. Для этого вы можете использовать медиа-запросы CSS3. Он имеет встроенные функции для определения размера экрана.

@media (max-width: 912px) and (min-width: 681px) 

Затем вам нужно манипулировать таблицей стилей. Это очень распространенный подход. Хотя, вы можете пойти с javascript также, используя события изменения размера окна и соответственно изменить свою таблицу стилей. Поэтому, когда вы измените размер окна, он автоматически перезапишет определенную таблицу стилей.

Хотя, не рекомендуется управлять им через javascript, так как он имеет много сложностей кода при управлении стилем. Используйте мультимедийные запросы CSS.

Надеюсь, что это поможет :)