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

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

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

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

Цель

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

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

Дизайн меню

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

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

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

menu-sprite-psd

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

Структура HTML

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

Немного о SEO

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

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

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

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

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

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

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

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

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

Выводы

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

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


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

  1. Хорошая статья – доступно практически все рассказано. Но хотелось бы узнать – возможно ли применение к спрайтам css разметки в виде отступов и полей? Спасибо.

    Thumb up 0 Thumb down 0

  2. Скажите, а как сделать ,чтобы на пункте меню кот выбран в данный момент сохранялось изменение? К примеру как сделано верхнее меню вот у этого сайта -www.ehousestudio.com Там после выбора кнопка подсвечивается... Спасибо!

    Thumb up 0 Thumb down 0

    • запоминание реализуется с помощью функционала движка сайта или скрипта серверной части.

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

      Thumb up 0 Thumb down 0

  3. Использую WordPress последней версии. Вот нашел, что хотел-css-tricks.com/video-scre...use-css-sprites/.

    Просто как штмл работает, все остается на месте.Размещаю в ручную на Word

    Press перестаетработать. Мб из за несовместимости версии и библиотеки jquery? Помогите, как можно решить проблему?

    Thumb up 0 Thumb down 0

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

      Давайте возьмем простейший код генерации, как у меня в блоге в верхнем меню.

      В файле header.php прописано

      при этом генерируется такая html конструкция

      и смотрите, если я зайду на какую-нибудь из этих страниц (например, в Рекламу), то код изменится на следующий

      т.е. добавится класс current_page_item.

      А с учетом того, что у каждого элемента списка свой уникальный класс, то это можно использовать при генерации спрайт-меню.

      Thumb up 0 Thumb down 0

  4. Спрайты очень популярны на одностраничных сайтах лендинг пейд, где не SEO оптимизация нужна, а красота и привлекательность

    Thumb up 0 Thumb down 0

Оставить комментарий