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

При загрузке страницы, много времени тратится на загрузку изображений, а что если объединить все изображения? Ведь загрузка будет происходить явно быстрее. А ведь CSS позволяет это сделать. И в этом уроке мы создадим красивое меню с помощью CSS и одним изображением.

Пример меню можно увидеть здесь:

Посмотреть примерСкачать

Что такое CSS спрайты?

CSS спрайты могут быть использованы в качестве уменьшения количества изображений на странице, объединяя несколько изображений в одно изображение.

HTML часть

В html коде нет ничего особенного, просто список, но отдельный класс у каждого элемента:

1 2 3 4 5 6 7 8 9

&lt,div class=navi1&gt, &lt,ul&gt, &lt,li class=sm1&gt,&lt,a href=#&gt,&lt,/a&gt,&lt,/li&gt, &lt,li class=sm2&gt,&lt,a href=#&gt,&lt,/a&gt,&lt,/li&gt, &lt,li class=sm3&gt,&lt,a href=#&gt,&lt,/a&gt,&lt,/li&gt, &lt,li class=sm4&gt,&lt,a href=#&gt,&lt,/a&gt,&lt,/li&gt, &lt,li class=sm5&gt,&lt,a href=#&gt,&lt,/a&gt,&lt,/li&gt, &lt,/ul&gt, &lt,/div&gt,

CSS часть

А уже в CSS мы указываем исходное изображение(tab-1.png), и по порядку для каждого элемента списка задаем смещение свойством background-position, тем самым задавая разные фоновые изображения для кнопок:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

.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: urltab-1.png, 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 и отредактировать пункты меню по вашему усмотрению.

Выводы

Спрайты очень полезно использовать. Они сокращают время загрузки страницы, а это ведь очень важно. Да и меню красивое :), возможно оно приживется и у вас на сайте.