Вертикальне меню для сайту у вигляді акордеона на jQuery

Меню, як відомо - невід'ємна частина сайту. Цікава навігація інтернет-ресурсу здатна зацікавити відвідувачів. Крім того, важливу властивість будь-якого меню - його компактність. Просте вертикальне меню легко створюється за допомогою HTML і CSS. Але ми підемо далі: повчимося створювати меню- "акордеон" за допомогою jQuery.

Створюємо меню- "акордеон"

Що таке вертикальне меню у вигляді акордеона? Це такий список, що розкривається, який створює зручну навігацію і надає стильність сайту. Меню, виконане в такому вигляді, дозволяє включити в себе багато підпунктів. Доступ до них відбувається при натисканні мишки по необхідного елементу. Хтось скаже, що можна зробити просте меню в такому стилі без застосування jQuery. Так це так. Але подібний об'єкт буде не дуже зручно використовувати власникам планшетів або смартфонів. Давайте створимо вертикальне меню, привабливе для всіх. Потім, змінюючи колірну стилізацію такий навігації, можна буде підлаштувати дизайн під будь-який сайт.

Код HTML

Отже, щоб створити наше вертикальне меню, спочатку треба набрати HTML-код, який буде містити наступні рядки:

Збережіть даний код у файлі під назвою Accord_menu.html.

Як бачите, ми створили невпорядкований список. Він складається з 3 основних пунктів:

- фотографії-

- фільми-

- книги.

У кожного пункту є по кілька підпунктів. Там де стоять #, вам треба буде додати посилання. Тепер важливо описати стилі. Все залежить від того, як виглядає ваш інтернет-ресурс. Вертикальне меню для сайту має гармонійно вписуватися в його дизайн.

CSS-код

Зі стилями у вас не повинно бути труднощів. Зазначимо лише, що в даному прикладі використовується градієнтна заливка. Ось як виглядає CSS-код:

В CSS-файлі задається колір, розмір, прибираються маркери зліва від елементів списку. Визначається, як буде вести себе кожен пункт і підпункт меню при наведенні на нього курсора. Наприклад:

# E1fee2 - це ніжно-салатовий колір підпунктів.

# C4f0f7 -голубоватий відтінок підпунктів при наведенні на них курсора.

Властивості display задаємо значення block, щоб регулювати необхідні відступи і розміри. Колір, розмір, тип шрифту, розташування - все це також опишіть у файлі CSS. Назвіть його, наприклад, accordionmenu_my1.css.

Підключення jQuery для удосконалення меню

Як ви пам'ятаєте, наша мета - створити вертикальне меню jQuery. Якщо ви погано знайомі з даною технологією, не турбуйтеся. Скористаємося репозиторієм Google і підключимо скрипт JQuery. Це зробить меню привабливіше. jQuery являє собою бібліотеку javascript, засновану на взаємодії гіпертекстової розмітки HTML і javascript. jQuery дозволяє звертатися до вмісту й атрибутів елементів.

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

Збережіть всі зміни, подивіться, як виглядає меню в браузері. Ось загальний результат роботи: У результаті у нас вийде привабливе меню, яке завжди можна переробити в залежності від своїх уподобань. А прибрати нові знання в області jQuery, CSS, ви будете створювати унікальні елементи сайту, удосконалюючи свої практичні навички.