WordPress plugins - Sticky Menu on Scroll
Съдържание
Sticky Menu on Scroll е WordPress плъгин, който 'залепва' навигационното меню или друг елемент от страницата, за горната част на екрана при скролиране докато останалата част от страницата преминава под него. По този начин посетителите винаги имат достъп до главното навигационно меню и по-лесно могат да достигат до ресурсите в сайта.
Дори безплатната версия на Sticky Menu on Scroll предоставя достъп до достатъчен брой настройки, с които може да персонализираме работата на плъгина.
Инсталираме и активираме плъгина през Plugins > Add New:
В главното меню кликаме myStickymenu > Settings:
Конфигуриране на myStickymenu
За да работи плъгина коректно, трябва да определим коректния CSS клас (или ID) на менюто, което желаем да залепим. Най-лесния начин да открием този клас е да кликнем върху елемента с десен бутон на мишката и в менюто да кликнем линка Inspect Element:
В новия панел, в раздела Inspector, посочваме различни части от кода и в сайта съответните секции биват автоматично селектирани. Продължаваме да навигираме в кода на страницата докато достигнем точния код, при който цялата лента на менюто е селектирана. В кода копираме id или class, както е показано на изображението:
и го поставяме (paste) в секция Sticky Class:
Ако решим да използваме id селектор, вместо точка трябва да въведем знак диез (#) преди името (#site-navigation).
От полето Fade or slide effect избираме дали менюто да се появява (fade) след като се скрие от екрана или да се плъзга надолу (slide):
В полето Make visible on Scroll посочваме колко пиксела, след като се скрие менюто при скролиране, да се покаже отново:
От опцията Sticky Background Color може да променим фоновия цвят на менюто след залепването:
Опцията Sticky Opacity ни позволява да настройваме прозрачност на залепеното меню при стойности под 100 (80-90) и скролираното съдържание ще прозира под менюто:
Стойността на Sticky Transition Time определя колко бързо да се показва (fade или slide) менюто след скролирането:
Запазваме настройките като кликнем бутона Save в долния край на панела и зареждаме сайта:
При скролиране хедъра (Gutenberg) се скрива, а менюто залепва за горния край на браузъра:
myStickymenu - информационна секция
Разработчиците на myStickymenu са добавили и различна функционалност към основния плъгин - информационна секция (Welcome bar). Секцията е подходяща за публикуване на съобщения (промоции, промени в сайта), които искаме да сме сигурни, че посетителите няма да пропуснат.
Достъп до настройките на информационната секция имаме през раздела Welcome Bar в панела myStickymenu:
или през линка myStickymenu > Welcome Bar в Dashboard:
По подразбиране лентата Welcome Bar е изключена. За да я включим трябва да активираме бутона myStickymenu:
Настройките, достъпни само в платената версия, имат допълнителен бутон с катинар и етикет Upgrade Now.
През бутоните Background Color и Background Text Color настройваме фоновия цвят на лентата и цвета на текста:
В следващата серия от настройки дефинираме шрифта (Font), големината на текста (Font Size), въвеждаме текста в полето Bar Text и в Show X определяме къде да се зарежда иконата X за затваряне на лентата, като поставяме или премахваме отметки в полетата Desktop и Mobile:
Настройките в секция Button определят основните функционалности на бутона:
- Button - с поставяне или премахване на отметка в полето Desktop и Mobile определяме резолюцията, при която да се зарежда бутона.
- Button Color - цвят на бутона;
- Button Text Color - цвят на текста;
- Button Text - въвеждаме текста на бутона;
- Action - въвеждаме адрес за пренасочване след кликане на бутона;
- Attention Effect - ако желаем да добавим анимационен ефект може да изберем такъв от падащото меню;
На следващото изображение виждате активирани двете функции на myStickymenu - информационната лента и залепеното за нея навигационно меню:
