Простое и стильное вертикальное меню на CSS
На буржуйском сайте торговцев рекламными местами 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!
Рабочий пример можно посмотреть здесь ⇝
