Вертикално меню за сайт под формата на акордеон на jQuery

Менюто е известно като неразделна част от сайта. Интересна навигация на интернет ресурси е в състояние да интересуват посетителите. В допълнение, важна характеристика на всяко меню е неговата компактност. Просто вертикално меню лесно се създава с помощта на HTML и CSS. Но ще продължим напред: научете как да създадете меню с акордеон с jQuery.

Създайте меню "акордеон"

Какво е вертикалното меню под формата на акордеон? Това е такъв падащ списък, който създава удобна навигация и дава стилен външен вид на сайта. Менюто, изпълнено в тази форма, ви позволява да включите много под-позиции. Достъп до тях се получава, когато кликнете върху желания елемент. Някой ще каже, че можете да направите просто меню в този стил без да използвате jQuery. Да, така е. Но такъв обект няма да бъде много удобен за собствениците на таблети или смартфони. Нека създадем вертикално меню, привлекателно за всеки. След това, като промените цветовия стил на такава навигация, ще можете да персонализирате дизайна за всеки сайт.

HTML код

За да създадете нашето вертикално меню, първо трябва да въведете HTML кода, който ще съдържа следните редове:

Запазете този код във файл, наречен Accord_menu.html.

Както можете да видите, създадохме нерегистриран списък. Той се състои от три основни точки:

- снимки;

- филми;

- книга.

Всеки елемент има няколко подпозиции. Където има #, ще трябва да добавите връзки. Сега е важно да опишем стиловете. Всичко зависи от това, как изглежда вашият Интернет ресурс. Вертикалното меню за сайта трябва хармонично да се вписва в неговия дизайн.

CSS код

С стилове не трябва да имате никакви затруднения. Имайте предвид само, че в този пример се използва градиентно запълване. Ето как изглежда CSS:

CSS файлът определя цвета, размера, маркерите се премахват отляво от елементите в списъка. Определя се как всеки елемент и подменю ще се държат, когато го задържите. Например:

# e1fee2 е светло-зелен цвят букви.

# c4f0f7 е фин нюанс на под-точките, когато задържите над тях.

Настройката на дисплея е блокирана, за да коригира необходимите тирета и размери. Цвят, размер, тип шрифт, местоположение - всичко това се описва и в CSS файла. Напишете името, например, accordionmenu_my1.css.

Свързване на jQuery за подобрения в менюто

Както си спомняте, нашата цел е да създадем вертикално меню jQuery. Ако сте нови за тази технология, не се обезкуражавайте. Използвайте хранилището на Google и свържете скрипта jQuery. Това ще направи менюто по-привлекателно. jQuery е библиотека на jаvascript, базирана на взаимодействието между хипертекстовия маркер HTML и jаvascript. jQuery ви дава достъп до съдържанието и атрибутите на елементите.

Така че, свързваме необходимия скрипт в тялото на HTML файла и определяме правилата за съхранение на две променливи, с изключение на скокове на елементи. Правим кода, който затваря останалите раздели, когато отворите този, с който щракване с мишката. Ето как изглежда:

Запазете всички промени и погледнете как изглежда менюто в браузъра. Ето общият резултат от работата: В резултат на това ще имаме привлекателно меню, което винаги може да се променя в зависимост от предпочитанията им. И като придобиете нови знания в областта на jQuery, CSS, ще създадете уникални елементи от сайта, като подобрите практическите си умения.