Читайте также:
|
|
Нередко набор ссылок оформляют в виде так называемого кнопочного меню. Опции такого меню в окне браузера выглядят как прямоугольники с текстом. Прямоугольники можно создать с помощью тегов <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")};
Дата добавления: 2015-09-11; просмотров: 23 | Поможем написать вашу работу | Нарушение авторских прав |