|
|
|
| Таблицы стилей. Меню |
| В последнее время технология CSS завоевывает все большее место в разработке сайтов. |
| Достаточно популярной является тема «горизонтального ниспадающего (или выпадающего) меню». Много публикаций и |
| предлагаемых решений. Одна беда. Компьютер, это такая штука, которая выполняет команды, и, если декларируется |
| выполнение предлагаемого действия (или последовательности действий), то хотелось бы визуально видеть достижение успеха. |
| Бах! И получилось. Но, у большей части публикаций, к сожалению, «бахов» много, а вот с успехами – проблема. А ведь |
| всегда можно «докапаться» хотя бы до преемлевого результата, конечно, оговорив определенные ограничения. |
| Например, тестируем реализацию IE 9.0 от Microsoft, на последовательность CSS предложений по построению |
| двухуровневого (если уровней больше, то это лишние хлопоты для пользователя) горизонтального меню. |
| Суть подхода можно описать следующим образом: |
| 1 – формируем HTML страницу, на которой хотим разместить меню, используя CSS. |
| 2 – Пишем с пояснениями строку или строки CSS предложений с декларацией получаемого результата. |
| 3 – Сохраняем файл, жмем F5 и, «ба-бах» - получилось. |
| 4 – повторяем действия 2 – 3 до достижения успешного решения. |
| Предложенный метод не является уроком или чем-то поучающим, это просто обмен опытом. Более детальное описание |
| конструкций CSS предложений, можно найти на сайте http://htmlbook.ru/. |
| 1. Разбили на две колонки слева подпункты справа верхний уровень меню |
| 2. Получили одну колонку верхнего уровня меню |
| 3. Вытянули меню верхнего уровня в строку |
| 4. Все блоки пунктов меню при наведении на пункт выводятся ниже пункта по центру |
| 5. Развернули меню по высоте |
| 6. Выделение выбранного верхнего пункта меню и ссылки из блока |
| 7. Класс .time для использования с любым тегом. Контейнер горизонтальной строки меню. Обязательно |
| сверху, но порядок вставки 7 |
| Тестирование меню проводилось на операционной системе Windows 7.pro (64 бит). Использовались текущие браузеры: |
|
