Горизонтальное меню CSS Печать E-mail
(6 голоса, среднее 4.83 из 5)
Создание статического сайта - Самостоятельное создание сайта html

Этап 4. Создание горизонтального меню css.

На 1 этапе мы подготовились к созданию сайта, на 2-ом создали основу, на 3-ем вспомнили про CSS – каскадные таблицы стилей, а вот теперь, подготовленные разберёмся с созданием горизонтального меню CSS., на 2-ом сайту и каким должен быть, на 2-ом поддержки сайта входит, на 2-ом новичков и продвинутых пользователей

CSS меню в горизонтальном исполнении, как правило это главное меню, является немаловажным составным элементом дизайна практически любого классического сайта.

Горизонтальных меню CSS существует множество видов: двухуровневые, многоуровневые, выпадающие и т.д. Для Вас я постарался подобрать такое горизонтальное меню css, чтобы оно было и простое и красивое одновременно.

Горизонтальное меню CSS

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

Таблицу, изображения header и footer, которые мы верстали на 2-ом этапе, я немного подкорректировал, чтобы меню расположилось во всю длину, и у Вас к концу занятия должно получиться примерно вот так.

Вид сайта с горизонтальным меню на CSS

Рис.2. Вид сайта с горизонтальным меню на CSS

На следующем этапе создадим вертикальное меню CSS.

Приступим.

Весь html код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создать сайт самостоятельно</title>
<link rel="stylesheet" href="/style.css" type="text/css">
</head>
<body>
<table width="906" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="215"><img src="/images/Header.jpg" width="902" height="215"></td>
</tr>
<tr>
<!-- Область горизонтального меню -->
<td height="18"><div id="css-gor">
<ul>
<li><a href="#">
<span class="text-top">Главная</span>
<span class="text-bottom">Создать сайт</span>
</a></li>
<li><a href="#">
<span class="text-top">Основы html</span>
<span class="text-bottom">html справочник</span>
</a></li>
<li><a href="#">
<span class="text-top">Основы CSS</span>
<span class="text-bottom">Уроки по CSS</span>
</a></li>
<li><a href="#">
<span class="text-top">JavaScript</span>
<span class="text-bottom">Уроки по JavaScript</span>
</a></li>
<li><a href="#">
<span class="text-top">Заработай</span>
<span>Заработок в сети</span>
</a></li>
<li><a href="#">
<span class="text-top">Без сайта</span>
<span class="text-bottom">Простые способы</span>
</a></li>
</ul>
</div></td>
<!-- Конец области горизонтального меню -->
</tr>
<tr>
<td height="105">
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" height="250"></td>
<td width="80%"><font>Создать сайт самостоятельно</font></td>
</tr>
</table></td>
</tr>
<tr>
<td height="34"><img src="/images/Footer.jpg" width="902" height="80"></td>
</tr>
</table>
</body>
</html>

Пояснения html файла области горизонтального меню

Если Вы внимательно просмотрите код, то заметите, что я поменял параметр ширины таблицы: table width="906" (с 900px до 906px) и td width="902" – шапки и подвала. Мне так удобнее было писать CSS.

А теперь о главном, а главное это <!-- Область горизонтального меню --> и <!-- Конец области главного меню -->, а точнее то, что между ними находится.

Здесь  помещён блок div с идентификатором  "css-gor":

<div id="css-gor">

Само меню построено классически – с использованием маркированного списка, который в html задаётся тегом <ul> и закрывающимся </ul>, а пункты между ними, соответственно, тегами: <li> и </li>

Каждый такой пункт – это и есть кнопка нашего горизонтального меню CSS:

<li><a href="#">
<span class="text-top">Главная</span>
<span class="text-bottom">Создать сайт</span>
</a></li>

Сколько Вы таких пунктов напишите, столько кнопок и будет содержать Ваше горизонтальное меню.

Сначала прописан тег <a href="#"> пустой ссылки, т.к. вести ей пока некуда. Далее при помощи универсального атрибута class тега <span> определяется имя класса, которое позволяет связать тег со стилевым оформлением:

text-top – выравнивание происходит по верху родительского элемента и text-bottom – соответственно по низу. «По русски» говоря: Основы CSS будут отображаться вверху кнопки, а Уроки CSS – внизу. Всё! Пишем пункты.

Что пишем в файл каскадных таблиц стилей style.css

Указываем идентификатор для маркированного списка.

#css-gor ul {

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

list-style: none;

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

font-family: Georgia, serif;

Устанавливаем размер шрифта, который будет использоваться в горизонтальном меню css.

font-size: 16px;

Начертание курсив.

font-style: italic;

Устанавливаем межстрочный интервал.

line-height: 150%;

Устанавливаем рамку вокруг всего меню css: толщиной 1px, непрерывной чертой, чёрного цвета.

border:1px solid #black;

В принципе выравнивание по левому краю с последующим обтеканием, а на деле для корректного отображения во всемогущем Internet Explorer.

float: left;

Всегда обнуляйте отступы, ну, или задавайте необходимые параметры  - правила хорошего тона.

padding: 0;
margin: 0;
}

Указываем идентификатор для маркера.

#css-gor ul li {
float: left
}

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

#css-gor ul li a {

Элементы, например тег <span>, будут отображаться в виде блока.

display: block;

Отменяем все эффекты: подчёркивание, мигание, подчёркивание у ссылок и т.д.

text-decoration: none;

Выставляем цвет кнопок горизонтального меню CSS.

background-color: #683906;

Устанавливаем внешние отступы.

padding: 5px 8px 0 8px;

Определяемся с цветом текста на кнопке.

color: #ffffff;

Ширина, стиль и цвет рамки справа.

border-right: 2px solid #888888;

Соответственно слева.

border-left: 1px solid #282828;

Задаём ширину кнопки меню.

width: 131px;
}

Без комментариев.

#css-gor ul li a span {
display: block
}

Для определённости давайте назовём верхний текст в кнопке – верхнее горизонтальное меню, а нижний текст – нижнее горизонтальное меню.

Работаем с верхним горизонтальным меню.

#css-gor ul li a span.text-top {

Установки подчёркивания прерывистой линией толщиной в 2 пикселя.

border-bottom: 2px dashed #484848;
}

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

#css-gor ul li a:hover span.text-top {

Подчёркивание прерывистой точкой в 2 пикселя выбранного цвета.

border-bottom: 2px dotted #ffffff;

Меняем цвет.

color: #ffeecc;
}

Работаем с нижним горизонтальным меню.

#css-gor ul li a span.text-bottom {

Делаем невидимой, а точнее прозрачной нижнюю ссылку.

visibility: hidden;

Устанавливаем размер нижнего текста.

font-size: 12px;

Нижний текст выравниваем вправо.

text-align: right
}

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

#css-gor ul li a:hover span.text-bottom {

Нижний ссылочный текст становится видимым.

visibility: visible
}

Теперь можете собрать весь CSS код в единое целое, поэкспериментировать, по необходимости вооружившись справочником, в общем, включить творчество и создать самостоятельно своё горизонтальное меню CSS.

Всё! Удачи!!!

Обновлено 14.03.2011 14:13
 
Rambler's Top100
Main page Contacts Search Contacts Search