Сегодня, хотелось бы рассмотреть создание прозрачного меню с использованием спрайтов. Использование CSS спрайтов снижает количество HTTP запросов,  и соответственно увеличивается скорость загрузки сайта. В уроке используется только CSS и HTML5.

Просмотр Скачать

Итак, спрайты представляют из себя набор изображений. Сделать их можно на многих онлайн ресурсах, например http://spritepad.wearekiss.com/ или http://www.spritecow.com/. Впрочем, вы без труда найдете те, что подходят вам. Здесь я буду использовать спрайт уже готовый. Вот он:

Теперь давайте посмотрим структуру меню html

<div class="navigation">
	<nav>
	<a class="m1" href="#" title="Home">Home</a>
	<a class="m2" href="#" title="About">About</a>
	<a class="m3" href="#" title="Portfolio">Portfolio</a>
	<a class="m4" href="#" title="Blog">Blog</a>
	<a class="m5" href="#" title="Contact">Contact</a>
	</nav>
	</div>

Как видно мы используем структуру html 5 с тегом <nav>.

Теперь давайте подробно рассмотрим структуру CSS

Мы прописываем для класса .navigation изображение спрайта и размер.

 .navigation {
margin: 100px auto;
list-style: none;
display: block; height: 47px; width: 450px;
background-image: url(navigation.png); text-indent: -9999px;
}

Теперь прописываем код для тега nav a. Обратите внимание что, ширина изменилась с 450px на 90px. Еще один важный момент. Как вы заметили, мы задали названия пунктов меню (Home, About .... и т.д.), это важно для SEO и поисковых роботов. А теперь внимание, вот эта строчка text-indent: -9999px; убирает название из поля видимости, но они остаются и индексируются.

nav a 
{
display: block; float: left; height: 47px; width: 90px;
background-image: url(navigation.png); text-indent: -9999px;
}

Остается задать позиции для каждого пункта меню до и после наведения. Свойство background-position определяет положение на картинке.

.m1 {
background-position: 0 0px;
}
.m2 {
background-position: -90px 0;
}
.m3 {
background-position: -180px 0;
}
.m4 {
background-position: -270px 0;
}
.m5 {
background-position: -360px 0;
}

.m1:hover {
background-position: 0 -46px;
}
.m2:hover {
background-position: -90px -46px;
}
.m3:hover {
background-position: -180px -46px;
}
.m4:hover {
background-position: -270px -46px;
}
.m5:hover {
background-position: -360px -46px;
}

Вот так создаются меню CSS с использованием спрайтов. Спрайты можно использовать не только для меню, но и для иконок социальных сетей, кнопок. Главное понять принцип работы с ними.