Создаем панель меню с помощью CSS-спрайтов
+4

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

Итак, начнем!
Для работы я буду использовать графический редактор Adobe Photoshop.
Создаем новый документ с помощью меню File (Файл) – New (Новый) либо сочетанием горячих клавиш Ctrl+N размером 500х50 пикселей с белым фоном и называем его «menu sprites»

Создаем новый документ

Создаем новую группу слоев и называем ее «Панель до». В эту группу мы будем выделять слои для панели меню которое будет отображаться по-умолчанию, до наведения на него курсора мыши.
Берем инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) и рисуем в этом слое прямоугольник с радиусом закругления краев 10 пикселей произвольного размера. Теперь выставляем точные размеры элемента и его положение в документе , для чего переходим в Edit – Free Transform (Ctrl+T) и выставляем значения как на скриншоте

Рисуем основу меню

Переименовываем слой с прямоугольником в «Панель до».
Следующим шагом мы добавляем к этому слою градиентную заливку и обводку. Для этого двойным щелчком на слое открываем панель изменения стилей слоя (Layer Style). Отмечаем Gradient Overlay (Наложение градиента) и создаем градиентную заливку от цвета #b7b7b7 к белому (#ffffff) как на скриншоте

Заливаем основу градиентом

Добавляем внутреннюю (inside) обводку (Storke) в 1 пиксель цветом #c6c6c6

Добавляем к основе обводку

У нас получилась панель с мягким градиентом.
Теперь мы нарисуем разделители пунктов меню. Для этого инструментом Rectangle Tool (Прямоугольник) рисуем прямоугольник высотой 30 пикселей и шириной 1 пиксель и размещаем его точно по координатам как на рисунке

Рисуем разделитель пунктов меню

Переименовываем слой в «разделитель». Дублируем данный слой три раза и распределяем их по всей панели меняя для каждого слоя координаты Х. Для второго разделителя устанавливаем по Х 200 пикселей, для третьего — 300, для четвертого — 400

Дублируем разделители

Объединяем слои со всеми разделителями в один и называем его «разделители».
Теперь к этому слою в панели стилей добавляем градиент от цвета #929292 к цвету #dddddd. Отмечаем Reverse (Инверсия)

Добавляем градиент к разделителю

И теперь нам осталось добавить только тексты надписей.
Инструментом Horizontal Type Tool (Горизонтальный текст) вводим текст «Главная». Выбираем шрифт Tahoma, жирный, 15 пикселей, без сглаживания

Пишем текст элементов меню

Располагаем его так как на скриншоте

Выравниваем текст в элементе меню

Остальные пункты меню создаем дублированием этого и изменением их положения по оси Х. Размещаем их так: Блог — 150 пикселей, Галерея — 250, Файлы — 350 и О сайте — 450 пикселей

Дублируем и распределяем все надписи

Объединяем слои с текстом в один и называем его «Надписи».
Добавляем к этому слою тень

Добавляем к слою тень Drop Shadow

и градиент

Добавляем к слою градиент

Теперь нам нужно увеличить размер холста. Вызываем панель Canvas Size (Размер Холста) (Alt+Ctrl+C) и вводим параметры как на картинке ниже

Изменяем размер холста

Дублируем полностью нашу группу «Панель до» и копию переименовываем в «Панель после». Выделяем группу «Панель после» перемещаем ее точно под другой панелью

Дублируем группу слоев

Следующим шагом заменяем градиенты панели и текста в группе «Панель после». Эта, более темная панель будет отображаться при наведении курсора мыши на пункт меню, имитируя, тем самым, нажатие на кнопку.
Применяем следующие градиенты: для панели — от цвета #8f8f8f до #d7d7d7, для текста — от #6a6a6a до #939393. Для градиента к текстовому слою отмечаем галочкой пункт Reverse (Инверсия). И последним шагом удаляем слой Background

Получаем результат

Мы получили итоговое изображение. Сохраняем его для Web (Alt+Shift+Ctrl+S) в формате PNG-24.

