Меню для muse виджет – Выдвижное боковое меню для Adobe Muse – Muse Masters

Опубликовано Автор 5 комментариев

Мобильное меню для сайта (гамбургер-меню) » 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 уроки».

 

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

urokimuse.ru

Виджеты Меню для сайта Adobe Muse » Adobe Muse Уроки

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

В этом видеоуроке рассмотрим стандартные виджеты меню для сайта из библиотеки мини-приложений программы Adobe Musе:

— вертикальное меню;
— горизонтальное меню.

Эти бесплатные стандартные виджеты меню для сайта довольно часто применяются при создании сайтов в Adobe Muse и значительно ускоряют процесс верстки, позволяя автоматически добавлять в меню все страницы сайта, созданные в режиме План. Также есть возможность добавлять страницы в меню вручную, но даже и в таком режиме виджет упрощяет работу по созданию сайта.

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

Наш следующий урок по стандартным мини-приложениям программы Adobe Muse – это мини-приложения  или

Виджеты Меню.

Виджеты Меню для сайта. Вертикальное и горизонтальное меню.

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

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

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

Мини-приложение «Меню» позволяет нам быстро создавать меню для сайта. Об этих мини-приложениях у меня уже есть пара видеоуроков. Это мини-приложение позволяет быстро создать меню на сайте. Например, если у вас несколько страниц на сайте, а также есть еще и подстраницы – дочерние страницы, так называемые, то вы увидите, что автоматически в меню появились все эти страницы.

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

Виджеты Меню для сайта. Основные настройки.

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

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

Виджеты Меню для сайта. Быстрый дизайн.

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

Например, для этой кнопки я поставлю оранжевую заливку, и все остальные кнопки у меня не будут с такой заливкой. Если же у меня в опциях установлено «Редактировать вместе», и я изменяю цвет одной кнопки, например, я ставлю цвет зеленый, то у меня все кнопки автоматически становятся зелеными.

Виджеты Меню для сайта. Интервал.

Еще здесь есть настройки размера элемента. Либо мы выбираем «Одинаковый интервал», тогда мы получаем одинаковый интервал между надписями, либо мы выбираем «Равномерный размер» — равномерный размер каждой из кнопок – все кнопки у нас будут одинакового размера, как это видно сейчас. Если же мы выставим «Одинаковый интервал» и, например, у нас в одной из кнопок длинное название, то при создании следующей кнопки, мы получаем вот эти интервалы, которые между словами, одинаковыми. При этом сами кнопки у нас разного размера.

Виджеты Меню для сайта. Значки разделов меню.

Также мы можем здесь добавить еще «Показывать значок слева» -добавить сюда какую-нибудь картинку. Или вообще отключить подписи на кнопках, оставив только сами элементы. Также мы можем включить или выключить «Показывать значок справа» или, например, только «Подменю», если мы выставим здесь «Все страницы».

Виджеты Меню для сайта. Размещение частей меню.

И последняя опция, которую мы можем настраивать для меню – это «Размещение частей». Можем выбрать «По горизонтали; по центру», «По горизонтали; по верхнему краю» — у нас надписи все смещаются вверх, «По вертикали; по центру» и «По вертикали; по левому краю» — тогда все надписи на кнопках смещаются в левую сторону.

Виджеты Меню для сайта. Гибкая верстка. Выводы.

Вот такое стандартное мини-приложение, которое облегчает жизнь верстальщикам в программе Adobe Muse. На этом я заканчиваю данный видеоурок. Хотелось бы еще отметить, что данное мини-приложение легко подается гибкой верстке, например, мы выбираем: «Страницы верхнего уровня», «Равномерный размер» и теперь при гибкой верстке у нас меню вот так сжимается.

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

Подписывайтесь на мой канал, ставьте лайки к этому видео, пишите комментарии. И до встречи в следующих видеоуроках!

Смотрите также:

Виджеты Слайд-шоу для сайтаВиджеты Панели Adobe MuseВиджеты Композиции в Adobe MuseБесплатные виджеты для Adobe Muse

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

urokimuse.ru

Создание выпадающего меню в Adobe Muse

Здравствуй читатель блога sila-biznesa.ru В предыдущем уроке мы с тобой научились создавать простое меню в программе Adobe Muse. В этом уроке мы разберём, как создавать выпадающее меню в Adobe Muse.

