Вертикальное меню CSS Печать
(7 голоса, среднее 3.86 из 5)
Создание статического сайта - Самостоятельное создание сайта html

Этап 5. Создание вертикального CSS меню.

На следующем, пятом этапе создадим вертикальное CSS меню. Как понимаете электронному ресурсу без него никуда. Вертикальных меню css, как и горизонтальных существует множество типов и видов. Веб дизайнеры используют JavaScript и другие веб-языки, графические элементы. Да и на чистом CSS (Каскадные таблицы стилей) можно сверстать довольно сложные по структуре, но красивые и функциональные меню.

Наше вертикальное меню будет написано на чистом html и CSS, без особых излишеств, но и не совсем аскетично. Смена цвета и дорисовка линий по 1px создают эффект жалюзи. В общем к концу занятия должно получится что-то вот такое. А дальше экспериментируйте сами и создавайте своё уникальное и неповторимое вертикальное css меню.

 

Вертикальное меню css.

Рис.1. Вертикальное и горизонтальное меню на CSS

Приступим.

Фрагмент html кода:

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="17%" height="250" valign="top">
<!-- Область вертикального меню -->
<div>
<ul>
<li><a href="#1" title="Обзорные статьи">Обзоры</a></li>
<li><a href="#2" title="Теоретический курс">Теория</a></li>
<li><a href="#3" title="Пошаговые инструкции">Практикум </a></li>
<li><a href="#4" title="Справочная информация">Спроавочники</a></li>
<li><a href="#5" title="Что предстоит">Перспективы</a></li>
<li><a href="#6" title="Новые разработки">Проекты</a></li>
<li><a href="#7" title="Письма">Контакт</a></li>
<li><a href="#8" title="Об авторе">Автора</a></li>
</ul>
</div>
<!-- Конец области вертикального меню -->
</td>
<td width="83%"><font>Создать сайт самостоятельно</font></td>
</tr>
</table>

Область вертикального меню - html файл.

Не будем изобретать велосипед, а поместим наше вертикальное меню css в стандартный блок div, который в свою очередь помещён в таблицу, тег

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">.

Границу в таблице я убрал: border="0" и отредактировал ширину ячеек таблицы, чтобы меню хорошо сидело. Ну, в общем, отрегулировал зазоры:

<td width="17%" height="250" valign="top"> - область вертикального меню css;

<td width="83%"> - область контента.

Обратите внимание, что в области вертикального меню css есть параметр valign="top", который необходим для того, чтобы элементы, находящиеся в нём притягивались кверху, т.е. чтобы меню на css не болталось посередине (принято по умолчанию).

Присваиваем блоку div идентификатор "menu-verticalnoe": <div> и далее используем маркированный список: теги <ul> <li> <li> … </li>  </li> </ul>. Практически всё аналогично построению горизонтального меню css, но здесь вводится параметр <title> в теге ссылки:

<a href="#2" title="Теоретический курс">Теория</a>.

Файл каскадных таблиц стилей.

Дописываем в файл style.css следующие директивы.

/******    Меню Вертикальное CSS  *********/

Задаём идентификатор для маркированного списка.

#menu-verticalnoe ul {

Задаём отступы

margin: 5px;
padding: 0;

Отменяем использование маркеров в маркированном списке.

list-style: none;

Выбираем какие шрифты будут использоваться.

font-family: verdana, arial, Helvetica;
}

Идентификатор для маркера.

#menu-verticalnoe li { margin: 0; }

Работаем с кнопками вертикального меню CSS.

#menu-verticalnoe a {

Выбираем блочную структуру отображения элементов.

display: block;

Настраиваем отступы вертикального меню css.

padding: 5px 10px;

Задаём размер ширины кнопки.

width: 115px;

Цвет текста ссылки.

color: #fff;

Цвет кнопки вертикального меню css.

background-color: #683906;

Запрещаем все эффекты с текстом.

text-decoration: none;

Создаём эффект кнопкам вертикального меню css, задавая границы в 1px, непрерывными линиями разных цветов.

border-top: 1px solid #ffffff;
border-bottom: 1px solid #444444;
border-left: 1px solid #ffffff;
border-right: 1px solid #444444;

Задаём жирность начертания.

font-weight: bold;

Размер шрифта.

font-size: 13px;
}

Установки идентификатора для вертикального меню при наведении курсора.

#menu-verticalnoe a:hover {

Меняем цвет ссылочного текста.

color: #bbb;

Меняем цвет кнопки.

background-color: #572800;

Снимаем все эффекты.

text-decoration: none;

Формируем визуальный эффект вжатости.

border-top: 1px solid #444444;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #444444;
border-right: 1px solid #ffffff;
}

Меняйте цвет, толщину и тип границ, да всё что хотите, и Вы получите своё уникальное вертикальное меню CSS.

Удачи!!!

Обновлено 14.03.2011 14:19