Как создать фиксированную панель навигации на лендинг-пейдже

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

Хотите узнать, как выглядит фиксированная панель навигации на лендинг-пейдже? Нажмите и посмотрите DEMO.

Фиксированная панель навигации: инструкция создания

1. Вставьте код CSS

  • Выберите “Установки” в правой панели (1)

1 (1)

  • Затем нажмите “Пользовательские стили” (2)
  • В рубрике “Добавить пользовательский стиль” впишите код (3)

[syntax type=”css”]

.navfixed {
position: fixed !important;
top: 0;
width: 100%;
z-index: 999999;
}

[/syntax]

2

2. Добавьте название класса секции

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

  • Расширенные” (4)
  • В поле “Класс” впишите navfixed (5)

3

3. Создайте меню

  • Скопируйте ID секции, на которую будет вести ссылка (6)

4

4. Добавьте виджет текста

  • Добавьте виджет текста к секции из меню, а затем добавьте ссылку (7)5
  • Введите URL, вписывая “#”, а также ID секции из предыдущего пункта (8)

6

5. Добавьте код JavaScript для анимации

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

[syntax type=”js”]

<script>
$(function() {
$(‘a[href*=#]:not([href=#])’).click(function() {
if (location.pathname.replace(“/^/”, “”) == this.pathname.replace(“/^/” , “”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ + this.hash.slice(1) + ‘]’);
if (target.length) {
$(‘html,body’).animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>

[/syntax]

Вот и всё! Готово!

Если у Вас появились какие-либо вопросы или предложения, свяжитесь с нами!

Мы также приготовили для Вас видео инструкцию, описывающую все 5 шагов:

 

Leave a Reply

Your email address will not be published. Required fields are marked *