Вертикальное меню CSS Печать E-mail
(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
 
Rambler's Top100
Main page Contacts Search Contacts Search