Класне меню для сайту на основі спрайтів

При завантаженні сторінки, багато часу витрачається на завантаження зображень, а що якщо об`єднати всі зображення? Адже завантаження відбуватиметься явно швидше. А адже CSS дозволяє це зробити. І в цьому уроці ми створимо гарне меню за допомогою CSS і одним зображенням.

Приклад меню можна побачити тут:

Подивитися прімерСкачать

Що таке CSS спрайт?

CSS спрайт можуть бути використані в якості зменшення кількості зображень на сторінці, об`єднуючи кілька зображень в одне зображення.

Відео: CSS3 для початківців | # 19 Використання спрайтів

HTML частина

В html коді немає нічого особливого, просто список, але окремий клас в кожного елемента:

Відео: Відеокурс по CSS. Урок 15 - CSS спрайт, робимо меню

123456789

CSS частина

А вже в CSS ми вказуємо вихідне зображення (tab-1.jpg), і один по одному для кожного елемента списку задаємо зсув властивістю background-position, тим самим задаючи різні фонові зображення для кнопок:

Відео: Горизонтальне меню. Верстаємо пункти меню

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970

.navi1 {width: 525px-position: relative-display: block-margin:0 auto-height: 72px-}.navi1 ul {float: none-list-style-image: none-list-style-type: none-margin: 3px 0-}.navi1 ul li {height: 72px-background-image: url(tab-1.jpg)-background-repeat: no-repeat-float: left-margin: 0px-position: absolute-padding-top: 5px-}.navi1 ul li a{width: 100%-height: 100%-display: block-}.navi1 ul li.sm1 {background-position: 0px 0px-width: 125px-left: 0px-}.navi1 ul li.sm2 {background-position: -125px 0px-width: 124px-left: 100px-}.navi1 ul li.sm3 {background-position: -249px 0px-width: 124px-left: 200px-}.navi1 ul li.sm4 {background-position: -373px 0px-width: 125px-left: 300px-}.navi1 ul li.sm5 {background-position: -498px 0px-width: 126px-left: 400px-}.navi1 ul li: hover{z-index: 1000-}.navi1 ul li.sm1: hover {background-position: 0px -75px-}.navi1 ul li.sm2: hover {background-position: -125px -75px-}.navi1 ul li.sm3: hover {background-position: -249px -75px-}.navi1 ul li.sm4: hover {background-position: -373px -75px-}.navi1 ul li.sm5: hover {background-position: -498px -75px-}

Вихідні файли

В архіві присутній файл tab-1.psd, який можна відкрити в Adobe Photoshop і відредагувати пункти меню на ваш розсуд.

висновки

Спрайт дуже корисно використовувати. Вони скорочують час завантаження сторінки, а адже це дуже важливо. Та й меню красиве :), можливо воно приживеться і у вас на сайті.

Відео: Готую 5 страв на 2 дня. Смачне меню і прості рецепти Stacy Sky

Успіхів!