Главная страница | Контакты | Случайная страница Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

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

Нередко набор ссылок оформляют в виде так называемого кнопочного меню. Опции такого меню в окне браузера выглядят как прямоугольники с текстом. Пря­моугольники можно создать с помощью тегов <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")};