===== Вертикальное меню =====
Класс ''.menu-v'' — создаёт простое вертикальное меню.
/* Vertical Menu
------------------------------ */
.menu-v { border-top: 1px solid #ccc; }
.menu-v li { padding: 2px 0; list-style: none; border-bottom: 1px solid #ccc; }
.menu-v li ul { padding-left: 1em; margin-top: 2px; }
.menu-v li li { border: none; border-top: 1px solid #ccc; }
Поддерживается отступы вложеннх уровней с помощью строчки:
.menu-v li ul { padding-left: 1em; margin-top: 2px; }
Для создания меню, достаточно подключить его к списку:
===== Вертикальное многоуровневое выпадающее меню =====
Класс ''.menu-v-d'' — создаёт вертикальное меню, с выпадающими подменю. Уровень вложенности - 3 уровня.
/* Vertical Drop Down Menu
------------------------------ */
.menu-v-d { border-top: 1px solid #ccc; }
.menu-v-d li { padding: 2px 0; display: block; position: relative; border: 1px solid #ccc; border-width: 0px 1px 1px 1px; list-style: none; }
.menu-v-d li a { display: block; position: relative; text-decoration: none; padding-left: 10px; }
.menu-v-d li:hover { background: #ccc; }
.menu-v-d a:hover { color: #fff; }
.menu-v-d li ul { display: none; position: absolute; top: -1px; border-top: 1px solid #ccc; left: 100%; width: 100%; background: #fff; }
.menu-v-d ul ul { left: 100%; }
.menu-v-d li ul li { background: #fff; }
.menu-v-d li:hover ul ul,
.menu-v-d li:hover ul li:hover ul ul { display: none; }
.menu-v-d li:hover ul,
.menu-v-d li:hover ul li:hover ul,
.menu-v-d li:hover ul li:hover ul li:hover ul { display: block; }
Первая часть кода, практически аналогичная рассмотренному выше вертикальному меню.
Строчки:
.menu-v-d li ul { display: none; position: absolute; top: -1px; border-top: 1px solid #ccc; left: 100%; width: 100%; background: #fff; }
.menu-v-d ul ul { left: 100%; }
.menu-v-d li ul li { background: #fff; }
Отвечают за выпадающие подменю, оно будет смещено на ширину основного меню и иметь такую же ширину.
За выпадание и спрятанность меню отвечает следующий код-ёлочка:
.menu-v-d li:hover ul ul,
.menu-v-d li:hover ul li:hover ul ul { display: none; }
.menu-v-d li:hover ul,
.menu-v-d li:hover ul li:hover ul,
.menu-v-d li:hover ul li:hover ul li:hover ul { display: block; }
Для использования достаточно прописать класс ''menu-v-d'':
----
Ссылки по теме:
* [[http://www.cssplay.co.uk/menus/|Stu Nicholls | CSSplay | CSS only menus]]