Мобильное меню для сайта (гамбургер-меню)

Мобильное меню для сайта (гамбургер-меню)

Как создать мобильное меню для сайта, меню “гамбургер”, при нажатии на который раскрывается меню, и “гамбургер” перерастает в крестик, а затем все наоборот. Вы наверняка видели множество таких меню в мобильных версиях сайтов.

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

Мы сначала разберем готовый пример такого меню, а затем соберем его назад.

Смотрите видео:

В моем другом видеоуроке, вы сможете посмотреть, как создать мобильное меню с помощью виджета раздвижной панели. Смотрите видеоурок: Мобильное меню “раздвижная панель”.

Мобильное меню для сайта. Общий обзор.

В этом видеоуроке мы сделаем мобильное меню для сайта. Выглядеть оно будет вот так – такой вот гамбургер, который превращается в крестик, и при этом появляется меню: при клике меню то появляется, то исчезает. Вот такое меню мы с вами сделаем в этом уроке.

Я закрываю браузер и открываю программу Adobe Muse. Здесь у меня уже готовый проект, где содержится данный элемент. Это уже готовое меню. А сделаем мы его немного другим способом. Я не буду показывать, как сделать его с нуля, а, наоборот, покажу из чего состоит данный элемент.

Мобильное меню для сайта. Разбор компонентов.

Это мобильное меню я сделал из следующих компонентов:

  • Первый компонент – это обычное меню из библиотеки мини-приложений «Меню по вертикали». В его настройках у меня выстроено параметр «Вручную» для того, чтобы просто сделать несколько страниц. Если вы поставите здесь «Все страницы», то он будет у вас показывать страницы, которые находятся у вас в режиме «План» сайта. Направление стоит «По вертикали», поскольку это вертикальное меню. И все остальные настройки я не трогал, так они все и остались, как есть. Немного изменил дизайн, сделал кнопки синими и подписал страницы: «Страница1», «Страница 2», «Страница 3», «Страница 4» и «Страница 5».
  • Следующий элемент – это виджет из раздела «Композиции». Стандартный виджет программы, я взял здесь «Подсказка». Немного позже я покажу, как я сделал из нее вот такой простой элемент.
  • И следующий элемент – это сама кнопка. Кнопка представляет собой фрейм изображения, но немного необычный. Не обычный он тем, что он содержит несколько состояний. У него есть активное состояние. В этом состоянии он выглядит, как крестик. А в стандартном состоянии «Курсор над кнопкой» и нажата кнопка мыши, при котором данный фрейм изображения имеет состояние вот такого гамбургера. В стандартном состоянии он выглядит вот так.

Вот из этих трех компонентов у нас и состоит все мобильное меню.

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

Мобильное меню для сайта. Виджет “Подсказка”.

Как я уже говорил, сделал я ее из библиотеки мини-приложений Adobe Muse. Я взял виджет «Подсказка». Этот виджет выглядит довольно громоздко. И что здесь мы делаем? Мы выделяем эти два триггера и просто нажимаем клавишу «Delete» и удаляем. Оставляем только один триггер вот этот маленький и вот этот целевой объект. В целевом объекте здесь содержится картинка и текст. Мы их точно также удаляем. Конечно, можно сделать это гораздо проще, не выделяя и не нажимая клавишу «Delete».

Можно просто нажать правую кнопку мыши и выбрать здесь «Отменить все использованные стили». Таким образом, мы отменяем все стили, которые были применены к данному целевому объекту. Тоже самое мы можем сделать и с триггером. Давайте я немного перенесу его повыше и сделаю большим размером, далее нажму правую кнопку мыши и точно также нажму «Отменить все использованные стили». Мы получаем вот такой пустой элемент композиции, состоящий из целевого объекта и триггера. В принципе, то же самое, что и здесь вы видите.

