В этом примере я покажу, как сделать простое и красивое меню, которое больше подойдет для сайтов компаний, чем для обычных сайтов. Структура меню простая, переделать её под себя будет проще простого. К тому же, в стилях было создано лишь два селектора.
HTML
<div class="menu"> <a href="#">Link</a><br> <a href="#">BlueCode</a><br> <a href="#">Link</a><br> <a href="#">BlueCode</a><br> <a href="#">Link</a><br> </div>
В меню лучше использовать тег переноса <br>, чем в стилях position: block, так как кликабильным будет лишь текст, а не пространство, которое отдается под него. Это и удобнее, и проще.
CSS
Для начала создадим сам блок:
.menu {
width:300px; /* Ширина */
border-left:5px solid #969799; /* Обводка слева */
color:#478CFB; /* Цвет текст */
font:15pt Consolas, Verdana; /* Размер, семейство шрифта */
padding:2px 0; /* Отступы, 2px сверху-снизу, 0 слева-справа */
}
Теперь оформим вид ссылки. Здесь у тоже все просто:
.menu a{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
border-bottom:1px solid #969799; /* Обводка снизу */
padding:2px 0 0 0; /* Отступы. Сверху 2px, по остальным сторонам 0 */
color:#478CFB; /* Цвет ссылки */
font-weight:bold; /* Толщина текста */
text-decoration:none; /* Убираем нижнюю линию */
}
Теперь напишем стили к псевдоклассу :hover. Здесь мы просто изменим цвет, фон, сделаем отступ слева. С свойством transition это все будет выглядит красиво и плавно.
.menu a:hover{
background-color: #969799; /* Фон */
padding:2px 2px 0 10px; /* Отступы. Сверху 2px, справа 2px, слева 10px */
color:white; /* Цвет ссылки */
}
Вот и все, простая менюшка готова. Остальное можно добавить и изменить, как говорится, по вкусу.