Добрый день.
Сегодня юбилейный, 128 выпуск, поэтому с него начинаем тему о создании разного вида меню. Начнем с простых видов, которые можно получить с помощью стилей и закончим многоуровневыми меню, создаваемых через скрипты.

Создание простого меню

Меню называется список команд и способ организации вариантов выбора. Как правило, меню на сайте предназначено для навигации — перехода между разделами и документами сайта. Способ представления меню может быть самым разным: вертикальное меню, горизонтальное, ниспадающее и т.д. Ниже показан один из вариантов меню, которое мы и рассмотрим.

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

Для создания меню вначале потребуется два рисунка, их можно подготовить в любом подходящем графическом редакторе. Первый рисунок (рис. 1) служит для обозначения неактивного пункта, а второй (рис. 2) заменяет его при наведении на пункт курсора мыши. Рисунки должны быть одинаковы по размеру.

Рис. 1. Изображение для создания элемента меню

Рис. 2. Изображение, которое будет появляться при наведении на пункт меню курсора

Подобный прием, когда один рисунок меняется на другой при наведении на него курсора мыши, называется «эффект перекатывания» или rollover.

Вначале создаем основу для меню (пример 1).

Высота слоя, задаваемого параметром height должна равняться высоте наших рисунок, в данном случае она составляет 40 пикселов. Отступы управляются аргументом padding, а высота и цвет линии снизу атрибутом border-bottom. Поскольку ширина и высота всех рисунков задана заранее, то размер текста меняться не должен, иначе может получиться, что он выйдет за пределы рисунка. Увеличить или уменьшить шрифт можно через настройки браузеров. Чтобы этого не произошло, требуется жестко задать размер шрифта в абсолютных единицах, например, пикселах, через параметр font-size.

Теперь перейдем к отдельным пунктам меню. Чтобы не загромождать стиль разными именами, воспользуемся контекстными селекторами. Конструкция #menu DIV означает, что стиль будет работать только для тега DIV, который размещается внутри слоя с именем menu. Осталось для него только сделать описание (пример 2).

Параметр float предназначен для размещения слоев по горизонтали, без него, по умолчанию слои располагаются друг под другом. Обязательно надо установить ширину (width) и высоту (height) слоя равную размерам рисунка. Аргумент margin-right управляет расстоянием между вкладками, а background определяет путь к файлу с изображением, он может быть как абсолютным, вроде http://www.htmlbook.ru/images/m1.jpg, так и относительным, как указано в примере.

Осталось только описать ссылки. Также воспользуемся контекстными селекторами и создадим стиль для элемента #menu A, который будет действовать только для ссылок в слое menu (пример 3). Это позволяет использовать в дальнейшем на сайте тег A, уже не заботясь о том, что он где-то описан.

Параметр padding отвечает за сдвиг текста внутри слоя, чтобы надпись располагалась приблизительно по центру рисунка. Высота и ширина установленная как 100 процентов требуется, чтобы ссылкой работала вся область рисунка, а не только текстовая ссылка. Если убрать эти параметры, то эффект перекатывания возникнет лишь при наведении курсора на надпись.

Смена одной картинки на другую осуществляется через псевдокласс A:hover. Он отвечает за событие, возникающее при наведении курсора мыши на ссылку. Тогда происходит замена фонового изображения на другое через параметр background.

Окончательный код со всеми стилями приведен в примере 4

Приведенный способ создания меню имеет как свои достоинства, так и недостатки. К преимуществам относится простота и быстрота построения меню. Среди недостатков — меню не работает в браузере Opera 6, а также медленная скорость работы. Это связано с тем, что загрузка в память второго рисунка происходит не заранее, а только по мере обращения к нему. Соответственно замедляется и смена одной картинки на другую. Этого можно избежать, если понизить объем файлов изображений или осуществить предварительную загрузку картинок в память с помощью JavaScript. Еще один способ ускорения работы меню связан с объединением рисунков в одну картинку и сдвигом фонового рисунка. Но это уже проделайте самостоятельно. Свои варианты присылайте мне на почтовый ящик, адрес вы знаете.