«Скользящая дверь» c одним изображением

Сегодня, я собираюсь поделиться одной замечательной CSS-техникой, о которой узнала совсем недавно. Она довольно простая, как все гениальное, и немного похожа на технику верстки блоков с закругленными краями. Вообще, термин «скользящая дверь», англ. sliding door, означает простой hover-эффект, с использованием изображения. До того, как я узнала об этой технике, я всегда использовала несколько различных изображений, для каждого пункта меню. Но в сегодняшней статье, я расскажу, как можно добиться такого эффекта, используя всего лишь одно изображение. Как обычно, вы можете взглянуть на результат. Итак, давайте начнем.

Изображение

Для каждой строки навигации, вам понадобится одно, длинное изображение. Я не буду рассказывать, как именно, создавать такие изображения, поскольку, это довольно просто, к тому же, вы можете использовать свои изображения. Но, вы можете скачать, представленную выше картинку, в .psd формате, и использовать по своему усмотрению. Итак, для создания меню, вам понадобится картинка, размером 493px на 24px, такое, как показано ниже.

Общий смысл

Идея «скользящей двери» в использовании фонового изображения для пунктов меню. Здесь используется элемент span, внутри ссылки, которому назначена часть фонового изображения. При этом ссылке, содержащей span, назначается другая часть того же фонового изображения. Что означает, что самая важная часть заключается в свойстве фонового изображения background-position.

HTML

[html]
<ul class="blue">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="products">products</a></li>
<li><a href="#" title="blog">blog</a></li>
<li><a href="#" title="contact">contact</a></li>
</ul>
[/html]

Вот так выглядит обычный код, для создания списка. Мы назначаем определенный класс списку ul, так, что мы легко сможем назначить разный стиль, одной и той же структуре.

[html]
<ul class="blue">
<li><a href="#" title="home" class="current"><span></span>home</a></li>
<li><a href="#" title="products"><span></span>products</a></li>
<li><a href="#" title="blog"><span></span>blog</a></li>
<li><a href="#" title="contact"><span></span>contact</a></li>
</ul>
[/html]

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

CSS

1. <ul> – Маркированный список

[css]
ul.blue {
padding: 5px;
margin: 10px 0;
list-style: none;
}
[/css]

Здесь, мы избавляемся от маркеров для маркированного списка, и назначаем базовые отступы и поля.

2. <li> – Список

[css]
ul.blue li {
float: left;
}

ul.blue li a {
float: left;
text-decoration: none;
color: #ccc;
padding: 4px 15px 0 0;
margin-right: 8px;
font: 900 14px "Arial", Helvetica, sans-serif;
}
[/css]

Тут, все довольно просто. Мы назначаем float: left, всем элементам списка, для получения горизонтального меню. Кроме этого, нам понадобятся отступы и поля, чтобы сделать элементы списка, похожими на кнопки меню.

3. <span> – span внутри ссылки

[css]
ul.blue li a span {
float: left;
padding-right: 15px;
display: block;
margin-top: -4px;
height: 24px;
}
[/css]

Что касается элемента span, мы назначаем ему правый отступ, для тех же целей, что и отступы у элементов списка.

4. <hover> – эффект наведения

[css]
ul.blue li a:hover, ul.blue li a.current {
color: #0d5f83;
background: url("images/blue.png") no-repeat top right;
}

ul.blue li a:hover span, ul.blue li a.current span {
background: url("images/blue.png") no-repeat top left;
}
[/css]

Здесь, мы назначаем фоновое изображения ссылке и элементу span, находящемуся внутри этой ссылки. Так что теперь при наведении мыши, кнопка будет подсвечиваться фоновой картинкой.

Вот такая простая и довольно эффективная техника, которая заметно упростит верстку меню, с использованием только CSS и HTML.

Архив с приведенным примером.

Оригинал статьи “CSS Sliding Door using only 1 image“, автор kailoon