Adobe muse меню виджет: Использование горизонтальных и вертикальных меню в Adobe Muse

Разное 

Содержание

Лучшие бесплатные Adobe Muse виджеты для вашего сайта

  • Виджеты
  • Блог
  • Tutorials
  • Войти
  • Зарегистрироваться
  • Виджеты Social
    • Facebook Виджет
    • Facebook Кнопка
    • Instagram Feed
    • Instagram Profile
    • Pinterest Виджет
    • Twitter Виджет
    • Иконки Соцсетей
    • Социальные Кнопки
    Video
    • Vimeo Виджет
    • YouTube Виджет
    Audio
    • Аудио Плеер
    • Подкаст Плеер
    • Радио Плеер
    • Фоновая Музыка
    Reviews
    • Airbnb Отзывы
    • AliExpress Отзывы
    • Amazon Отзывы New
    • Apple App Store Отзывы
    • BBB Отзывы
    • Booking Отзывы
    • DealerRater Отзывы
    • Edmunds Отзывы
    • Etsy Отзывы
    • Facebook Отзывы Trending
    • G2 Crowd Отзывы
    • Google Play Отзывы
    • Google Отзывы
    • Hotels Отзывы
    • Houzz Отзывы
    • Instagram Отзывы
    • OpenTable Отзывы
    • TripAdvisor Отзывы
    • Trustpilot Отзывы
    • Yelp Отзывы
    • Виджет Отзывов
    • Слайдер Отзывов
    Chats
    • Facebook Чат
    • Telegram Чат New
    • Viber Чат
    • WhatsApp Чат
    • Онлайн Чат
    Forms
    • Конструктор Форм
    • Форма Обратной Связи
    E-commerce
    • PayPal Кнопка
    • Кнопка Звонка
    • Попап Конструктор
    • Таблица Цен и Тарифов
    • Таймер и Счетчик
Мобильное меню для сайта (гамбургер-меню) » Adobe Muse Уроки

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

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

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

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

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

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

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

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

Я закрываю браузер и открываю программу 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 уроки».

 

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

Адаптивное меню — Adobe Muse виджет для мобильной и планшетной версии менюАдаптивное меню — Adobe Muse виджет для создания адаптивного выдвижного меню на респонсивных и адаптивных сайтах с точками остановки.

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

Предлагаю решение, которое избавит от этих проблем с меню, на сайтах с точками остановки, раз и навсегда!

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

Особенности виджета:

  • Генерируется автоматически на основе стандартного меню
  • Не требуется дополнительно настраивать ссылки (берутся из основного)
  • Поддерживается один уровень вложенности подменю (вложенные пункты меню)
  • Активные пункты меню подсвечиваются
  • Опция отключения скролла страницы после вызова панели с меню
  • Автоматическое появление скролла внутри панели меню, если высота экрана не вмещает все пункты меню
  • 4 эффекта появления пунктов меню
  • Настраиваемые эффекты появления/скрытия зафиксированного меню при прокрутке страницы
  • Возможность подключать несколько меню на сайта
  • Возможность вызывать мобильное меню по клику на любую кнопку
  • Только самые важные и востребованные функции, ничего лишнего
  • Виджет написан с нуля, без применения сторонних js/css библиотек. Оптимизированный сжатый код.
  • Не имеет привязки по доменам и может использоваться на любом кол-ве ваших и клиентских сайтов.

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