Адаптивное меню для сайта в Adobe Muse

Адаптивное меню для сайта в Adobe Muse

⭐Как быстро и легко сделать адаптивное меню для сайта в Adobe Muse с . О выходе нового виджета я сообщил Вам в одном из писем рассылки.

В связи с выходом одного очень интересного виджета – я записал для Вас этот видеоурок – получилась своего рода видеоинструкция и обзор, о том, как можно с его помощью ( или даже его демо-версии) сэкономить кучу времени и легко и просто создать гибкое меню для разных устройств в Adobe Muse. 🙂

Виджет  “Адаптивное меню”, позволяет намного быстрее и проще сделать меню для сайта в гибком макете Adobe Muse c использованием гибкой верстки и точек остановки. Он платный, и для того чтобы не покупать “кота в мешке” – смотрите это видео, а также скачивайте и пробуйте демо-версию виджета по ссылкам ниже.

Ссылка на страницу виджета: 

ПОСМОТРЕТЬ И СКАЧАТЬ ДЕМО-ВЕРСИЮ


Адаптивное меню для сайта. Об уроке.

В этом видео уроке мы быстро и просто сделаем адаптивное меню для сайта – гибкое меню с точками остановки в программе Adobe Muse. Использовать мы для этого будем новый виджет, который вышел совсем недавно на одном из русскоязычных сайтов по разработке виджетов. Стоит он 449 рублей.  Вы можете скачать демо-версию данного виджета, ссылки будет под этим видео. А также можете посмотреть демо-сайт.

Адаптивное меню для сайта. Скачивание и установка виджета.

Я скачал виджет по данной ссылке. Виджет мне достался в архиве. И в папке с архивом у нас два файла. Первый файл – это файл самого виджета и второй файл – это файл с демо-версией виджета. Давайте я распакую данный архив. Просто перетаскиваю себе на рабочий стол вот такие два файла. Для того чтобы добавить этот виджет в Adobe Muse, я кликаю два раза на данном виджете, и он у меня импортируется в библиотеку программы Adobe Muse. Если у вас нет данного раздела, хотя он стоит по умолчанию, то заходите в «Окно» и добавляете «Библиотека».

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

Адаптивное меню для сайта.  Создаем стандартное меню.

Для того чтобы использовать данный виджет, нам необходимо создать обычное меню для нашего сайта – обычное стандартное меню с помощью обычного стандартного виджета «Меню». Заходим в «Библиотеку мини-приложений» и в разделе «Меню» выбираем меню «По горизонтали». Поскольку у меня нет страниц на сайте, я сделаю меню вручную. Поставлю здесь меню «Вручную» и создам несколько дополнительных страниц, например, 5. Для того чтобы долго не думать, как их называть, я их обозначу: 1, 2, 3, 4, 5. Я сделал такое меню. И это меню у меня предназначено для версии сайта для компьютера. Я могу сделать здесь дизайн, какой мне понадобится, например, сделать его черным.

Адаптивное меню для сайта. Назначаем стили графики.

И все, что мы сейчас должны сделать, это назначить два стиля графики. Эти стили прописаны в самом виджете в «Настройки подключения виджета к стандартному меню». Нам нужно создать два стиля графики. Стиль графики «menu1» и стиль графики «open1». Первый стиль графики понадобится нам для подключаемого меню, а второй стиль графики для дополнительной кнопки открытия панели.

Давайте это и сделаем. Идем в «Стили Графики» и создаем здесь два стиля: один и второй. Первый стиль называем «menu1». Пишите именно строчными буквами, заглавных никаких не делайте. Нажимаю «ОК». И второй стиль я назову «open1» и нажимаю «ОК». У нас получилось два стиля графики: «menu1» и «open1». Первый стиль графики «menu1» я должен назначить на наше основное меню. Т. е. я выделяю это меню и выбираю здесь «menu1». У меня появился вот такой плюсик, я нажимаю на вот этот значок, чтобы переопределить стиль графики. Т. е. данный стиль графики у меня запомнил все настройки дизайна, который я сделал для этого меню. Далее выделяем наш виджет и определяем ему стиль «open1». Все со стилями графики разобрались.