Чтобы создать выпадающее меню нам нужна в программе Adobe Muse «библиотека мини-приложений».

Библиотека мини-приложений

В этой библиотеке нам нужно приложение «меню по горизонтали». Выбираем это приложение и перетаскиваем на страницу:

Меню по горизонтали

После чего у нас сразу открываются параметры меню. В параметре «тип меню» выбираем «вручную»:

Параметры меню в Adobe Muse

Теперь, чтобы создать несколько пунктов меню, я кликаю по созданному пункту меню 2 раза. После чего появляются квадратики с плюсами справа, слева и снизу. И нажимаем на плюсик справа, тем самым создавая ещё несколько пунктов меню:

Дальше нам нужно их переименовать. Просто кликаем по названию пункта меню 4 раза и меняем их название:

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

Фон меню в Adobe Muse

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

Размер шрифта меню в Adobe Muse

Точно так же меняем и сам шрифт, я ставлю шрифт Open-Sans Italic:

Теперь нужно создать подменю. Для этого выделяем тот пункт меню, в котором хотим сделать подменю. После чего нажимаем на плюсик, который находится под ним. И у нас появляется одно подменю:

Подменю в Adobe Muse

Меняем фон у подменю, для этого выделяем его и выставляем тот фон, который нам нужен:

Фон подменю в Adobe Muse

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

Все эти изменения я произвожу в своём сайте, более подробно смотрите в видео, которое находится в начале этой страницы.

Кстати! Вы можете заказать у меня следующие услуги:

  1. Создание Landing Page или небольшого сайта под заказ!
  2. Продвижение Вашего сайта в поисковых системах Яндекс и Google!
Вам понравился материал? Поблагодарить легко! Буду весьма признателен, если Вы поделитесь этой статьей в социальных сетях.

sila-biznesa.ru

Меню для сайта с подразделами » Adobe Muse Уроки

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

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

Меню для сайта. Создание проекта.

В сегодняшнем уроке по программе Adobe Muse мы рассмотрим, как создать меню для сайта.

Как всегда, мы начинаем с нуля и открываем программу Adobe Muse. Нажимаем «создать сайт» -> Окей, и у нас перед глазами только домашняя страница. Открываем ее в режиме дизайна. Как всегда, я буду использовать только стандартные приложения программы Adobe Muse, чтобы вам не приходилось скачивать никаких сторонних виджетов и дополнительных модулей. Открываем библиотеку мини-приложений программы Adobe Muse, переходим в закладочку «Меню» и выбираем меню, которое мы хотим создать. Перетаскиваю его правой кнопкой мыши на рабочее поле программы, отпускаю мышку, и сразу же у нас появилась одна кнопка в меню, которая ведет на домашнюю страницу нашего сайта. Здесь так и написано: «Домашняя».

Меню для сайта. Добавление страниц сайта.

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

Меню для сайта. Автоматические ссылки на страницы. Дизайн.

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

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

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

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

Меню для сайта. Меню в шаблоне.

Для того, чтобы это исправить, я отредактирую шаблон, который применен к каждой из этих страниц. Мы видим, что шаблон А применен ко всем нашим страницам. Я захожу на страницу «Домашняя» в режим редактирования, выделяю меню, нажимаю клавишу Ctrl+X, чтобы вырезать его из этой страницы, выхожу в режим «План сайта», кликаю на шаблон, чтобы войти в режим редактирования и нажимаю клавишу Ctrl+V, чтобы вставить меню в шаблон, передвигаю его в нужное место (давайте расположим его вот так) и давайте перейдем теперь опять на план сайта, чтобы посмотреть, что в каждой нашей странице теперь появилось меню автоматически. Если теперь мы зайдем в режим просмотра, то теперь мы сможем свободно кликать по нашим страницам сайта (красный, синий, зеленый) и будем переходить с любой страницы на любую другую, и так же на домашнюю. Вот так легко и просто создается меню в программе Adobe Muse: с помощью стандартного мини-приложения.

Меню для сайта. Меню с выпадающими списками.

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

