У цьому уроці я розповім Вам як зробити меню-ролловер за допомогою техніки CSS спрайтів.
Ролловеров (меню, вид яких змінюється при наведенні на них мишкою) зазвичай складаються з декількох станів. Основні стану: при наведеної мишці, при натисканні, після натискання. Для кожного стану потрібна окрема картинка. В такому випадку меню виходить досить важке, так як для кожної кнопки доводиться вантажити кілька зображень.
Використовуючи спрайт можна обійти цю проблему. Використовується лише одна картинка, і вона не так сильно вантажить сервер і споживає трафік. Це дуже корисно, якщо повністю користуватися потужністю даної технології.
Струтктура меню дуже проста. Її ми вставляємо в тіло документа:
Якби ми не користувалися спрайтами, CSS код виглядав би наступним чином:
У коді вище використовується окрема картинка для кожного стану в якості фонового зображення.
Використовуючи одну картинку, нам немає необхідності змінювати фонове зображення. Ми тільки міняємо розташування фону. Наприклад, стан: hover буде використовувати фон зрушений на необхідну кількість пікселів вліво (в прикладі 157 пікселів); стан: active - 314 пікселів.
І код CSS знайде ось такий вигляд:
От і все. Зміна станів дуже швидка і не забирає багато трафіку. Подібне меню кросбраузерності (IE5 +, Mozilla, Opera, Safari)
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!