Зарегистрируйтесь и оплатите любой тариф LPgenerator
Получите в подарок 3 бонуса на 9 470 руб.

Создание статичного (фиксированного) меню на целевой странице

Здравствуйте, уважаемые пользователи LPgenerator!

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

1. С помощью инструмента “Блок” создайте блок, который и станет основой вашего меню:

Создать блок

При необходимости в свойствах элемента справа задайте для него цвет или выполните заливку изображением.

2. В расширенных свойствах блока задайте атрибуты: position: fixed; top: 0px; left: 0px; border: 1px solid #333; width: 100%; opacity: 0.5;

CSS

где:

  • position – отвечает за фиксирование элемента;
  • top и left – за отображение элемента по заданной величине сверху и снизу;
  • border – за рамку вокруг элемента (также в этом атрибуте задаются параметры этой рамки);
  • width – отвечает за растяжение элемента во всю ширину страницы;
  • opacity – отвечает за видимость слоя, значение должно находится в пределе от 0 до 1.

Внимание! Атрибуты: position, top, left и width являются обязательными!

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

3. Добавьте элементы, которые должны быть размещены в статичном меню (кнопки, иображения, текст и т. д.).

4. Чтобы зафиксировать их на блоке меню, нужно для каждого из них прописать следующие атрибуты CSS: position: fixed; top: ‘X’px; left: ‘Y’px; border: 1px solid #333;opacity: 0.5;

где:

  • ‘X’ - число пикселей, на которое необходимо сдвинуть элемент сверху;
  • ‘Y’ - число пикселей, на которое нужно сдвинуть элемент слева.

Обратите внимание! Если элемент располагается ближе к правому краю, рекомендуем использовать атрибут ‘right’, без кавычек!

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

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

С уважением,
служба поддержки LPgenerator.ru 

blog comments powered by Disqus
Vitamin – сервис для выгодной интернет-рекламы
  • Управляйте всеми рекламными кампаниями из одного кабинета
  • Получайте +5% от своих расходов
  • Подключайте и анализируйте рекламные системы в 1 клик
copyright © 2011–2019 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".