Как сделать меню на CSS с помощью спрайтов

Сегодня мы вам расскажем, как сделать свое полноценное меню на CSS, используя всего одно изображение. Другими словами вы овладеете техникой спрайтов. А это простое, но очень элегантное решение для большинства сайтов. Кроме того, эта техника является базовой для новичков.

С помощью этой статьи вы получите основные понятия ее работы и надеемся, вы будете ее применять в своих проектах.

В конце концов вы получите меню, которое будет быстро загружаться и не будет требовать каких-либо скриптов для эффектов наведения. Если у вашего сайта в меню есть уникальные изображения, то самое время применить технику спрайтов.

Цель

Спрайты CSS будут снижать количество HTTP запросов и соответственно увеличивать скорость загрузки сайта.

Пример Скачать

Дизайн меню

Отойдем от обычного повествования руководства и перед тем, как писать код, заглянем в Photoshop, чтобы увидеть как устроен спрайт.

Любовь к сетке

Линейка и маркеры самые лучшие друзья, когда речь заходит о CSS спрайтах. Не будем в этой статье рассказывать о том, как пользоваться этими инструментами, но факт в том, что ими нужно уметь пользоваться, чтобы правильно расчитать размеры и смещения изображений.

Еще один совет. Когда вы распределяете изображения по сетке, то лучше всего делать отступы от левого верхнего угла на кратные расстояния (например, 100px или 200px, вместо 98px или 178px), потому как кратные расстояния лучше запоминаются и потом проще с этой сеткой работать.

Структура HTML

Дальше составим HTML код страницы с меню. У вас может быть свой код, главное сейчас понять принцип работы.

Немного о SEO

Наше навигационное меню структурировано в виде списка, что для поисковых систем является хорошим семантическим кодом. Имейте в виду, что элементы этого списка будут отображаться, как изображения. Свойства overflow со значением hidden и text indent с минусовым значением скроет от пользователя текст элемента списка.

Оставлять такой элемент пустым не нужно(!), потому как поисковым системам нужен контент для парсинга. Даже если на изображении есть текст, поисковый бот не сможет его распознать, ему нужен актуальный код для ссылки.

Позиционирование изображений с помощью CSS

Скопируйте код, расположенный ниже, в ваш CSS файл для проекта. Пояснения ниже.

Изменение изображения с помощью background position

Свойство CSS background-position позволяет вам указывать координаты фонового изображения. Преимуществом этого свойства является то, что для всего списка элементов вы загружаете только одно больше изображение, но потом указываете координаты маленьких изображений. Это свойство основное для CSS спрайтов.

Вы наверное помните, что для каждого элемента меню мы дали свой уникальный класс. Именно в каждом классе будут прописываться координаты изображений. Основное больше изображение определяется в начале для всех элементов меню, потом лишь указывается нужное позиционирование. Это особенно актуально на больших проектах, когда избыток кода совсем не нужен.

Используя этот метод, мы создали три уникальных состояния для навигации:

1. Вид кнопки по умолчанию
2. При наведении курсором мыши
3. Индикация выбора. Активируется добавлением класса selected

Выводы

Количество HTTP запросов снижено, значит скорость загрузки сайта повышена. Кроме того все изображения в одном подгружены, а значит нет необходимости, например, подгружать еще раз изображение при наведении на какой либо элемент курсором.

Пример Скачать