Как создать слайд-меню в Adobe Muse - Блог MuseMaster - Все, что необходимо знать по работе с программой Adobe Muse })

Как создать слайд-меню в Adobe Muse

muse-left

Как создать слайд-меню в Adobe Muse

741
Наши спонсоры

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

Пошаговая инструкция

Пример 1 – Меню всплывает после наведения курсора

Для начала, создайте меню, используя виджет “Меню по вертикали”, который находится в библиотеке мини-приложений Adobe Muse. Можете добавить визуальные элементы, например, логотип компании (в примере это логотип Muse). Сгруппируйте элементы (Объект > Группировать) и разместите меню поверх всех слоев. Перенесите его в левую часть страницы.

muse-leftСгруппируйте элементы меню и перенесите их в левую часть страницы

Прикрепите сгруппированное меню в левом верхнем углу страницы.

muse-pinПрикрепите меню

Для создания всплывающего эффекта нужно добавить немного CSS кода на эту страницу. Откройте окно “Страница > Настройки страницы” и добавьте код в раздел “HTML для Head”:

 <style>
   #u611{
 
      transition-property: left;
      transition-duration: 0.2s;
      transition-timing-function: ease;
 
      -webkit-transition-property: left;
      -webkit-transition-duration: 0.2s;
      -webkit-transition-timing-function: ease;
   }
   #u611:hover{
      left:0px;
   }
</style>

Сначала вы обозначаете месторасположение меню (слева), а затем вы указываете, что когда курсор находится над элементом c id “u611″, идентификатор “left” принимает значение “0”. Элемент с id “u611” и есть наше меню. Вы не можете получить этот id непосредственно в Muse. Чтобы получить id вам нужно:

  1. Предварительно просмотреть вашу страницу в Google Chrome (Файл > Предварительный просмотр страницы в браузере)
  2. Открыть Инструменты Разработчика (Вид > Разработчик > Инструменты разработчика)
  3. Кликнуть на инструмент “Увеличительное стекло”
  4. Кликнуть на ваше меню на странице
  5. Получить “id” элемента

chrome-inspector

Используйте Inspector в Chrome, чтобы получить “id” для вашего меню

Как только вы получите ID, вы сможете обновить вышеуказанный код.

Вот как это выглядит: http://musechaize.businesscatalyst.com/

Пример 2 – Меню всплывает после клика

Для создания такого меню вам нужно добавить код JavaScript. По желанию можно добавить кнопку “закрыть”.

Снова таки, вам нужно предварительно просмотреть страницу в Chrome. Используйте инструмент Inspector для получения следующих ID: Группа (который содержит все элементы), иконка Меню и изображение для кнопки “закрыть”. Добавьте этот код в раздел(Страница > Параметры страницы):

Вот как это выглядит: http://musechaize.businesscatalyst.com/click-to-open.html

Вы можете скачать материалы примера по этой ссылке

Статья подготовлена по материалам сайта CreativeDroplets.

comments powered by HyperComments
Наши спонсоры
Материалы подобранные специально для вас

РЕКОМЕНДУЕМЫЕ МАТЕРИАЛЫ