Меню, що випадає на css без javascript
Єдині недоліки меню, що випадає без JS в тому, що потрібно заздалегідь знати, скільки буде вкладених рівнів. Я опишу приклад з п'ятьма рівнями, що повинно вистачити практично для будь-якого сайту.
Меню буде побудовано на ненумерованих списках, вкладених один в одного. Напишемо відразу HTML код нашого меню, що випадає (щоб не нагромаджувати величезний лістинг я зробив випадає тільки другий пункт):
Щоб було простіше працювати зі списками, я помістив наше меню в контейнер DIV.
Тепер нам потрібно обнулити стилі для списків, навести красу, щоб пункти були схожі на кнопки і приховати вкладені пункти меню. Для цього напишемо стиль:
Якщо Ви Новомосковсклі мою статтю про те як зробити просте CSS меню. Ви напевно помітили деякі відмінності. По-перше рамку я зробив за допомогою властивості border, для чого воно і призначене; По-друге, щоб зробити відступ, я не став користуватися властивістю padding, а вказав висоту рядка і відступ справа зробив за допомогою властивості text-indent. Чому саме так? Та тільки для того, щоб ширина пункту меню була однаковою у всіх браузерах.
Давайте поглянемо, що у нас вийшло:
Тепер наше завдання полягає в тому, щоб при наведенні мишки на пункт меню, випадав дочірній список. Для Firefox, Opera, Safari b IE7 це завдання вирішується дуже просто. Додаємо в стиль наступне:
Поясню, що зроблено. Я скористався псевдо-класом hover для елемента LI і вказав для нього відносне позиціонування, а для дочірнього списку visibility: visible, що власне і відображає меню, що випадає. Треба зауважити, що якщо написати .cssmenu li: hover ul (без знака>), то будуть відображені всі вкладені рівні меню, що нам абсолютно не потрібно. Також я виділив все батьківські посилання, щоб було видно весь шлях до поточного пункту меню.
Ось що вийшло в підсумку (повинно працювати в браузерах Firefox, Opera, Safari і IE7):
Але ж вкладені пункти меню у нас знаходяться не всередині тега , а після нього, а значить дочірні пункти меню відображені не будуть. Значить нам потрібно помістити дочірні списки всередину тега . Щоб вирішити цю задачу з відображенням меню, що випадає в браузерах Internet Explorer молодше 7-ий версії, нам доведеться вдатися до умовних Коментарі та таблицями. Там де має бути дочірнє меню, замість закриває тега ми напишемо ось що:
А після дочірнього списку додамо наступний код:
У нас повинен вийти наступний HTML код:
Залишається тільки додати стиль для таблиці і для посилань при наведенні:
Це меню працює і абсолютно однаково відображається в браузерах FF, Opera, IE7, IE6, Safari. Для експлорера молодше 6-ого, можливо доведеться по-хімічити зі стилем, щоб правильно відобразити ширину пункту. Я спеціально не став виправляти відображення в IE 5.5, в надії на те, що їм вже мало хто користується.