У цій статті ми будемо розробляти простеньке меню, що випадає за допомогою jQuery. Для початку подивіться на демо-файл. Сподіваємося, що ви хоч трохи знаєте основи jQuery і CSS. Ключовими аспектами створення даного меню, що випадає полягають в застосуванні параметрів CSS: position, top, left, z-index.
Використовуючи ці параметри, ми можемо бути впевнені в тому, що наше меню буде з'являтися точно під посиланням, на яку був наведений курсор, і точно буде накривати всі інші елементи. Ми також зробимо так, щоб меню відображалося при наведенні курсору, і зникало тоді, коли курсор відведено в сторону. Для реалізації даних подій, ми будемо використовувати функції jQuery: mouseenter і mouseleave. І це все, що нам знадобиться для створення меню, що випадає!
Клацніть по посиланню демо-файлу і ви побачите те, що ми зараз будемо розробляти.
Ознайомтеся з HTML-кодом меню, що випадає:
Як видно, тут ми будемо використовувати невпорядковані списки для реалізації пунктів меню. Кожній посиланням меню присвоєно клас меню, що випадає, а саме меню, що випадає охоплено класом суб-посилань. Імена класів будуть використовуватися jQuery для того, щоб визначати, яке меню потрібно відображати.
Ознайомтеся з кодом CSS:
Велика частина коду CSS використовується для форматування меню (ви можете надати зовнішній вигляд меню на власний розсуд), але тут також є деякі важливі моменти:
1 - Видалення знаків табуляції за допомогою list-style: none;
2 - Нам відомо, що списки - це блокові елементи і ви бачитиме в вертикальному порядку. Для того, щоб зробити розташувати їх горизонтально, ми надаємо їм параметр малих елементів і вирівнюємо їх по лівій стороні за допомогою коду:
3 - За замовчуванням посилання є малими елементами. Ми ж переробляємо їх в блокові елементи за допомогою display: block (таким чином, ми тепер можемо поставити їм значення ширини).
4 - Ховаємо все меню за допомогою:
Уявіть минулі часи, коли випадають меню були реалізовані за допомогою грубого коду j # 097; vascript, до того ж там була потрібна купа непотрібного коду. Але сьогодні все, що нам потрібно, це jQuery:
Дуже цікава і проста штука. Давайте ми вам пояснимо, як це працює. Для початку і як зазвичай, ми охоплюємо наш код в контролер jQuery:
Давайте переконаємося, що ми сховали (hide ()) всі попередні відкриті меню до того, як курсор миші перескочить на наступне посилання:
Ось що буде в коді HTML:
Коли курсор миші наведений на посилання з класом dropdown, ми рухаємося назад за допомогою parent () і зупиняємося на 'li', а далі за допомогою next (), ми опиняємося на потрібному випадаючому меню, а 'li' вже буде з класом суб посилань (sublinks). Таким чином, jQuery полегшує нам процес пошуку того, яке меню, що випадає відображати, коли курсор миші наведений на певну посилання.
Далі ми застосовуємо деякий код CSS до випадає меню так, щоб воно відображалося виразно під посиланням, на яку наведений курсор:
Код дуже важливий, так як він гарантує нам те, що меню, що випадає відображається точно під певною посиланням. Якщо позиція виставлена на absolute, ми можемо позиціонувати елемент в будь-якій області нашої сторінки. Далі ми визначаємо верхню позицію посилання, на яку наведений курсор за допомогою $ (this) .offset (). Top (це відноситься до поточного пункту меню, на який наведено курсор), і додаємо до нього таке значення height, щоб меню відображалося точно під посиланням. Щось схоже проробляємо і з параметром left. Потім ми використовуємо z-index для того, щоб бути впевненими, що наше меню буде відображено поверх інших елементів.
Далі ми відображаємо меню, що випадає шляхом його розвороту (slideDown) на швидкості в 300 мілісекунд за допомогою:
Звичайно, ви можете використовувати і інші варіанти анімації типу fadeIn, анімацію за допомогою власних стилів і так далі.
Тепер потрібно відволіктися від концепції відображення меню, що випадає, і змусити його ховатися. Нам буде потрібно ось такий уривок коду:
Для того щоб заховати меню, що випадає, ми використовуємо slideUp, антонім до slideDown. Зважайте на те, що submenu - це змінна, яку ми створили для визначення конкретного меню, що випадає.
Таким чином, у нас вийшло привабливе однорівневе меню, що випадає на jQuery.