Мастерство css-кодирования: меню с hover-эффектом

Опубликовано 04.04.10  /  Автор: Иван Саломатин

Комментариев 0

Очень часто для решения простейших, на первый взгляд, задач от верстальшика требуется обладание солидным багажом знаний и навыков. Более того, "простые" задачи зачастую требуют использование нестандартного подхода для достажения оптимального результата.

В этой статье я покажу с какими "подводными камнями" может столкнуться верстальщик, кодируя простейшее вертикальное меню.

В итоге у нас должно получиться вот такое простое меню:

Обращаю ваше внимание на то, что мы не используем ни одного фонового изображения! Все эффекты будут созданы только возможностям css.

Итак, приступим.

HTML-разметка

Прежде всего создадим вот такую HTML-разметку:

<ul>
    <li><a href="#">Link_1</a></li>
    <li><a href="#">Link_2</a></li>
    <li><a href="#">Link_3</a></li>
    <li><a href="#">Link_4</a></li>
    <li><a href="#">Link_5</a></li>
</ul>

Кстати, почти все начинающие верстальщики задаются вопросом: почему для создания меню чаще используется именно конструкция ненумерованного списка, а не, к примеру, вложенные div'ы? Я встречал множество разных мнений на этот счёт (некоторые даже объясняли это тем, что список, якобы, требует меньше ресурсов и времени на обработку браузером!.. - не знаю). Я же считаю, что список, просто напросто, даёт нам более понятный и "чистый" код, а также множество элементов для css-стилизации.

CSS

Приступаем к стилизации. В первую очередь избавимся от стандартных маркеров и отступов ненумерованного списка:

ul {
	margin:0px;	/*избавляемся от дефолтовых внешних отступов*/
	padding:0px; /*избавляемся от дефолтовых внутренних отступов*/
	list-style-type:none; /* избавляемся от стандартных маркеров списка */
	border-top:solid 1px #c2e0f8;
	border-bottom:solid 1px #79a8ce;
}

Теперь озадачимся созданием границы между элементами списка. Здесь предлагаю ознакомиться с техникой "рельефной границы", суть которой заключается в создании тонких (в 1 px) соприкасающихся линий немного более светлого и более тёмного цветов по сравнению с цветом фона.

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

ul li {
	display:block;
	border-bottom:solid 1px #c2e0f8;
	border-top:solid 1px #79a8ce;
}

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

Кстати, надеюсь вы уже обратили внимание на то, что для "задвоения" верхней и нижней границ у соответственно первого и последнего элементов списка мы стилизовали должным образом границы самого списка (параметры border-top и border-bottom для ul).

И наконец, осталось сделать элементы списка кликабельными и заставить цвет шрифта и фона элемента изменяться при наведении курсора.

Вот тут-то мы и обнаруживаем тот самый "подводный камень"! Дело в том, что если просто определить для "ul li a" свойство display:block (чтобы, как вы догадались, элемент "a" заполнил родительский элемент "li"), то печально известный IE6 проигнорирует это свойство и сделает кликабельной только текст ссылки, а не всю область элемента li.

На помощь приходит свойство position:relative; для элемента ul li a, которое как бы заставляет элемент "а" заполнить всё пространство родительского "li" (кстати, не используйте с этой целью width и height со значениями 100% для "a", т.к. они увеличат "а" на существующий padding!):

ul li a {
	display:block;
	padding:5px;
	position: relative; /* Хак для IE6 */
}
ul li a:hover {background:#b7d8f3; color:#537997;}

Итак, наше меню готово, а его итоговый css-код выглядит следующим образом:

ul {
	margin:0px;	/*избавляемся от дефолтовых внешних отступов*/
	padding:0px; /*избавляемся от дефолтовых внутренних отступов*/
	list-style-type:none; /* избавляемся от стандартных маркеров списка */
	border-top:solid 1px #c2e0f8;
	border-bottom:solid 1px #79a8ce;
}
ul li {
	display:block;
	border-bottom:solid 1px #c2e0f8;
	border-top:solid 1px #79a8ce;
}
ul li a {
	display:block;
	padding:5px;
	position: relative; /* Хак для IE6 */
}
ul li a:hover {background:#b7d8f3; color:#537997;}

А с тем, как всё это выглядит вы можете ознакомиться ВОТ ТУТ.