Добрый день, уважаемые читатели.

Количество статей на сайте htmlbook.ru давно перевалило за 200 и совсем недавно дошло до 222. Число, конечно, не такое ровное, как 220 или, тем более, 250, но все равно замечательное, особенно если учесть, что большая часть статей эксклюзивные авторские.

Постепенно пополняется раздел с тегами HTML и вскоре справочник по всем тегам будет полностью закончен. Что так долго — спросят некоторые. Так ведь это не перевод сухой документации, а самостоятельные готовые материалы, над которыми приходится много работать. К каждому тегу идет описание, указаны используемые параметры и масса примеров по ним. В некоторых случаях приведены рисунки, чтобы можно было лучше понять результат применения разных тегов. Так что заходите по адресу www.htmlbook.ru/html и читайте нужную информацию.

Сегодня продолжение темы о различных меню и предлагается самое простое из них под названием горизонтальное. Адрес статьи на сайте www.htmlbook.ru/content/223.html.

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

Горизонтальное меню является одним из распространенных и популярных элементов навигации, используемое на сайтах. Как следует из названия, пункты меню располагаются по горизонтали, как правило, в верхней части страницы. Перечислим следующие особенности, присущие горизонтальному меню.

1. Ширина веб-страницы ограничена разрешением монитора, его размерами, настройками браузера и операционной системы. По этой причине большое количество пунктов меню для горизонтального их расположения делать не рекомендуется. Иначе это может привести к появлению горизонтальной полосы прокрутки, что не позволяет удобно пользоваться сайтом или изменению вида и форматирования меню.
   
2. Горизонтальное меню располагают в верхней части веб-страницы, чтобы его можно было видеть без прокрутки содержимого. Иногда горизонтальное меню для удобства пользователей дублируют внизу страницы.

Технически создание горизонтального меню сводится всего к двум способам — с помощью таблиц и применением слоев. Это не значит, что подобных меню может быть всего два, остальные варианты просто являются их модификациями.

Использование таблиц

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

Самый простой вариант создания меню — когда в каждой ячейка располагается один пункт (рис. 1).

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

Вид такого меню зависит от параметров тега TABLE, как приведено в примере 1.

В примере параметр bgcolor отвечает за цвет фона ячеек, border — за толщину разделительной линии между ячейками, cellpadding — за расстояние от текста до края ячейки, а значение атрибута bordercolor должно совпадать с цветом фона веб-страницы.

С помощью CSS можно добавить рамку вокруг меню, как показано на рис. 2.

Рис. 2. Таблица с рамкой вокруг

Для создания рамки к тегу TABLE предыдущего примера следует добавить параметр style и в нем указать свойство border (пример 2).

Атрибут border имеет три параметра, которые могут идти в любом порядке и разделяться между собой пробелом. Они устанавливают толщину рамки, ее стиль и цвет.

При создании горизонтального меню не обойтись без подсвечивания фона ячейки таблицы при наведении на нее курсора мыши. Подобный эффект повышает привлекательность меню и удобство работы с ним (рис. 3).

Рис. 3. Меню с подсветкой текста

Для создания подсветки текста воспользуемся псевдоклассом hover и применим его к тегу А. Чтобы ссылка изменялась только внутри таблицы, а не по всей веб-странице, воспользуемся контекстными селекторами (пример 3).

В примере устанавливается подсветка только текста внутри ячейки. Чтобы ячейка изменяла свой цвет целиком, следует внутри тега TD добавить DIV и применить псевдокласс hover к контейнеру DIV. Это также удобно делать с помощью слоев, как показано ниже.

Использование слоев

Горизонтальное меню созданное с помощью слоев по виду мало отличается от своего табличного собрата. И в том и другом случае можно активно применять стили для изменения оформления, а скорость загрузки фактически одинакова. Тем не менее, приведем метод создания горизонтального меню с использованием слоев, чтобы было с чем сравнить и выбрать наиболее подходящий вариант.

На рис. 4 показано меню с подсветкой слоя при наведении на ссылку.

Рис. 4. Горизонтальное меню созданное с помощью слоев

При выборе слоев необходимо решить несколько задач — состыковка слоев по горизонтали, выравнивание меню по центру, изменение цвета фона при наведении курсора на ссылку и др. В примере 4 приведен код создания меню показанного на рис. 4.

Для создания меню в примере применяется селектор стиля с именем center, который добавляется к каждому пункту меню. Если ширина слоя не задана явно через параметр width, она будет установлена автоматически на основе содержимого слоя. Состыковка слоев по горизонтали осуществляется путем использования атрибута float: left, без него слои будут располагаться друг под другом по вертикали. Изменение вида пункта меню можно осуществлять через параметр border и его производные — border-left, border-right, border-top и border-bottom.

Непременно для стиля тега A следует указать вид отображения display: block, иначе подсветка будет работать только для текста, а не для слоя целиком. Кстати, этот же способ можно применять и для таблиц.

Чтобы отменить действие свойства float для текста расположенного ниже меню, требуется применить атрибут clear: all. Его можно добавить к тегу BR или внутри контейнера DIV, как показано в примере 4.

Приведенная подсветка пунктов меню работает только в том случае, когда пользователь наводит курсор мыши на текст ссылки (рис. 5).

Рис. 5. Меню с подсветкой пунктов

Можно изменить код примера так, чтобы подсветка работала, когда курсор наводится на пункт меню, а не только на текст. Для этого видоизменим пример 4, добавив для селектора ссылки (тег A) параметр width: 100%. Этого будет вполне достаточно (пример 5).

Резюме

Горизонтальное меню служит для навигации по сайту и представляет собой простой и понятный пользователю элемент веб-страницы. Основные способы создания подобного меню основаны на использовании таблиц и слоев. Хотя общие принципы разработки в этом случае у них одинаковы, существуют некоторые различия, которые по-своему проявляются в разных браузерах и операционных системах и зависят от их настроек. По этой причине выявить лучший способ затруднительно. В любом случае, имея возможность выбора, вы можете сами решить, как надо делать горизонтальное меню.