И вот мы подошли ко второй части нашего урока, в которой мы займемся версткой нашего меню с помощью HTML и CSS для представления его на веб-странице.
Редактор можно использовать любой. Я буду редактировать код в Notepad++.
Первым пунктом создаем новый документ index.html и прописываем в нем DOCTYPE, тэги HTML, HEAD, META, TITLE, а также BODY


Меню с помощью спрайтов

Теперь напишем непосредственно код самого меню. Для этого мы будем использовать ненумерованный список, причем всем ссылкам элементов списка мы присвоим уникальные классы (class)

<ul id="menu-item">
	<li><a class="item-1" href="#">Главная</a></li>
	<li><a class="item-2" href="#">Блог</a></li>
	<li><a class="item-3" href="#">Галерея</a></li>
	<li><a class="item-4" href="#">Файлы</a></li>
	<li><a class="item-5" href="#">О сайте</a></li>
</ul>

На этом с файлом index.html мы пока закончим и займемся таблицей стилей.
Создадим новый файл style.css и сразу пропишем в нем сброс всех стилей

* { margin: 0; padding: 0; }

далее мы зададим размеры нашего меню, способ отображения элементов списка, а также общие стили для ссылок

ul#menu-item {
width: 500px; margin: 100px auto;
list-style: none;
}
ul#menu-item li { display: inline; }
ul#menu-item li a {
display: block; float: left; height: 50px; width: 100px;
background-image: url(menu-sprites.png); text-indent: -9999px;
}

теперь зададим расположение картинки для каждого элемента нашего меню с помощью свойства background-position для отображения по-умолчанию

ul#menu-item li a.item-1 {
background-position: 0 0;
}
ul#menu-item li a.item-2 {
background-position: -100px 0;
}
ul#menu-item li a.item-3 {
background-position: -200px 0;
}
ul#menu-item li a.item-4 {
background-position: -300px 0;
}
ul#menu-item li a.item-5 {
background-position: -400px 0;
}

и для отображения при наведении на элемент курсора мыши

ul#menu-item li a.item-1:hover {
background-position: 0 -50px;
}
ul#menu-item li a.item-2:hover {
background-position: -100px -50px;
}
ul#menu-item li a.item-3:hover {
background-position: -200px -50px;
}
ul#menu-item li a.item-4:hover {
background-position: -300px -50px;
}
ul#menu-item li a.item-5:hover {
background-position: -400px -50px;
}

А теперь вернемся к файлу index.html и прилинкуем к нему нашу таблицу стилей



Вот и все! Мы с Вами прошли все шаги данного урока и получили приличное интерактивное меню.
До скорых встреч!

+4
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: CSS, Photoshop теги: , , , . Прямая ссылка на запись.

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

  1. Станислав сказал(а):

    Привет. Хорошая статья. Только вопрос. Как будет выглядеть активный пункт(проще говоря, как сделать, чтобы тот пункт меню на котором мы «стоим» выделялся как при наведении(hover) меню и как его реализовать? Урок не выполнял просто интересно Ваше решение. Спасибо

    • remak сказал(а):

      Добавлением стилевого класса .current со свойствами, как у hover

  2. Станислав сказал(а):

    Извиняюсь снова я. Просто чтобы мы друг друга поняли. Вот У Вас на сайте когда, к примеру, переходишь на страницу «Веб-дизайн» она выделяется темно-серым, как в принципе и все остальные. Просто я весь день сижу над одной HTML страницей и не могу добиться такого же эффекта(((Ни когда не обращал на этот нюанс внимание, но вот обратил и наверно сегодня не усну… Я новичок и слабо знаю CSS. Правильно ли я понимаю, что данный, назавём его, «Эффект» можно реализовать только средствами HTML И CSS без PHP? Просто Ваша подсказка не помогла.((( Буду признателен.Заранее Спасибо.

    • remak сказал(а):

      Да, в первый раз мы не поняли друго друга. У нас на сайте данный «эффект» реализован с не без помощи PHP. С помощью PHP элементу меню для активной (текущей) страницы (категории) добавляется класс .current. А уж средствами CSS вы оформляете его как пожелаете. Не уверен, что можно достичь подобного только средствами HTML и CSS.

  3. Станислав сказал(а):

    Спасибо большое за помощь. Успехов Вам!

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

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