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

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

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

Как закрепить меню. Описание проблемы.

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

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

Как закрепить меню. Пример проблемного сайта.

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

Для этого я выделил меню и данную заливку – эти два элемента. И в верхнем меню, где фиксация, поставил вот такой значок. Меню зафиксировано и не будет прокручиваться вместе с остальным контентом. Данный шаблон «Шаблон-А» применен у меня к домашней странице. Это вы можете видеть вот здесь. Т. е. вот этот шаблон применен к домашней странице. Таким образом, все, что расположено в этом шаблоне, отображается у меня в данной странице. В том числе здесь распложено и данное меню. Мы заходим в режим «Просмотр» и вроде бы все хорошо выглядит. Меню работает. Но когда мы начинаем прокручивать страницу, у нас основной контент страницы наползает на данное меню, и получаются вот такие нехорошие косяки.

Как закрепить меню. Решение проблемы.

Как же исправить данную проблему? Всего-навсего нам нужно поработать со слоями. Со слоями в шаблоне и со слоями на домашней странице.

Как закрепить меню. Редактируем шаблон.

Первым делом идем в шаблон. В шаблоне мы выделяем все элементы меню, которые у нас есть. И идем в раздел «Слои». Здесь у нас имеется «Слой 1». И в этом слое у нас располагаются меню и прямоугольник – те два элемента, из которых я создал данное меню – шапку страницы. Хорошо, эти два элемента у меня расположены в «Слой 1». Запомнили.

Как закрепить меню. Редактируем домашнюю страницу.

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

Как закрепить меню. Работаем со слоями.

Что нужно сделать? Всего-навсего нам нужно создать еще один слой. Нажимаем на значок «Новый слой». И у нас появляется «Слой 2». Теперь мы выделяем все элементы нашего меню, т. е. можем их даже выделить вот здесь на странице или выделить здесь – в «Слой 1». И теперь мы должны эти два элемента переместить в «Слой 2». Либо мы делаем это здесь в панели, либо просто нажимаем правую кнопку мыши на данных элементах и выбираем «Переместить слой» в «Слой 2». Таким образом, мы сейчас переместили все элементы нашего меню в отдельный слой «Слой 2», который располагается над слоем «Слой1». Я думаю, вы уже догадались, что сейчас произойдет.

Поскольку наш «Слой 2» расположен над «Слой1», а в слое «Слой 1» у нас размещены все элементы страницы нашего сайта, то, таким образом, при просмотре (я нажимаю режим «Просмотр») проходит просчет. И теперь, если мы будем прокручивать страницу, то весь наш контент будет располагаться позади нашего меню, поскольку наше меню расположено в слое, который находится выше, чем слой со всеми элементами сайта, со всеми элементами данной страницы.

Как закрепить меню. Слой меню – только для меню.

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

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

Как закрепить меню. Просмотр и выводы.

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

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

 

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

 

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

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