Настройки выставляем здесь следующие. Для значений  «Показать целевой объект» и «Скрыть целевой объект» выбираем «Кнопка нажата», чтобы наш целевой объект появлялся при нажатии на триггер и целевой объект исчезал тоже при нажатии кнопки.  Переход оставляем «Затухание», «Скорость перехода» можно оставить 0,5. Здесь все оставляем дальше по умолчанию. Больше ничего изменять не надо. Единственно, можно эти размеры немножко уменьшить.

Таким образом, мы создали основной элемент, который будет содержать меню и кнопку. Что касается самой кнопки, давайте я создам новый фрейм изображения и расскажу, как я сделал эту кнопку.

Мобильное меню для сайта. Создание кнопки “крестик-гамбургер”.

Кнопку я сделал следующим образом. Данный фрейм изображения сейчас у нас пустой, я использовал функцию заливки. Для заливки у меня уже готовы были две картинки «Кнопка 1» и «Кнопка 2».

Идем снова в программу Adobe Muse, выделяем нам фрейм изображения. Идем в заливку и вставляем изображение, нажимая «Добавить». Выбираем «Кнопку 1». Тут пусть остается исходный размер, можно поставить «Заполнение», тогда данная картинка заполнит наш фрейм. В принципе, для нас это даже более удобно. Поставлю по центру, чтобы он разместился по центру. И далее мы идем в состояние этого фрейма изображения. Здесь в состоянии фрейма изображения мы выбираем состояние «Активное». После того, как мы выбрали состояние «Активное», мы идем снова в заливку и выбираем здесь другое изображение в виде крестика. Нажимаем «Открыть» и получаем следующую картину. У нас в состоянии «Курсор над кнопкой» и нажата кнопка мыши, кнопка будет выглядеть, как гамбургер, а в состоянии «Активное» он будет, как крестик выглядеть.

Теперь снова идем в состояние стандартное и включаем переход «Выцветание». Это нужно для того, чтобы добавить некоторые элементы анимации. Я выставляю здесь значение – 0,6, чтобы состояния данной кнопки плавно переходили друг в друга. Скорость можете оставить точно такую же, как здесь стоит. И задержку здесь нет ставить. Таким образом, мы создали эту кнопку. Можно сделать ее немного поменьше, поскольку у меня сама картинка была меньше, где-то 36х36 пикселей. И я еще уменьшу, чтобы не было никаких графических искажений в виде увеличенных пикселей в режиме «Просмотр».

Мобильное меню для сайта. Собираем меню.

Дальше этот фрейм изображения мы помещаем в триггер. Триггер подсвечивается жирной линией. Это означает, что данный триггер виджета «Композиции» подхватил фрейм изображения. Отпускаю левую кнопку мыши, и вот этот фрейм изображения разместился у нас в данный триггер. Триггер у нас больше, чем данное изображение, поэтому мы делаем его меньше, и он автоматически растягивается по данному фрейму изображения. Тоже самое делаем с меню. Выделяем это меню и перетаскиваем его в целевой объект композиции. Целевой объект у нас тоже больше, чем наше меню, поэтому мы выделяем данный целевой объект и делаем его меньше, чем данное меню.

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

Мобильное меню для сайта. Просмотр.

И вот мы получили мобильное меню для сайта. Нажимаю клавиши «Ctrl + Shift + E», чтобы просмотреть то, что у меня получилось в браузере. Вы видите вот такую вот кнопку, при нажатии на которую, появляется меню, и при повторном нажатии на которую, меню исчезает. Сама кнопка работает плавно. Переход от одного состояния к другому происходит плавно из-за того, что мы добавили эффект «Выцветание».

Мы создали сегодня мобильное меню для сайта. Используйте данный способ у себя на своих сайтах, а на этом я прощаюсь с вами до следующих видеоуроков! Подписывайтесь на мой канал, ставьте к данному видео лайки, пишите комментарии, пишите свои отзывы, с вами был Дмитрий Шаповалов на youtube-канале «Adobe Muse уроки».

 

Автор видеоурока
Дмитрий Шаповалов

Оставьте комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: