Библиотека Интернет Индустрии I2R.ru

Меню с использованием возможностей таблиц стилевых спецификаций уже описывалось в прошлом, но тот вариант был построен на табличной основе. Примерно тех же результатов можно достичь и без использования ячеек таблиц. Ячейки заменим на блоки.

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

Что нам надо для обычного горизонтально расположенного меню:

Вот это и есть описание простого горизонтального меню без использования таблиц. Что тут есть такого, чего мы еще не встречали...

Самое главное — display: inline; Ссылка образует блок и без нашей помощи, но он не виден. Чтоб сделать блок видимым, мы должны его специально выделить — мол, не просто это блок, а видимый невооруженным глазом, с установленными нами лично свойствами блок. Для этого прописываем: display: block; Все. Теперь описываем все знакомые нам свойства блоков. Обратите внимание, что разные описания у нас стоят для ссылки и для ссылки под мышкой!

Если мы прописываем display: inline;, то мы получаем не просто блок, а строковый блок. В противном случае мы не сможем разместить блоки-ссылки друг за другом по горизонтали.

Далее. Высоту блоков в описании мы задали фиксированно, а вот ширину назначили auto. Это значит, что ширина блока будет растягиваться до того значения, которое обеспечит размещение содержимого с учетом всех рамок и отступов.

Посмотрите результат

Мы можем при необходимости вывести получившиеся блоки из потока, назначив им абсолютное позиционирование, или использовать как строковые элементы.

Если мы оставим display: block; мы сможем без проблем сделать вертикальное меню заданной ширины.

Отличие только в двух записях: display: block; и height: auto;. Что мы имеем с height: auto; Мы не назначаем явно высоту блоков, но прописываем их ширину, в этом случае наши "коробочки" будут растягиваться по высоте.

Посмотрите результат

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

На что стоит обратить внимание. В данном примере вертикального меню ссылки переносились на новую строку "в принудительном порядке", при помощи BR, а расстояние по вертикали зависело от размеров шрифта, заданного в описании БОДИ. Можно этого не делать, а задать блокам внешний отступ, тогда все ссылки данного класса будут автоматически переноситься на новую строку и располагаться друг от друга на расстоянии внешнего отступа. Кроме того, стоит иметь ввиду, что меню сделанно "на половину". Есть еще состояние ссылки при нажатии, посещенные ссылки.