===== Горизонтальное меню =====
Класс ''.menu-h'' — создаёт простое горизонтальное меню.
/* Horizontal Menu
------------------------------ */
.menu-h { overflow: hidden; border-left: 1px solid #ccc; }
.menu-h li { float: left; list-style: none; padding: 0 .8em; border-right: 1px solid #ccc; }
Использовать его в деле так же просто:
===== Горизонтальное многоуровневое выпадающее меню =====
Класс ''.menu-h-d'' — создаёт горизонтальное меню, с вертикальными выпадающими подменю. Уровень вложенности - 3 уровня.
/* Horizontal Drop Down Menu
------------------------------ */
.menu-h-d { min-height: 24px; border-left: 1px solid #ccc; }
.menu-h-d li { float: left; display: block; position: relative; border: 1px solid #ccc; border-width: 1px 1px 1px 0px; list-style: none; }
.menu-h-d a { text-decoration: none; padding: 2px 10px; display: block; }
.menu-h-d ul { display: none; position: absolute; top: 22px; left: -1px; width: 160px; background: #fff; border: 0; border-bottom: 1px solid #ccc; }
.menu-h-d ul ul { left: 100%; top: -1px; }
.menu-h-d li li { float: none; border-width: 1px 1px 0px 1px; }
.menu-h-d li:hover { background: #ccc; }
.menu-h-d a:hover { color: #fff; }
.menu-h-d li:hover ul,
.menu-h-d li:hover ul li:hover ul,
.menu-h-d li:hover ul li:hover ul li:hover ul { display: block; }
.menu-h-d li:hover ul ul,
.menu-h-d li:hover ul li:hover ul ul { display: none; }
Высота меню ''24px''.
Позиционирование выпадающих меню осуществляется строчками:
.menu-h-d ul { display: none; position: absolute; top: 22px; left: -1px; width: 160px; background: #fff; border: 0; border-bottom: 1px solid #ccc; }
.menu-h-d ul ul { left: 100%; top: -1px; }
Первая строчка ''.menu-h-d ul {…}'' задаёт ширину выпадающих меню(''160px'') и скрывает все вложенные списки. Вторая, ''.menu-h-d ul ul {…}'', смещает меню следующего уровеня в право на ширину предыдущего уровня и на 1 пиксель вверх(так как рисуется рамка вокруг выпадающих меню).
Строчка:
.menu-h-d li li { float: none; border-width: 1px 1px 0px 1px; }
Отключает плавающее свойство во вложенных списках. Ведь нам нужны вертикальные выпадающие меню, не правда ли?
Процесс выпадания вложенных меню описывается строчками:
.menu-h-d li:hover ul,
.menu-h-d li:hover ul li:hover ul,
.menu-h-d li:hover ul li:hover ul li:hover ul { display: block; }
При необходимости можно легко расширить количество поддерживаемых вложенных уровней до требуемого количества.
Следующий код является сдерживающим фактором, против появления сразу всех вложенных меню в одной ветке, благодаря ему подуровни появляются по мере продвижения мышки вглубь структуры. Этот код прячет вложенные уровни у текущего(''li:hover'') элемента меню:
.menu-h-d li:hover ul ul,
.menu-h-d li:hover ul li:hover ul ul { display: none; }
Пример использования:
===== Горизонтальное многоуровневое выпадающее вверх меню =====
Класс ''.menu-h-d.d-up'' — создаёт горизонтальное меню, с выпадающими вверх подменю.
Для этого используется весь предыдущий код и дополнительно несколько правил, позиционирующие вложенные меню по свойству ''bottom'':
/* Horizontal Drop Up Menu
------------------------------ */
.menu-h-d.d-up ul { bottom: 22px; }
.menu-h-d.d-up ul ul { bottom: -1px; }
Пример использования: