Начало > Помощен център > Апликации > WordPress > WordPress plugins - Sticky Menu on Scroll

WordPress plugins - Sticky Menu on Scroll

Помощен център

WordPress plugins - Sticky Menu on Scroll

Sticky Menu on Scroll е WordPress плъгин, който 'залепва' навигационното меню или друг елемент от страницата, за горната част на екрана при скролиране докато останалата част от страницата преминава под него. По този начин посетителите винаги имат достъп до главното навигационно меню и по-лесно могат да достигат до ресурсите в сайта.

Дори безплатната версия на Sticky Menu on Scroll предоставя достъп до достатъчен брой настройки, с които може да персонализираме работата на плъгина.

Инсталираме и активираме плъгина през Plugins > Add New:

Инсталиране и активиране на Sticky Menu on Scroll

В главното меню кликаме myStickymenu > Settings:

Достъп до Sticky Menu on Scroll в главното меню

Конфигуриране на myStickymenu

За да работи плъгина коректно, трябва да определим коректния CSS клас (или ID) на менюто, което желаем да залепим. Най-лесния начин да открием този клас е да кликнем върху елемента с десен бутон на мишката и в менюто да кликнем линка Inspect Element:

Линк Inspect Element в меню

В новия панел, в раздела Inspector, посочваме различни части от кода и в сайта съответните секции биват автоматично селектирани. Продължаваме да навигираме в кода на страницата докато достигнем точния код, при който цялата лента на менюто е селектирана. В кода копираме id или class, както е показано на изображението:

Селектиране на елемент при посочване в кода

и го поставяме (paste) в секция Sticky Class:

Поставяне на CSS клас в Sticky Class

Ако решим да използваме id селектор, вместо точка трябва да въведем знак диез (#) преди името (#site-navigation).

От полето Fade or slide effect избираме дали менюто да се появява (fade) след като се скрие от екрана или да се плъзга надолу (slide):

Настройка Fade or slide effect

В полето Make visible on Scroll посочваме колко пиксела, след като се скрие менюто при скролиране, да се покаже отново:

Настройка Make visible on Scroll

От опцията Sticky Background Color може да променим фоновия цвят на менюто след залепването:

Настройка Sticky Background Color

Опцията Sticky Opacity ни позволява да настройваме прозрачност на залепеното меню при стойности под 100 (80-90) и скролираното съдържание ще прозира под менюто:

Настройка Sticky Opacity

Стойността на Sticky Transition Time определя колко бързо да се показва (fade или slide) менюто след скролирането:

Sticky Transition Time

Запазваме настройките като кликнем бутона Save в долния край на панела и зареждаме сайта:

Зареждане на сайта в браузър

При скролиране хедъра (Gutenberg) се скрива, а менюто залепва за горния край на браузъра:

Залепено от myStickymenu навигационно меню

myStickymenu - информационна секция

Разработчиците на myStickymenu са добавили и различна функционалност към основния плъгин - информационна секция (Welcome bar). Секцията е подходяща за публикуване на съобщения (промоции, промени в сайта), които искаме да сме сигурни, че посетителите няма да пропуснат.

Изглед на информационната секция Welcome bar

Достъп до настройките на информационната секция имаме през раздела Welcome Bar в панела myStickymenu:

Достъп до Welcome bar

или през линка myStickymenu > Welcome Bar в Dashboard:

Достъп до Welcome Bar през меню Dashboard

По подразбиране лентата Welcome Bar е изключена. За да я включим трябва да активираме бутона myStickymenu:

Активиране на бутона myStickymenu

Настройките, достъпни само в платената версия, имат допълнителен бутон с катинар и етикет Upgrade Now.

През бутоните Background Color и Background Text Color настройваме фоновия цвят на лентата и цвета на текста:

Настройки на фона и текста на Welcome Bar

В следващата серия от настройки дефинираме шрифта (Font), големината на текста (Font Size), въвеждаме текста в полето Bar Text и в Show X определяме къде да се зарежда иконата X за затваряне на лентата, като поставяме или премахваме отметки в полетата Desktop и Mobile:

Настройки на текст

Настройките в секция Button определят основните функционалности на бутона:

  • Button - с поставяне или премахване на отметка в полето Desktop и Mobile определяме резолюцията, при която да се зарежда бутона.
  • Button Color - цвят на бутона;
  • Button Text Color - цвят на текста;
  • Button Text - въвеждаме текста на бутона;
  • Action - въвеждаме адрес за пренасочване след кликане на бутона;
  • Attention Effect - ако желаем да добавим анимационен ефект може да изберем такъв от падащото меню;

Настройки за бутона на Welcome Bar

На следващото изображение виждате активирани двете функции на myStickymenu - информационната лента и залепеното за нея навигационно меню:

Изглед на информационната лента и залепеното навигационно меню