Горизонтальне меню для сайту. Створення горизонтального анімованого меню з фіксованою позицією на сторінці засобами CSS і jQuery

11

Від автора: Часто буває так, що на одній сторінці необхідно розмістити текст великого обсягу – якусь наукову статтю або щось в цьому роді. При цьому може виникнути вимога відмовитися від поділу статті на сторінки в силу технічних обмежень або специфіки тексту. Здавалося б – і що в цьому такого? Невеликий дискомфорт викликає необхідність постійно повертатися (прокручувати вгору сторінки для того, щоб дістатися до навігації сайту і перейти у відповідний розділ. Спробуємо вирішити цю проблему. Створимо горизонтальне анімоване меню з фіксованою позицією на сторінці засобами CSS і jQuery.

Засобами CSS можна створити навігаційне меню, яке буде мати фіксоване положення у вікні браузера, незалежно від прокручування вмісту документа. Цей навчальний матеріал крок за кроком показує процес створення такого меню. Отже, давайте створимо горизонтальне меню для сайту.

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Шаг1. Розмітка HTML

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

Горизонтальне меню для сайту. Створення горизонтального анімованого меню з фіксованою позицією на сторінці засобами CSS і jQuery

На навігаційній панелі буде стандартний набір: посилання на основні розділи сайту, виконані у вигляді пунктів меню і проста форма для пошуку по сайту. Розмітка для всього цього буде приблизно такою:

Все повинно виглядати приблизно так:

Горизонтальне меню для сайту. Створення горизонтального анімованого меню з фіксованою позицією на сторінці засобами CSS і jQuery

Як бачимо, пункти навігаційного меню зібрані в невпорядкований (маркірований список. Далі йде проста форма пошуку з однією кнопкою і одним полем для введення тексту (форма «упакована» в додатковий блок div – це може знадобитися для CSS). Наприкінці йде елемент span, який містить текст для «ярлика». Все це укладена в «контейнер»