Mihalytch personal blog

Существует множество способов создания вертикального меню. С помощью таблиц, блочной верстки, с JavaScript или без него ... Ниже представлен наиболее простой способ создания вертикального меню, используя списки и CSS.

Для начала создадим тело меню средствами HTML:

<div id="v_menu">
<ul>
	<li><a href="#">Menu item 1</a></li>
	<li><a href="#">Menu item 2/a></li>
	<li><a href="#">Menu item 3/a></li>
	<li><a href="#">Menu item 4/a></li>
</ul>
</div>

Следующим шагом определим размер всего блока меню, границы, внутренние и внешние отступы, тип шрифта, цвет фона и цвет текста.

#v_menu  {
    width: 200px;
    border: 1px solid #000;
    padding: 0 0 0 0;
    margin: 10px 0 0 0;
    font:14px Arial;
    background-color: #90bade;
    color: #333;
}

Теперь определим стили самых списков меню, которые являются элементами списка.

Для всего списка зададим нулевые отступы, уберем границу и маркеры списка.

#v_menu ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}

Для каждого из пунктов меню (элементов списка) зададим размер, тип и цвет нижней границы и нулевой отступ.

#v_menu li {
    border-bottom: 1px solid #90bade;
    margin: 0 0 0 0; }

Следующим шагом оформим сами ссылки. Зададим блочный стиль отображения ссылок (для того чтобы блок самой ссылки растянулся по ширине и высоте пункта списка), внутренние отступы, нулевую границу, цвета фона и самих ссылок, уберем подчеркивание ссылок.

#v_menu li a {
    display: block;
    padding: 5px 5px 5px 5px;
    border: 0px;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
}

Следующий стиль существует исключительно потому, что свойство display: block не срабатывает для браузера IE под Windows.

html>body #v_menu li a {
    width: auto;
}

Следующий стиль описывает поведение пунктов меню при наведении на них курсора мышки. В данном случае изменяется цвет фона.

#v_menu li a:hover {
    border:0px;
    background-color: #2586d7;
    color: #fff;
}