Лого SiteHere.ru

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

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

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

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

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



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

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



HTML часть

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

1
2
3
4
5
6
7
8
9
<div class="navi1">
    <ul>
        <li class="sm1"><a href="#"></a></li>
        <li class="sm2"><a href="#"></a></li>
        <li class="sm3"><a href="#"></a></li>
        <li class="sm4"><a href="#"></a></li>
        <li class="sm5"><a href="#"></a></li>
    </ul>
</div>


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



Выводы

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

Успехов!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *