Мобильное меню (раздвижная панель) в Adobe Muse
В этом видеоуроке мы научимся делать мобильное меню (раздвижная панель) для сайта с помощью стандартного мини-приложения (виджета) программы Adobe Muse – раздвижная панель. В последнее время многие задаются таким вопросом – как сделать мобильное меню для сайта.
Смотрите об этом в этом видео:
Мобильное меню (раздвижная панель)
В этом видео мы сделаем мобильное меню (раздвижная панель) для сайта, но оно будет отличаться от нашего предыдущего урока, поскольку мы будем делать это мобильное меню при помощи других стандартных мини-приложений или виджетов в программе Adobe Muse. Мы будем использовать раздвижную панель. Выглядеть это меню будет вот так. Допустим, у нас есть мобильная версия сайта, и меню будет выезжать и назад сворачиваться по клику на нем.
Подготовка основных блоков.
Давайте перейдем в режим «Дизайн». Я сделал это меню на обычной домашней странице версии «Компьютер». Выглядит оно вот так. Состоит из двух мини-приложений программы Adobe Muse. Первое мини-приложение – это мини-приложение из раздела «Панели» – называется «Раздвижная панель». Второе мини-приложение, которое я использовал – это мини-приложение «Меню», из которого выбираем «По вертикали». Из этих двух мини-приложений состоит все мобильное меню. Меню по вертикали находится внутри раздвижной панели. Если мы сейчас разберем данную структуру, то мы можем вытащить сейчас отдельно меню, и отдельно у нас находится вот такое мини-приложение, составленное из раздвижной панели.
Далее я создал альтернативный макет «Телефон» и перенес туда это меню. Давайте снова перейдем в режим «Домашний» и я снова буду работать здесь. Берем раздвижную панель и перетаскиваем на сайт. Берем также меню по-вертикали из «Библиотеки мини-приложений». И давайте будем делать мобильное меню (раздвижная панель).
Настройки приложения – Мобильное меню:
В самом мобильном меню я сделал следующие настройки. Выставил страницы «Вручную», для того, чтобы просто добавить несколько страниц. Вы можете оставлять здесь страницы верхнего уровня либо все страницы, для того чтобы в меню автоматически добавлять все страницы из режима «План» программы. Я выставляю «Вручную» и пишу здесь: «Страница 1» для примера. Теперь добавлю еще несколько страниц – «Страница 2», «Страница 3», «Страница 4», «Страница 5». И немного растяну данное меню, чтобы оно выглядело как в моем примере. Сделаю заливку синим цветом. И вот, в принципе, вы уже видите, что меню похоже на то, которое у меня было. Можно еще изменить текст, я поставлю «Open Sans» – так намного похоже получилось. Давайте я уберу эти две готовые композиции вниз и буду продолжать здесь.
Настройки приложения – Раздвижная панель.
Меню у меня уже готово. Теперь поработаем с раздвижной панелью. Здесь в раздвижной панели уже есть какой-то контент, его здесь три штуки, они переключаются. Нажимаем здесь правую кнопку мыши и выбираем «Удалить содержимое мини-приложения». Таким образом, мы удаляем все, что находится внутри данного мини-приложения в области содержимого и две лишний раздвижные панели, которые нам не нужны. Также выбираем по правой кнопки мыши «Удалить все использованные стили». Выбираем сразу для текста «Open Sans». И давайте отредактируем эту верхнюю раздвижную панель. Здесь мы напишем: «Мобильное меню», текст у нас стоит «Arial», мы поставим «Open Sans» и немножко сдвинем его вниз, а также подвинем его вперед. Можно сделать еще буквы все заглавными и жирными. Я поставлю для букв цвет белый. Сейчас их не будет видно, но я для данной раздвижной панели сделаю заливку черным. Я немножко поспешил. Здесь нужно выставить сначала состояние «Стандартное», а потом сделать заливку черным. Почему я это делаю? Потому что при редактировании стандартного состояния, все остальные состояния этой кнопки будут автоматически подстраиваться под это первое.
Сборка мобильного меню и раздвижной панели.
Дальше, что нам нужно сделать – это просто переместить данное меню в область содержимого нашей раздвижной панели. Я размещаю его вот здесь, отпускаю, и оно подхватывается областью содержимого раздвижной панели. Можно немного ее уменьшить по размеру данного блока. И, в принципе, наше мобильное меню готово.
Осталось его немного настроить. Для этого мы заходим в настройки раздвижной панели и выставляем здесь галочки «Закрывать все» и «Перекрывать элементы ниже», чтобы наши элементы, которые расположены ниже данной раздвижной панели не уезжали вниз при раскрытии меню. Если мы уберем данную галочку, то наше меню при разворачивании будет смещать все элементы, которые расположены ниже.
Просмотр готового блока – Мобильное меню (раздвижная панель).
Давайте зайдем в режим «Просмотр» и посмотрим, что у нас получилось. В режиме «Просмотр» у нас есть вот такое меню, которое разворачивается и сворачивается при нажатии на него. Переходим назад в режим «Дизайн» (сейчас у нас данное меню развернуто), мы кликаем сюда левой кнопкой мыши, и меню сворачивается. Теперь при просмотре у нас будет показываться только меню – сама кнопка, и когда мы на нее нажимаем, у нас выдвигается остальное меню нашего сайта. При повторном нажатии меню сворачивается. Дальше я просто добавил альтернативный макет для сайта «Телефон», и у меня появились данные кнопки.
Размещение и меню в планшетной версии сайта.
Давайте создадим теперь версию не «Телефон», а «Планшет». Нажимаю «ОК» и у меня появляется версия для планшета. Перехожу в режим «Дизайн» в данной версии. У меня открывается дополнительное окошко «Домашняя [Планшет]», теперь перехожу в режим «Домашняя [Компьютер]» и выделаю мобильное меню, которое только что создал. Нажимаю клавиши «Ctr+C», чтобы скопировать либо нажимаю правую кнопку мыши и выбираю «Копировать». Перехожу в режим «Дизайн» в домашней странице «Планшет» и нажимаю здесь сочетания клавиш «Ctr+V» либо нажимаю правую кнопку мыши и выбираю «Вставить». Мобильное меню вставляется на домашнюю страницу в режиме «Планшет». Теперь я могу его разместить, где мне будет удобно. Могу растянуть его побольше, например, сделать во всю ширину планшетной версии.
Давайте зайдем в режим «Просмотр», у нас открывается режим «Просмотр» в планшетной версии, допустим, мы просматриваем на iPad в вертикальном расположении. И теперь при нажатии на мобильное меню у нас будут выезжать вот такие кнопки страниц нашего сайта. При повторном нажатии это меню сворачивается.
Таким образом, мы можем создать мобильное меню (раздвижная панель) из двух стандартных виджетов программы Adobe Muse – это виджет «Раздвижной панели» и виджет «Меню по вертикали».
На этом я заканчиваю данный урок. Обязательно ставьте лайки к этому видео, смотрите мои предыдущие и следующие видеоуроки, подписывайтесь на мой видеоканал. С вами был Дмитрий Шаповалов. До встречи в следующих видеоуроках!
Смотрите также:
Адаптивное меню для сайта в Adobe Muse
Виджеты Меню для сайта Adobe Muse
Автор видеоурока
Дмитрий Шаповалов