Вертикальне меню для сайту у вигляді акордеона на 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, ви будете створювати унікальні елементи сайту, удосконалюючи свої практичні навички.
Спливаюча підказка: функції та способи створення Спливаюча підказка являє собою текстове повідомлення, що виникає при наведенні покажчика комп'ютерної миші на який-небудь елемент управління. Подібні повідомлення найчастіше можна зустріти на різних інтернет-ресурсах під час заповнення полів форми,…
Спливаюче вікно jquery, загальні відомості по створенню Одним із способів залучення користувачів на сайт є спливаючі вікна. Звичайно, це не дає стовідсоткової гарантії підвищення відвідуваності, але все-таки на деякий час вони привертають увагу до інформації.Створити спливаюче вікно jquery - завдання не…
Як включити javascript? javascript - це спеціальна мова програмування або скриптова мова, яка вбудовується в html-код сторінок для додання їм більшої функціональності. Завдяки мові скриптів сторінка стає інтерактивною або динамічною, що покращує контакт з…
Як налаштувати контекстне меню в Windows 7 Говорячи простими словами про роботу ОС Windows, контекстне меню - це меню, яке з'являється на екрані, коли ви клацніть правою кнопкою миші на робочому столі або в Провіднику Windows. При натисканні правою кнопкою миші, таке меню просто надає…
Використання інструменту «Нова вкладка» Кожен сучасний браузер надає користувачеві такий важливий інструмент комфортного веб-серфінгу, як "Нова вкладка". Використання цього елемента дозволяє відкривати безліч веб-сторінок всередині одного вікна, що, безсумнівно, дуже зручно при роботі в…
Як зробити меню, що випадає CSS Сьогодні ми будемо розглядати питання «Як створити меню, що випадає CSS?». Варто відразу сказати, що цей елемент буде зроблений без підключення будь-яких додаткових коштів. Тобто, меню буде створене тільки за допомогою CSS і HTML.ПідготовкаЩоб…
Як зробити випадаючий список в HTML Найпростіший випадає список в HTML легко створити, використовуючи тег select. Це тег-контейнер, в нього вкладаються теги option - саме вони задають елементи списку.Є кілька варіантів списків, які можна зробити за допомогою тега select: список, що…
Модальне вікно jQuery - для чого потрібно і як встановити Щоб знайти відповідь на своє питання, іноді доводиться витрачати купу часу, особливо якщо в тому, що стосується веб-дизайну, не особливо розбирається в таких питаннях людина зважився на створення сайту своїми силами. Модальне вікно jquery може бути…
Що таке хмара тегів Хмара тегів ще називають хмарою міток. Воно розташовується, як правило, збоку сайту, іноді його можна знайти під навігацією. Таке меню дуже популярно на блогах, де з його допомогою можна витягнути публікації з певними тегами або на якусь конкретну…
Як влаштований шаблон Joomla? Як встановити шаблон Joomla? Ви розібралися з установкою джумли на хостинг і покінчили з Joomla installation? Пора змінити стандартне оформлення вашого нового сайту. Зробити це можна, змінивши файли, що відповідають за дизайн сайту. Як встановити шаблон Joomla?Що таке шаблон…
Бібліотека JQuery: слайдери для вашого сайту З плином часу і розвитком технологій в області веб-дизайну змінюються і потреби / вимоги користувачів до вмісту сайтів. Якщо раніше це був переважно текстовий контент з невеликою кількістю тематичних картинок, то сьогодні переважаючою є саме…
Для чого необхідний і як записується JQuery-селектор? Сучасний веб-дизайнер повинен не тільки володіти основами HTML, CSS і javascript, але і вміти працювати в бібліотеці JQuery, яка фокусується на взаємодії javascript з HTML-документами. Саме вона дозволяє швидко отримати доступ до будь-яких…
Підтримка сайтів Інтернет-сайт існує для того, щоб бути джерелом постійного доходу для його власника. Відповідно, веб-ресурсу потрібно регулярно приділяти увагу, варто пропрацювати стратегію його подальшого розвитку та супроводу. Важливо технічно підтримувати сайт і…