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

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

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

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

Виджеты Меню – стандартные виджеты Adobe Muse
Эффекты прокрутки (параллакс)
Как закрепить меню в шаблоне?

---

Меню с прокруткой. Общий обзор.

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

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

Меню с прокруткой. Создаем меню.

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

Эффекты прокрутки находятся в правой панели – есть вот такой значок и написано: «Эффекты прокрутки». У кого данной панели нет здесь, то заходим в «Окно» и выбираем здесь «Эффекты прокрутки» либо нажимаем сочетание клавиш ctrl+shift+F10, тогда данное меню появится у нас в правой панели нашей программы.  Для того чтобы сэкономить место, я сдвину сюда эту панель и у меня останется вот такой значок.

Меню с прокруткой. Применяем эффекты прокрутки.

Чтобы применить эффекты прокрутки к данным блокам, нам нужно их выделить. Я выделяю задний фоновый прямоугольник и  выделяю, зажав shift, наше меню. Таким образом, я выделил сразу два блока. Далее я нажимаю на значок «Эффекты прокрутки». Хочу сразу заметить, что данный блок работает только на постоянной ширине, т. е. если у нас в меню страницы выставлена постоянная ширина сайта. На гибком значении ширины сайта эффекты прокрутки не работают. Для данных блоков я выставляю значок «Перемещение» и у них появляется T-образный маркер.

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

Меню с прокруткой. Настройка эффектов прокрутки.

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

Так вот, начальное перемещение мы должны выставить  вверх и поставить здесь «1», т. е. мы говорим, что до того, как верхняя граница браузера коснется данного Т-образного маркера, наш блок со скоростью прокрутки равной “1” будет перемещаться вверх вместе с основным контентом сайта. Конечное перемещение нам нужно выставить «0», поскольку после того, как верхняя граница браузера коснется данного Т-образного маркера, мы хотим, чтобы данные блоки больше никуда не перемещались. Поэтому у нас конечное перемещение будет равно нулю.

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

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

Для фонового блока, который растянут на всю ширину браузера, стоит в перспективе «Растянуть по ширине браузера». И для него доступны только две функции.

Меню с прокруткой. Просмотр результата.

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

Меню с прокруткой. Выводы и особенности использования.

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

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

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