1.1. Простое меню ссылок

Нередко набор ссылок оформляют в виде так называемого кнопочного меню. Опции такого меню в окне браузера выглядят как прямоугольники с текстом. Пря­моугольники можно создать с помощью тегов <span>, а в них поместить ссылки. Как для контейнеров <span>, так и для содержащихся в них ссылок (<а>) с помо­щью параметров CSS можно задать оформление. Для меню обычно требуется, что­бы его опция под указателем мыши как-то выделялась (подсвечивалась). Данного эффекта легко достичь применением псевдокласса :hover.

Простое или, одноуровневое меню может быть горизонталь­ным и вертикальным. В листинге 1 приведен пример кода горизонтального меню, а на рис. - его вид в окне браузера. Опции (кнопки) меню созданы посредст­вом элементов <span>, заключенных в контейнер <div>. Элементы <span> внутристрочные и, следовательно, располагаются в одном ряду, что и требуется для гори­зонтального меню. Однако чтобы соседние прямоугольники вплотную примыкали друг к другу, для элементов <span> назначен параметр float:left. А чтобы меню не стало вертикальным при уменьшении размеров окна браузера, контейнеру <div> задана минимальная ширина (min-width), не меньшая, чем ширина меню. Для ссылок задан параметр text-decoration:none, чтобы они не подчеркивались, поскольку и так ясно, что кнопки это элементы, на которых можно щелкнуть.

Пример №1 для самостоятельной реализации:

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

Рассмотренное горизонтальное меню легко превратить в вертикальное (см. рис. справа). Для этого достаточно в CSS для элемента <span> удалить параметр float:left и добавить параметр display:block (превратить элемент из внутристрочного в блочный), а для <div> подобрать подходящее значение параметра width (в нашем примере - 170рх).

Подсветку опции меню под указателем мыши можно сделать более интересной, если указать в качестве фона элемента <span> в обычном состоянии одно графиче­ское изображение, а под указателем мыши - другое:

div span: {background:url("buttonl.jpg")};

div span:hover {background:url("button2.jpg")};

1.2. Двухуровневое меню ссылок

Простейшее двухуровневое меню представляет собой несколько рядом распо­ложенных вертикальных меню. В листинге 2 приведен код, а на рис. - внеш­ний вид двухуровневого меню, состоящего из трех вертикальных меню. В исход­ном состоянии видна только горизонтальная часть меню. Это обеспечивается параметрами overflow:hidden и height с достаточно малым значением. При наведении указателя мыши на первую или вторую опции горизонтальной части меню раскрывается соответствующее вертикальное подменю, содержащее ссылки (увеличивается значение height). Для третьей опции подменю не преду­смотрено, она сама содержит единст­венную ссылку. Чтобы при наведении мыши на опцию меню (<div>) ее ука­затель сохранял форму в виде стрелки, установлен параметр cursor:default. Однако при наведении мыши на собственно ссылку указатель примет обычный для такого случая вид руки.

Пример №2 для самостоятельной реализации:

Листинг 2. Двухуровневое меню:

ВНИМАНИЕ! В данном примере, в отличие от рассмотренного в предыдущем подраз­деле, ссылка сработает не только при щелчке на ее тексте, но и на всей соответст­вующей строке подменю.