
Октябрь 25, 2019 Запись была обновлена
Классное меню для сайта на основе спрайтов

При загрузке страницы, много времени тратится на загрузку изображений, а что если объединить все изображения? Ведь загрузка будет происходить явно быстрее. А ведь 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 и отредактировать пункты меню по вашему усмотрению.
Выводы
Спрайты очень полезно использовать. Они сокращают время загрузки страницы, а это ведь очень важно. Да и меню красивое :), возможно оно приживется и у вас на сайте.
Успехов!
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)