True css менюшка для true сайтов

На своих сайтах и сателлитах всегда делаю только такие менюшки – очень красиво, функционально, юзабильно и удобно по-моему. Суть в чем… Суть можно посмотреть в меню этого блога (справа). Это меню – просто список:

<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Первая страница</a></li>
<li><a href="#">Вторая странца</a></li>
</ul>

Именно таким способом реализованы менюшки почти во всех темах для WordPress. Из такого списка ссылок нам необходимо сделать что-то человеческое.

Для начала подумаем о юзабильности – ссылка должна быть не просто текстом, ссылкой должно стать и некоторое пространство вокруг этого текста. В этом нам поможет свойство padding. Также нужно обрисовать границу ссылки при помощи border и(или) background-color.

Потом необходимо учесть, что юзер должен узнать, что курсор наведен на ссылку не только по меняющемуся курсору, но и по видоизменению самой ссылки вместе с околоссылочным пространством. Для этого подставим и настроим всем ссылкам действие при наведении (псевдоэлемент a:hover). Пусть при наведении будет меняться цвет бордера и фоновый цвет.

Переходим к практике.

Добавляем к таблице стилей элемент #menu li a (все ссылки внутри блока с id=»menu»):

#menu {
	width: 160px;
}
#menu li {
	list-style: none; /* бульбочки слева каждого элемента нам не нужны */
}
#menu li a {
	color: white;
	display: block; /* теперь все ссылки будут как одинаковые кирпичики */
	padding: 10px; /* увеличиваем околоссылочное пространство */
	background-color: #1E1E1E; /* чернявенький фон кирпичиков */
	border: 1px solid #CCCCCC; /* серый бордер (граница) */
}
/* теперь настраиваем стиль ссылок при наведении мышкой */
#menu li a:hover {
	background-color: #999999; /* делаем фон менее чернявеньким */
	border: 1px solid #F4F4F4; /* серый бордер меняем на более светлый */
}

Вот так это все выглядит в результате:

• Главная
• Первая страница
• Вторая странца