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

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

Създаване на меню- "акордеон"

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

HTML код

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

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

Както можете да видите, ние сме създали неподредените списъци. Тя се състои от 3 основни точки:

- снимки;

- филми;

- книги.

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

CSS код

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

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

# E1fee2 - това бледо зелен цвят суб.

# C4f0f7 -golubovaty сянка под когато мишката върху тях.

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

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

Както вероятно си спомняте, нашата цел - да се създаде вертикална JQuery меню. Ако не сте запознати с тази технология, не се притеснявайте. Ние използваме хранилището в Google и да се свържете JQuery скрипт. Това ще го направи по-привлекателен меню. JQuery е библиотека JavaScript основава на взаимодействието на Hypertext Markup HTML и JavaScript. JQuery ви дава достъп до съдържанието и атрибутите на елемента.

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

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