Адаптивное меню для сайта. Создаем точки остановки.

Дальше мы создаем несколько точек остановки. Например, создаем точку остановки одну, вторую и давайте последнюю создадим в 320 пикселей. Теперь мы должны скрыть основное меню из тех точек остановки, где мы будем использовать дополнительное меню и, наоборот, скрыть дополнительное меню на тех точках остановки, где мы будем использовать основное меню. Основное меню у меня будет в первых двух точках остановки. Это 960 и 760 пикселей. Идем в самую большую точку остановки и нажимаем правую кнопки мыши на дополнительном меню и выбираем «Скрыть в точке остановки».

Точно также идем в следующую точки остановки 760 пикселей и выбираем здесь дополнительное меню, нажимаем правую кнопку мыши и выбираем «Скрыть в точке остановке». В следующей точке остановки 520 пикселей мы делаем все тоже самое, только с нашим основным меню. Нажимаем на нем правой кнопкой мыши и выбираем «Скрыть в точке остановки». Идем в 320 пикселей, выбираем основное меню и выбираем здесь «Скрыть в точке остановке». Таким образом, мы получили в точках остановки только дополнительное меню. Я поставлю его вот здесь. А в точках остановки 760 и 960 пикселей  у нас только основное меню.

Адаптивное меню для сайта. Смотрим результат.

Все, в принципе, мы все уже сделали. Если мы сейчас зайдем в режим «Просмотр», то вы увидите, что у нас сейчас видно основное меню. И если мы начинаем уменьшать размер браузера, оно адаптируется. И в какой-то момент просто перескакивает вот в такое дополнительное меню, при раскрытии которого у нас появляются такие замечательные разделы меню – плавно выезжают сбоку. И его можно открывать и закрывать. Давайте еще уменьшим. Оно у нас работает. В принципе, все легко и просто.

Адаптивное меню для сайта. Особенности виджета “Адаптивное меню”

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

Есть также опция отключения скролла страницы после вызова панели с меню. Т. е. если вы вызвали данную панель, то у вас отключается скролл страницы. Это у вас есть в настройках. Давайте посмотрим, где у нас есть в настройках данного виджета отключение скролла страницы. Идем в «Настройки адаптивного меню», здесь очень много настроек.

Адаптивное меню для сайта. Просмотр настроек виджета.

Первая настройка «Фиксация у левого края браузера». В демо-версии не все функции доступны, возможно, они будут доступны в полной версии виджета. Здесь мы можем настроить саму кнопку-гамбургер, как она будет выглядеть. Дальше у нас идет размер шрифта, различное выравнивание, фоновые цвета для пунктов меню. И также можем настраивать все цвета и отступы для выдвижной панели. Также есть интересная опция «Скрывать панель после клика на пункты подменю», т. е. когда в подменю используются якоря, если вы кликаете на один из пунктов меню и стоит здесь галочка, то меню автоматически скрывается, и вы переходите по якорной ссылке.

И та последняя опция, про которую сейчас шла речь – это «Отключить прокрутку страницы при открытии панели», т. е. при открытии панели меню, у вас автоматически будет отключаться скролл на сайте, прокрутка страницы сайта. Сейчас данная функция недоступна, поскольку это демо-версия виджета. Для того чтобы получить все доступные функции, вам необходимо приобрести полную версию виджета.

Адаптивное меню для сайта. Основные преимущества виджета.

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

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

На этом все, дорогие друзья, подписывайтесь на мой канал, ставьте лайки, пишите комментарии к этому видео и оставайтесь на связи. С вами был Дмитрий Шаповалов, всем пока!

Вам будет интересно:

Меню с прокруткой и фиксацией

Как закрепить меню в шаблоне?

Мобильное меню (раздвижная панель)

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

Виджеты Меню для сайта Adobe Muse

Как закрепить меню на сайте

 

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

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

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