Прозрачное меню html 5 с использованием CSS спрайтов

Итак, спрайты представляют из себя набор изображений. Сделать их можно на многих онлайн ресурсах, например 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 с использованием спрайтов. Спрайты можно использовать не только для меню, но и для иконок социальных сетей, кнопок. Главное понять принцип работы с ними.