У цьому уроці ми створимо унікальне виїжджає меню за допомогою jQuery.
Це велике меню буде містити назву та опис кожного елемента меню. Воно буде виїжджати знизу, показуючи при цьому іконку і текст опису. Ми будемо використовувати CSS3 властивості для красивих ефектів тіні і jQuery для інтерактивності.
Меню буде знаходиться всередині контейнера. Меню буде складатися з невпорядкованого списку з елементами посилань всередині. Елементи посилань будуть містити два span: один для назви, другий для опису. У нас також буде використаний елемент "i" для іконки
Не забудьте виправити посилання на свої.
Давайте почнемо з стилів навколишнього контейнера. Контейнер матиме відносне положення, так як саме меню - абсолютне. Нам необхідно буде заховати частину з описом за допомогою overflow: hidden.
Ми створюємо красиві тіні і закруглені кути за допомогою CSS3 властивостей. Пам'ятайте, що вони будуть працювати тільки в сучасних браузерах. Список буде мати наступні стилі:
Як Ви можете побачити, ми ховаємо елемент натискання на посилання практично повністю. Ми робимо це за допомогою негативно bottom позиції. Можете пограти з цим значенням і трохи видозмінити меню.
Тепер давайте поглянемо на класи для іконок:
CSS для назви і опису мають такий вигляд
Ми також хочемо, щоб 2 span міняли колір фону і тексту, так що ми також визначимо класи для посилань при наведенні
Ось зі стилями і покінчено. Давайте додамо трохи красивих ефектів за допомогою jQuery.
Для того, щоб елемент посилання рухався ми міняємо нижню позицію і анімуємо її. Для іконки ми змінюємо значення top і даємо ефекту більше часу, так як ми хочемо зробити невелику затримку.
Ось і все готово! Вийшло непогано!
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
маленький недолік - підвантажують трішечки комп
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!