Форум PHP программистов > Как написать спрайт меню, средствами html и css

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Как написать спрайт меню, средствами html и css

nemo

23.10.2009 - 19:15

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

Шаг 1
Создайте новый слой в фотшопе 300 на 200.
user posted image

Шаг 2
Создайте папку "Кнопки" а в ней под папки "По умолчанию", "Наведенные", "Нажатые", "Выбранные".
user posted image

Шаг 3
В папке "По умолчанию" создайте новый слой и в нем слева сверху нарисуйте прямоугольник 100 на 50 затем напишите "меню1" шрифт "Arial", "Narrow", цвет #999999.
user posted image

Шаг 4
Нарисуйте также в середине сверху и справа сверху.
user posted image

Шаг 5
У вас должно получится это.
user posted image

Шаг 6
Создайте дубликат слоев из папки "По умолчанию" в "Наведенные", "Нажатые", "Выбранные" измените цвет текста у папки "Наведенные" и "Нажатые" на #555555 а у "Выбранные" на #eeeeee.
user posted image

Шаг 7
Вернить к папке "По умолчанию", запустите окно стиля слоя в котором находится прямоугольник, дальнейшие действия описаны в инструкции что на скрине.
user posted image

Спустя 41 секунда (23.10.2009 - 18:16) nemo написал(а):

Шаг 8
У вас должно получится это.
user posted image

Шаг 9
Скопируйте стиль слоя в следущую папку "Наведенные".
user posted image

Шаг 10
Скопируйте стиль слоя в следущую папку "Выбранные" и добавте внутреннее свечение.
user posted image

Шаг 11
У вас должно получится это.
user posted image

Шаг 12
В следущей папке "Выбранные".
user posted image

Шаг 13
У вас должно получится это.
user posted image

Шаг 14
Сохраните как main.jpg и спрайт готов.
Шаг 15
Создайте index.html и скопируйте туда это.

HTML

<!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">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="author" content="nemo"/>
<meta name="description" content="Как написать спрайт меню, средствами html и css"/>
<meta name="keywords" content="sprite, menu, css, html"/>
<style type="text/css">
*{outline:none}
#menu li{display:inline}
#menu li a{display:block;width:100px;height:50px;background:url(menu.jpg) top left no-repeat;float:left}
#menu #menu1 a:hover{background-position:0 -50px}
#menu #menu1 a:active{background-position:0 -100px}
#menu #menu1 a.active{background-position:0 -150px}
#menu #menu1 a.active:hover{background-position:0 -150px}
#menu #menu1 a.active:active{background-position:0 -150px}
#menu #menu2 a{background-position:-100px 0}
#menu #menu2 a:hover{background-position:-100px -50px}
#menu #menu2 a:active{background-position:-100px -100px}
#menu #menu2 a.active{background-position:-100px -150px}
#menu #menu2 a.active:hover{background-position:-100px -150px}
#menu #menu2 a.active:active{background-position:-100px -150px}
#menu #menu3 a{background-position:-200px 0}
#menu #menu3 a:hover{background-position:-200px -50px}
#menu #menu3 a:active{background-position:-200px -100px}
#menu #menu3 a.active{background-position:-200px -150px}
#menu #menu3 a.active:hover{background-position:-200px -150px}
#menu #menu3 a.active:active{background-position:-200px -150px}
</style>
<title>Как написать спрайт меню, средствами html и css</title>
</head>
<body>
<ul id="menu"><li id="menu1"><a href="#"></a></li><li id="menu2"><a href="#"></a></li><li id="menu3"><a class="active" href="#"></a></li></ul>
</body>
</html>

Скачать

Спустя 2 минуты, 3 секунды (23.10.2009 - 18:18) nemo написал(а):

если с загруской будут проблемы дайте ссылку на хост который бы я мог перезалить файл

Спустя 2 дня, 1 час, 46 минут, 10 секунд (25.10.2009 - 21:04) haZe написал(а):

Да, спрайты шикарная вещь! Раньше юзал, потом забыл совсем(

Быстрый ответ:

Здесь расположена полная версия этой страницы.