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

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

Відео: АККОРДЕОН НА CSS

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

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

код HTML

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

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

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

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

- Фільми;

- книги.

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

Відео: Створення меню, що випадає (CSS, JQuery)

CSS-код

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

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

Відео: Акордеон меню (Jquery Accordion Menu Widget)

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

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

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

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

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

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

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