Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

16.03.2010 | Рубрики: Верстка
Тэги: hover, hover-эффект, Верстка, вертикальное меню

На буржуйском сайте торговцев рекламными местами Buysellads.Com я нашел симпатичную реализацию вертикальных блоков со ссылками, ведущими на сайты участников данного сервиса. Симпатично там сделан hover-эффект. При наведении указателя мыши на любой из пунктов, ссылка вместе с изображением иконки немного сдвигается вправо. И если быстро проводить мышью по пунктам, то создается весьма приятное впечатление. Это вам не жирнеющие или дергающиеся ссылки, выполненные на любительском уровне. Все солидно и радует глаз.

Кроме того, активная ссылка оборудована не менее симпатичным бэкграундом с двойным бордером — белого и серого цвета. Выглядит тоже весьма и весьма.

Реализовано все это добро на указанном сайте достаточно хитро: с использованием тэга <em> в качестве внутренней оболочки. Кто-то, возможно, использовал бы <span> или еще что-нибудь. Но мы пойдем другим путем. Так как ИЕ6 официально объявлен вне закона, то нет и смысла о нем заморачиваться. А раз так, то мы вполне можем себе позволить прикрутить hover не только к ссылке, но и к пункту списка <li>.

Смотрим код:

li {
border: 1px solid transparent;
display: block;
line-height: 1.6em;
}
li a {
border: 1px solid transparent;
padding: 15px;
display: block;
}
li:hover {
background: #f9f9f9;
border-color: #eee;
}
li a:hover {
border-color: #fff;
padding-left: 14px;
}

Сначала задаем пункту списка прозрачный бордер в 1 пиксель толщиной. Вся ячейка должна работать как единое целое. Поэтому сразу же прописываем display: block;
Добавленное в первом наборе правило высоты строки line-height: 1.6em; (в моем примере) служит лишь для выравнивания по высоте иконки и ссылки.

Для тэга ссылки также прописываем прозрачный бордер в 1 пиксель толщиной и также свойство display: block; Ключевым моментом здесь служит поле в 15 пикселей со всех сторон. Обратите внимание: в четвертом наборе правил мы для hover-а задали левое поле на один пиксель меньше (15 – 14 = 1). Именно на это расстояние будет сдвигаться влево ячейка со ссылкой, создавая необходимый эффект.

Другим важным моментом является третий набор правил. В нем мы прицепили hover непосредственно к тэгу <li>. Радетели за чистоту кода сейчас начнут кидаться сухими коровьими лепешками, но как бы там ни было, а данная конструкция вполне нормально работает. Ну, кроме как в ИЕ, разумеется. Это кого-то все еще торкает? :)

Теперь добавим чуток гламура — двойной цвет рамки. Фишка в том, что при срабатывании hover-а к самой ссылке добавляется белый цвет бордера (проявляя заданный ранее прозрачный), а к пункту списка — серый (проявляя также заданный ранее прозрачный) и плюс фон светло-серого цвета. В результате имеем достаточно стильный и современный эффект.

Enjoy!

Рабочий пример можно посмотреть здесь ⇝