Выходим в режим «План сайта», заходим в режим редактирования следующей страницы и выбираем цвет для неё — голубой. Давайте перейдем теперь к редактированиям шаблона и отредактируем наше меню так, чтобы оно отображало так же подразделы нашего сайта. Нажимаем на стрелочку для вызова параметров мини-приложения, и в настройке «Тип меню» мы выбираем все страницы. Мы видим, что тут же у нас появились к разделу «синий» два подраздела «темно-синий» и «голубой». Теперь мы можем так же отредактировать цвета этих кнопок: к темно-синему я поставлю темно-синий, к голубому я поставлю голубой. Давайте теперь перейдем в режим просмотра. Видим, что в меню в разделе «синий» появилась стрелочка, и при наведении мыши на эту кнопку меню, у нас выпадает список с подразделами сайта. Если мы теперь будем кликать на данные кнопки, то будем автоматически переходить на соответствующие страницы.

Меню для сайта. Заключение.

Вот так, дорогие друзья. Такой вот удобный модуль, который позволяет нам быстро создать меню для сайта в программе Adobe Muse, придумали разработчики самой программы. Далее вы можете отредактировать данное меню в соответствии со своими предпочтениями, задать им различные цвета, настройки, изменить шрифты, а затем сохранить его, как собственное мини-приложение со всеми своими настройками. Делается это просто: мы выделяем отредактированное меню (например, вот такое), нажимаем правую кнопку мыши, выбираем закладку «Добавить в библиотеку», далее мы выбираем, куда мы будем добавлять: в какую папку или закладку. Сейчас я делать этого не буду, но, а вы сможете потом найти выше сохраненное меню в разделе «Библиотека» программы Adobe Muse.

На этом все, дорогие друзья. Вы научились создавать меню для сайта в программе Adobe Muse: с выпадающими списками, с разделами и с подразделами. А я прощаюсь с вами до следующих видеоуроков. С вами был Дмитрий Шаповалов. Подписывайтесь на мой канал, ставьте лайк к этому видео и до встречи, друзья, в следующих уроках.

Другие видеоуроки про меню для сайта:

Адаптивное меню для сайта в Adobe MuseКак закрепить меню в шаблоне?
Как закрепить меню на сайтеМеню с прокруткой и фиксацией
Мобильное меню (раздвижная панель)
Мобильное меню для сайта (гамбургер-меню)
Виджеты меню для сайта

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

urokimuse.ru

Виджеты для Adobe Muse от QooQee

Компания QooQee создает виджеты для Adobe Muse, а также различные готовые шаблоны сайтов, посадочных страниц, блогов, магазинов.

Всего в арсенале виджетов от QooQee 48 штук:
– 10 по работе с изображениями и видео;
– 15 для встраивания различных элементов на сайт: переводчики, попапы, скроллы, карты и т.д.
– 5 для создания меню;
– 8 для работы с иконками: появление, анимация, взаимодействие;
– и еще с десяток различных виджетов, которые разработчики почему-то не отнесли ни к одной из категорий.

Все разработанные QooQee виджеты можно посмотреть на официальном сайте и там же их можно приобрести: цены варьируются от 6.99$ до 19.99$.

Бесплатные виджеты

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

Amphi Muse Navigation

Создание флэт-меню навигации — подробнее.

Anchor +

Расширенные возможности якорей — подробнее.

Buttony Muse Fading Buttons

Добавляет возможность использовать собственные стили для кнопок, не доступные по умолчанию — подробнее.

Disabler Widget

Отключает вертикальную/горизонтальную прокрутку — подробнее.

Facebook Share

Кнопки шэра от Фейсбука — подробнее.

Header Page

Фиксирует позицию шапки сайта на экране браузера (всегда отображается при скроле) — подробнее.

IN&OUT Transition

Добавляет возможность задать эффекты отображения элементов на странице — подробнее.

Instagram Widget

Добавляет фотки и информацию из инстаграмма на страницу — подробнее.

Scroll Master

Заменит вертикальный скрол на горизонтальный — подробнее.

Shapes

Наконец-то можно рисовать различные шейпы, а не только четырехугольники 🙂 — подробнее.

State Button Transition

Улучшенное переключение между состояния кнопок — подробнее.

Text Magic

Анимация текста — подробнее.

Скачать 12 описанных више виджетов одним архивом вы можете по ссылке.


Контент для участников Приватного форума

Вы не можете просматривать данный материал, т.к. не являетесь участником Приватного форума сайта Infogra. Если вы хотите стать его участником — прочитайте правила вступления.

infogra.ru

Адаптивное меню — Adobe Muse виджет для мобильной и планшетной версии меню

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

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

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

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

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

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

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