Таблицы стилей. Меню

                 В последнее время технология 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 бит). Использовались текущие браузеры:


 

На главную