Как закрепить меню на сайте

Как закрепить меню на сайте

Как закрепить меню на сайте?

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

Смотрите видеоурок:

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

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

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

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

Как закрепить меню на сайте. Фиксация меню.

Что же нам нужно сделать? Мы переходим снова в режим редактирования нашего сайта, для того, что бы зафиксировать наше меню у правой границы браузера, мы должны выделить это меню (выделил его полностью), и применить к нему инструмент “Фиксации”. Находися он вот здесь – в верхней части программы.  Называется он “Фикс :” и вот такой квадратик с шестью маркерами в виде маленьктх квадратиков.

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

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

Как закрепить меню на сайте. Варианты фиксации меню.

Переходим снова в режим дизайна страницы. И например, мы хотим создать какой-нибудь дополнительный блок. Закрасим его каким-нибудь цветом. Например, я сделаю цвет зелёный. И, например, я хочу, что бы он был привязан к левой границе. Если я не сделал никаких настроек, и перейду в режим просмотра, то этот блок будет у меня отставать от левой границы в браузере, во-первых, и во-вторых – будет прокручиваться вместе с основным контентом. Для того, что бы сделать, что бы он был постоянно привязан к левой границе браузера, мы точно так же выделяем этот блок, выставляем ему фиксацию, только уже по левому краю.И уже теперь при включении режима “Просмотр”, мы видим, что блок привязан к левой границе в браузере и при прокрутке остаётся на месте.

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

На этом я заканчиваю данный урок. В нём вы узнали как закрепить меню на сайте в программе Adobe Muse. В частности это касается основного вертикального меню.

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

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

2 комментария к “Как закрепить меню на сайте

  1. Как сделать, чтобы при скролле до определенного элемента, пропадал элемент top_nav? Дело в том, что внизу сайта есть форма обратной связи и, если меню наезжает на нее, выглядит плохо. Заранее спасибо за код!

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

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

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