Рубрика CSS

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

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

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

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

Цель

Применение CSS спрайта сократит количество HTTP запросов и увеличит скорость загрузки сайта.

Дизайн меню

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

Линейки и маркеры становятся лучшим другом, когда речь заходит о CSS спрайтах. Чтобы воспользоваться этими инструментами в программе Фотошоп, выберете View> Rulers на панели инструментов. Как только инструменты стали активны, Вы можете создать новые направляющие, для этого нажмите на линейку, а затем перетаскивайте её на область изображения. Эти направляющие линии помогут Вам выронить Ваш спрайт. В качестве альтернативы Вы можете использовать сетку: View> Show> Grid.

Для правильной работы в CSS, Вы должны знать координаты каждого элемента меню в спрайте.

Проще всего использовать целые значения 100px, 200px, и т.д, чем 101px, 342px, и т.д. В будущем это позволит с легкостью изменять необходимые значения в меню.

Структура HTML

Код ниже создает базовую структуру меню, для дальнейшей работы с CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>CSS Sprite Navigation</title>
<link rel="stylesheet" href="css-sprites-nav.css" type="text/css" />

</head>

<body>

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

</body>
</html>

Несколько слов о SEO

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

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

/* Everything CSS Sprite Menu */
ul#menu{margin:0; padding:0; list-style:none; clear:both;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
#menu li a{background:url('images/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}

/* Home Button */
#menu li.home{width:115px; height:60px;}
#menu li.home a{background-position:-5px -5px;}
#menu li.home a:hover{background-position:-5px -75px;}
#menu li.home a.selected{background-position:-5px -145px;}

/* About Button */
#menu li.about{width:120px; height:60px;}
#menu li.about a{background-position:-125px -5px;}
#menu li.about a:hover{background-position:-125px -75px;}
#menu li.about a.selected{background-position:-125px -145px;}
/* Contact Button */
#menu li.contact{width:160px; height:60px;}
#menu li.contact a{background-position:-250px -5px;}
#menu li.contact a:hover{background-position:-250px -75px;}
#menu li.contact a.selected{background-position:-250px -145px;}

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

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

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

По умолчанию;
При наведении;
Выбранный элемент – указывает текущую страницу. Эта функция может быть задействована в случае присваивания класса “selected”.

Заключение

К этому моменту у Вас должно получиться меню с использованием одного изображения. Это снизит количество HTTP-запросов и позволяет страницам грузится быстрее.

Источник: www.buildinternet.com.
Перевод: Администратор сайта explorer-soft.com.

Создан:11.02.2010 | Просмотров: 5,657