Мобільний меню (розсувні панель) в Adobe Muse
Мобільний меню (розсувні панель)
Підготовка основних блоків.
Давайте перейдемо в режим «Дизайн». Я зробив це меню на звичайної домашньої сторінці версії «Комп'ютер». Виглядає воно ось так. Складається з двох міні-додатків програми Adobe Muse. Перше міні-додаток - це міні-додаток з розділу «Панелі» - називається «Розсувна панель». Друге міні-додаток, яке я використовував - це міні-додаток «Меню», з якого вибираємо «По вертикалі». З цих двох міні-додатків полягає все мобільне меню. Меню по вертикалі знаходиться всередині розсувний панелі. Якщо ми зараз розберемо цю структуру, то ми можемо витягти зараз окремо меню, і окремо у нас знаходиться ось таке міні-додаток, складене з розсувної панелі.
Установки програми - Мобільний меню:
У самому мобільному меню я зробив наступні настройки. Виставив сторінки «Вручну», для того, щоб просто додати кілька сторінок. Ви можете залишати тут сторінки верхнього рівня або всі сторінки, для того щоб в меню автоматично додавати всі сторінки з режиму «План» програми. Я виставляю «Вручну» і пишу тут: «Сторінка 1» для прикладу. Тепер додам ще кілька сторінок - «Сторінка 2», «Сторінка 3», «Сторінка 4», «Сторінка 5». І трохи бійся дане меню, щоб воно виглядало як в моєму прикладі. Зроблю заливку синім кольором. І ось, в принципі, ви вже бачите, що меню схоже на те, яке у мене було. Можна ще змінити текст, я поставлю «Open Sans» - так набагато схоже вийшло. Давайте я приберу ці дві готові композиції вниз і буду продовжувати тут.
Установки програми - Розсувна панель.
Меню у мене вже готове. Тепер попрацюємо з розсувним панеллю. Тут в розсувний панелі вже є якийсь контент, його тут три штуки, вони переключаються. Натискаємо тут праву кнопку миші і вибираємо «Видалити вміст міні-додатки». Таким чином, ми видаляємо все, що знаходиться всередині даного міні-додатки в області вмісту і дві зайвий розсувні панелі, які нам не потрібні. Також вибираємо по правої кнопки миші «Видалити всі використані стилі». Вибираємо відразу для тексту «Open Sans». І давайте відредагуємо цю верхню розсувну панель. Тут ми напишемо: «Мобільний меню», текст у нас стоїть «Arial», ми поставимо «Open Sans» і трошки зрушимо його вниз, а також посунемо його вперед. Можна зробити ще букви все великими і жирними. Я поставлю для букв колір білий. Зараз їх не буде видно, але я для даної розсувний панелі зроблю заливку чорним. Я трошки поспішив. Тут потрібно виставити спочатку стан «Стандартне», а потім зробити заливку чорним. Чому я це роблю? Тому що при редагуванні стандартного стану, всі інші стану цієї кнопки будуть автоматично підлаштовуватися під це перше.
Збірка мобільного меню і розсувний панелі.
Далі, що нам потрібно зробити - це просто перемістити дане меню в область вмісту нашої розсувний панелі. Я розміщую його ось тут, відпускаю, і воно підхоплюється областю вмісту розсувний панелі. Можна трохи її зменшити за розміром даного блоку. І, в принципі, наш мобільний меню готове.
Залишилося його трохи налаштувати. Для цього ми заходимо в налаштування розсувний панелі і виставляємо тут галочки «Закривати всі» і «Перекривати елементи нижче», щоб наші елементи, які розташовані нижче даної розсувний панелі не виїжджали вниз при розкритті меню. Якщо ми приберемо цю галочку, то наше меню при розгортанні буде зміщувати все елементи, які розташовані нижче.
Розміщення і меню в планшетній версії сайту.
Таким чином, ми можемо створити мобільне меню (розсувні панель) з двох стандартних віджетів програми Adobe Muse - це віджет «Розсувний панелі» і віджет «Меню по вертикалі».