Динамічне меню
Чи чули ви колись таке твердження, що "не можна зробити динамічне меню, що випадає, виключно на CSS для IE"? Впевнений, що так. І що, ви вірите цьому? Правильно, краще не вірте.
Мета, якої ми хочемо досягти у цій статті
Яким ми представляємо рівень читача.
Взагалі я думав про те, щоб помітити цю статтю як для "поглибленого вивчення (advanced)". Але я впевнений, що навіть не найдосвідченіші розробники добре зрозуміють те, що написано у статті. Коротше, читач просто повинен знати основи CSS і HTML.
Чим це меню відрізняється від усіх інших?
я довго шукав у мережі меню, які були б зроблені на CSS, але не знайшов жодного рішення, яке працювало б без глюків в IE. Однак я знайшов багато цікавих ідей, які і привели мене до того результату, який буде описано тут. Так, мій код теж не досконалий, але я просто не маю часу, щоб виправити всі помилки. Найцікавіше альтернативне рішення з усіх, що я бачив (які використовують CSS), засноване на використанні псевдокласу hover для LI елементів. А я ніколи і не думав, що таке можливо, втім, як і не думав про те, що взагалі можливо зробити випадаюче меню для IE без скриптів.
Основною відмінністю між моїм та іншими меню є те, що моє працює в IE. Всі рішення, які я бачив, використовують елемент LI як основний елемент для псевдокласу :hover, проте Microsoft вирішила, що цей псевдоклас може бути використаний тільки для елемента A. Більшість сайтів роблять застереження, що їх меню працюють тільки в браузерах Opera 7 .x або Mozilla. Але ж ці браузери використовуються лише п'ятьма відсотками користувачів! Так, такі меню хороші в цих браузерах, але на жаль не можуть бути помітні в більшості самихнайпоширеніших браузерів. Нині ми виправимо це непорозуміння.
Що таке меню, зроблене лише за допомогою CSS?
Давайте розглянемо код:
STYLE type = text / css id = "default" title = "default" name = "default" > *::- moz - any - link br ,*:- moz - any - link br < /*a workarround for mozilla*/ display : none ; >
div #menu * cursor: pointer; /*because IE відтворює текстовий cursor якщо link is inactive*/ >
. disabled color: red! important; background: none! important ; >
div #menu background: #F5F5DC; font: 10px Verdana, sans-serif; height: 15px; white-space: nowrap; width: 100%; >
div #menu .a background: #F5F5DC; border: 1px solid #F5F5DC; color : #000000; text - decoration : none ; >
div #menu .a table display: block; font: 10px Verdana, sans-serif; white - space : nowrap ; >
div #menu table, div#menu table a display : none ; >
div #menu .a:hover, div#menu div.menuitem:hover background : #7DA6EE; border : 1px solid #000080; color : #0000FF; margin - right: - 1px; /*resolves a problem with Opera не відтворює правого border*/ >
div #menu .a:hover table, div#menu div.menuitem:hover table background : #FFFFFF; border : 1px solid #708090; display: block; position: absolute; white - space : nowrap ; >
div #menu .a:hover table a, div#menu div.menuitem:hover table a border - left : 10px solid #708090; border - right: 1px solid white; /*resolves a jump problem*/ color : #000000; display: block; padding: 1px 12px; text - decoration: none; white-space: nowrap; z - index : 1000; >
div #menu .a:таблиця наведення a:наведення, div#меню div.menuitem:таблиця наведення a:фон наведення: #7DA6EE; межа: 1 пікс суцільний #000000; ліворуч: 10 пікселів суцільний #000000; колір: #000000; дисплей: блок; padding : 0px 12px ; текст - оформлення: немає; z - індекс: 1000; >
td border-with: 0px; padding : 0px 0px 0px 0px ; >
. пункт меню float : left ; поле: 1px 1px 1px 1px ; padding : 1px 1px 1px 1px ; >
. пункт меню * padding : 0px 0px 0px 0px ; >
#інша висота: авто; видимість : видимий ; >
#moz висота: 1px; видимість : приховано ; >
#moz::-moz-cell-content height : auto ; видимість : видимий ; >
#other::-moz-cell-content height : 1px ; видимість : приховано ; >
TABLE id = власник > TR > TD id = "інше" > DIV id = "menu" > DIV > "пункт меню" > a > "a" href = '#' > Файл BR > ТАБЛИЦЯ > TR > TD > a href = #2>натисніть мене TR > TR > TD > a href = #3>Зберегти TR > TR > TD > a href = #4>Закрити TR > ТАБЛИЦЯ > DIV > DIV > "пункт меню" > A > "a" href = "#11" > Довідка BR > ТАБЛИЦЯ > TR > TD > a > "вимкнено" >.. A > TD > TR > TR > TD > a href = #13>Індекс TR > TR > TD > a href = "#14" > Про A > TD > TR > ТАБЛИЦЯ > DIV > DIV > TD > TR > TR > TD id = "moz" > Спеціальне меню Mozilla! DIV id = "menu" > DIV > "пункт меню" > a > "a" href = '#' > Filezilla A > ТАБЛИЦЯ > TR > TD > a href = #2>Відкрити TR > TR > TD > a href = #3>Зберегти TR > TR > TD > a href = #4>Close TR > TABLE > a > DIV > DIV > "menuitem" > A > "a" href = "#11" > Helpzilla A > TABLE > TR > TD > a > "disabled" >.. A > TD > TR > TR > TD > a href = #13>Index TR > TR > TD > a href = "#14" > About A > TD > TR > TABLE > A > DIV > DIV > TD > TR > TABLE > BR >
Що відбувається, чому все працює?
Відразу зазначу, що в цій статті я не навчатиму вас використання CSS. Тому відразу переходимо до розгляду принципу роботи меню – до псевдокласу :hover. Так, це саме клас. Тобто. селектор може наслідувати інший селектор, який включає ':hover'. У нашому випадку 'A:hover TABLE' вибирає '
Отже, що тут є? 2 таблиці з якорями всередині якір.
Які є прихованими.
Браузер показує вміст якоря при наведенні вказівника миші та застосовує у цьому випадку відповідний стиль:
Для тексту посилання використовується:
Для випадаючої таблиці, яку ми використовуємо для підменю: це ключова таблиця, яка і є списком, що випадає.
Для посилань усередині підменю:
Якщо ми наводимо вказівник на одне з посилань у підменю, браузер застосовує наступний стиль:
Для посилань усередині підменю:
Стиль посилань у меню, що випадає:
Можливо, ви помітили, що я використовував кількавластивостей 'z-index' для деяких елементів. Вони є хаками для деяких проблем, які я знайшов під час тестування меню.
Для того, щоб додати підрівні в меню, що випадає, потрібно просто вставити ще один елемент div '.menuitem' (разом з його вмістом і аналогічною структурою) замість посилання в батьківську таблицю. Тепер, коли ви маєте підрівні в меню, вам потрібно буде видалити теги , щоб дати меню "нормально виїжджати". На додаток до цього, вам потрібно буде зробити кілька копій класів .menuitem та .a з однаковими властивостями, але різними іменами для кожного підменю. Так, схоже попрацювати доведеться багато, але ви можете просто додати їх селектори у відповідну секцію таблиці стилів.
Повний опис того, як це зробити, я зроблю наступного разу. А поки що скажу, що це меню можна змінити так, як вам захочеться, пристосувати під себе. І можливостей для цього існує безліч - обмежити їх може тільки ваша фантазія.
Переключення стилів (Скіни)
Якщо ви хочете додати скіни для вашого меню з можливістю зміни їх самим користувачем, вам потрібно буде додати додаткові таблиці стилів і дати їм імена з . Наприклад, демонстраційна версія меню на цій сторінці включає такі визначення:
Зверніть увагу на порядок присвоєння імен, я наполегливо рекомендую йому суворо дотримуватися.
Виберіть один із стилів, клацнувши на відповідний, і поверніться вгору, щоб побачити зміни :
onclick = "document.styleSheets('default').disabled=false;document.styleSheets('alternate').disabled=true;" > Стиль за замовчуванням
onclick = "document.styleSheets('alternate').disabled=false;document.styleSheets('default').disabled=true;" > Блакитний
onclick ="document.styleSheets('alternate').disabled=true;document.styleSheets('default').disabled=true;" > Без стилів
Це робиться так:
Попередження! Це просто маленький приклад! Перезавантаження сторінки скине стандартні значення для таблиць стилів. Тому для реальних цілей необхідно використовувати cookies або серверні скрипти для того, щоб запам'ятовувати вибір користувача, що знову ж таки не є предметом розгляду цієї статті. Додам тільки, що наведений вище код буде працювати тільки в IE.
Якщо ж браузер не підтримує CSS, він принаймні буде відображати всі посилання.
Так звана "проблема Mozilla-и" - посилання всередині підменю не працюють. Тобто. неможливо відкрити їх у тому вікні (але вони працюють при спільному натисканні Shift+натискання - в нове). Опис проблеми дивіться у розділі "помилки".
За замовчуванням посилання на підменю не працюють у Mozilla. Але я знайшов більш-менш прийнятне вирішення цієї помилки. Воно засноване на вставці спеціального меню, знову ж таки без використання скриптів. Перегляньте уважно ті місця коду, де згадується Mozilla (або 'moz'). Ви побачите, що HTML розділи немає вкладених якорів (останній тег поміщений туди, де і має перебувати). У першій частині CSS я використовую недокументовані селектори - це спеціальні селектори для Mozilla і додаю селектор :hover для тих елементів div, які підтримуються Mozilla. І все одно після цього поведінка залишається не зовсім коректною.
Сторінка була протестована в IE версій 5, 5.5, 6, Opera 7.23 і Mozilla 0.71. Швидше за все, меню працюватиме і в попередніх версіях зазначених браузерів.