Меню з фіксованою позицією для сайту

12

Від автора: меню на сайті є основним інструментом навігації по його сторінках. Але що ж робити, якщо у Вас на сторінці виводиться велика кількість матеріалів, адже при цьому користувач прокручує повзунок прокрутки вниз, далеко від Вашого меню, щоб повернутися до меню, йому доведеться назад переміщати повзунок прокрутки. Тому в даному уроці ми з Вами навчимося створювати меню з фіксованим положенням у вікні браузера. Причому спочатку меню буде займати своє звичайне положення і тільки при прокручуванні сторінки вниз на певну відстань, меню буде займати фіксоване положення, полегшуючи тим самим навігацію користувачів з Вашого сайту.

Меню з фіксованою позицією для сайтуМеню з фіксованою позицією для сайту

1. Підготовка до уроку

Спочатку давайте визначимося, що нам необхідно для даного уроку. Насамперед нам потрібно тестовий сайт, на якому ми будемо реалізовувати дане меню. Я пропоную в якості такого сайту взяти сайт працює на системі управління контентом wordpress.

Меню з фіксованою позицією для сайту

Як Ви бачите це звичайна стандартна тема, під даний движок, за єдиним винятком того, що на головній сторінці виводиться повний текст повідомлень і тому вона має значний розмір по висоті — це те що нам і потрібно.

Далі, нам потрібно бібліотека jQuery, тому переходимо на офіційний сайт цієї бібліотеки http://jquery.com потім за посилання Download jQuery, завантажуємо файл з кодом бібліотеки і зберігаємо в папці js, докорінно активної теми движка wordpress. І відразу ж підключимо дану бібліотеку, для цього відкриваємо файл header.php і пишемо наступний код, між тегами head: