Простое и интуитивно понятное меню навигации — один из важнейших элементов дизайна вашего веб-сайта. Он действует как карта, направляя посетителей за пределы главной страницы. С ростом числа людей, использующих Интернет на своих мобильных устройствах, ваш веб-сайт также должен иметь удобное меню навигации для мобильных устройств.
К счастью, Webflow упростил добавление сворачиваемой строки меню-гамбургера, которая упростит ваш мобильный сайт. Продолжайте читать, чтобы узнать, как редактировать это мобильное меню в Webflow.
Как добавить панель навигации
Гамбургер-меню — жизненно важный элемент дизайна при работе с ограниченным горизонтальным пространством. Это устраняет необходимость в громоздкой фиксированной панели навигации, которая занимает ценное пространство.
В Webflow это меню и его функции встроены в элемент NavBar. Чтобы добавить этот элемент в свой дизайн, нужно выполнить четыре простых шага:
- Нажмите значок “+” значок в верхней части левой панели, чтобы открыть окно “Добавить” панель.
- Прокрутите вниз до “Компоненты” раздел.
- Нажмите и удерживайте “NavBar” element.
- Перетащите элемент в заголовок страницы.< br>
Как изменить мобильное меню
После того как вы добавили панель навигации на свой веб-сайт, вы можете придать этому меню стиль и индивидуальность несколькими различными способами.
Как добавить дополнительные ссылки в меню
Элемент панели навигации содержит кнопку меню и меню навигации, причем последнее содержит навигационные ссылки. Когда вы добавите его в свой дизайн, будет несколько заполнителей ссылок, которые вы можете удалить или изменить вместе со ссылками на свой веб-сайт.
Выполните следующие действия, чтобы добавить дополнительные навигационные ссылки:
- Нажмите на любой элемент внутри панели навигации.
- Перейдите к разделу “Настройки элементов” панель справа.
- Нажмите на значок шестеренки, чтобы открыть &ldquo ;Настройки.”
- Перейдите к “Настройки NavBar” раздел.
- Коснитесь кнопки “Добавить ссылку” button.
Теперь, когда у вас есть достаточное количество ссылок для всех релевантных страниц вашего веб-сайта пришло время сделать реальную ссылку.
- Выберите навигационную ссылку.
- Перейдите в раздел “Настройки элементов” панель.
- Найдите “Настройки ссылки”
- Введите указанный URL-адрес веб-страницы в поле “URL” field.
Как изменить анимацию меню
В Webflow вы также можете изменить способ отображения мобильного меню, когда посетители нажимают кнопку меню. Вы можете выбрать один из трех типов анимации раскрытия:
- Раскрывающийся список – По умолчанию мобильное меню выпадает из панели навигации, когда посетитель нажимает кнопку меню. Он будет занимать всю ширину окна браузера.
- Справа – Если вы выберете эту анимацию раскрытия, ваше мобильное меню появится с правой стороны экрана. Это меню займет всю высоту окна браузера.
- Над левым – Этот тип меню идентичен верхнему правому, за исключением того, что меню навигации перемещается с левой стороны экрана.
Чтобы установить желаемую анимацию раскрытия, выполните следующие действия:
- Выберите любой элемент внутри панели навигации.
- Перейдите в раздел “Настройки элементов” панель в правой части экрана.
- Коснитесь значка шестеренки, чтобы открыть “Настройки”
- Навигация в “Настройки NavBar”
- Нажмите “Тип” option.
- Выберите нужный стиль в раскрывающемся меню.
В “Настройки NavBar” раздел, вы также можете управлять следующими параметрами:
- Замедление открытия: тип кривой, используемый для анимации открытого перехода.
- Замедление close: тип кривой, используемый для анимации перехода при закрытии.
- Duration: сколько времени требуется для отображения меню.
Обратите внимание, что продолжительность перехода измеряется в миллисекундах.
Как изменить стиль меню
Webflow упростил стиль любой части панели навигации, что позволяет легко вписать мобильное меню в дизайн вашего веб-сайта.
Стиль кнопки меню , выполните следующие действия:
- Нажмите кнопку меню.
- Перейдите к “Стиль” панель справа (значок кисти).
Панель «Стиль» позволяет изменить каждый аспект кнопки меню. Чаще всего дизайнеры меняют цвет и размер фона кнопки.
Чтобы изменить цвет фона, выполните следующие действия:
- Перейдите в раздел “Фоны”
- Нажмите значок в виде цветной рамки, чтобы открыть “Цвет Пикер»
- Выберите нужный цвет.
Если вы хотите изменить размер значка гамбургера, выполните следующие действия:
- Перейдите к разделу “Типографика” раздел.
- Увеличьте или уменьшите размер значка в “Aa” поле.
Вы также можете изменить цвет значка в поле выше, отмечена буквой A и цветной каплей.
Несмотря на то, что существует множество способов настроить кнопку меню, вы не можете заменить ее текстовым элементом или пользовательским изображением.
< h2>Мобильная навигация стала проще
Разрабатывая мобильное меню, вы хотите получить максимальную отдачу от довольно ограниченного пространства. Итак, постарайтесь не перегружать меню опциями, чтобы не сбивать посетителей с толку. Кроме того, убедитесь, что пункты меню короткие, четкие и легко читаемые.
После этого вы можете поиграть со стилем и анимацией меню, чтобы заинтересовать посетителей на каждом этапе пути.
< p>Вы пробовали добавить мобильное меню на свой сайт? Сколько вариантов вы включили? Дайте нам знать в разделе комментариев ниже.
