Динамично падащо меню
Чували ли сте някога твърдението, че „не можете да направите динамично падащо меню само в CSS за IE“? Сигурен съм, че да. И какво, вярваш ли? Така е, не вярвайте.
Целта, която искаме да постигнем в тази статия
Как представяме нивото на читателя.
Всъщност мислех да маркирам тази статия като "напреднали". Но съм сигурен, че дори и не най-опитните разработчици ще разберат добре написаното в статията. Накратко, читателят просто трябва да знае основите на 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 < /*заобиколно решение за mozilla*/ дисплей : няма ; >
div #menu * курсор : показалец ; /*защото IE показва текстовия курсор ако връзката е неактивна*/ >
. деактивиран цвят: червен! важно; фон: няма! важно ; >
div #фон на менюто: #F5F5DC; шрифт: 10px Verdana, sans - serif; височина: 15px; бял интервал: nowrap; ширина: 100%; >
div #menu .a фон: #F5F5DC; контур: 1px плътен #F5F5DC; цвят: #000000; текст - декорация: няма ; >
div #menu .a table display : block ; шрифт: 10px Verdana, sans - serif; бял интервал: nowrap; >
div #menu table, div#menu table a display : none ; >
div #menu .a:hover, div#menu div.menuitem:hover фон: #7DA6EE; контур: 1px плътен #000080; цвят: #0000FF; поле - дясно:- 1px; /*разрешава проблем с това, че Opera не показва дясната рамка*/ >
div #menu .a:hover table, div#menu div.menuitem:hover table background: #FFFFFF; контур: 1px плътен #708090; дисплей: блок; позиция: абсолютна; бял интервал: nowrap; >
div #menu .a:hover table a, div#menu div.menuitem:hover table a border - ляво: 10px solid #708090; рамка - дясна: 1px плътно бяло; /*разрешава проблем с прескачане*/ цвят : #000000; дисплей: блок; подложка: 1px 12px; текст - декорация: няма; бял интервал: nowrap; z - индекс: 1000; >
div #menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover background : #7DA6EE; контур: 1px плътен #000000; рамка - ляво: 10px плътни #000000; цвят: #000000; дисплей: блок; подложка: 0px 12px; текст - декорация: няма; z - индекс: 1000; >
td border-with: 0px; подложка: 0px 0px 0px 0px ; >
. елемент от менюто float: ляво; поле: 1px 1px 1px 1px ; подложка: 1px 1px 1px 1px ; >
. елемент от менюто * подложка: 0px 0px 0px 0px ; >
#друга височина: авто; видимост : видим ; >
#moz височина: 1px; видимост : скрито ; >
#moz::-moz-cell-content височина: автоматично; видимост : видим ; >
#other::-moz-cell-content височина: 1px; видимост : скрито ; >
TABLE id = притежател > TR > TD id = "друго" > DIV id = "меню" > 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 = "меню" > DIV > "меню елемент" > a > "a" href = '#' > Filezilla A > ТАБЛИЦА > TR > TD > a href = #2>Отворете TR > TR > TD > a href = #3>Запази TR > TR > TD > a href = #4>Затваряне TR > ТАБЛИЦА > a > DIV > DIV > "меню елемент" > A > "a" href = "#11" > Helpzilla A > ТАБЛИЦА > TR > TD > a > "забранено" >..A > TD > TR > TR > TD > a href = #13>Индекс TR > TR > TD > a href = "#14" > Относно A > TD > TR > ТАБЛИЦА > A > DIV > DIV > TD > TR > ТАБЛИЦА > 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;" > Без стила
Това се прави по следния начин:
Внимание! Това е само малък пример! Презареждането на страницата ще върне стиловите листове към техните стойности по подразбиране. Следователно за реални цели е необходимо да се използват бисквитки или сървърни скриптове, за да се запомни изборът на потребителя, което отново не е предмет на тази статия. Ще добавя само, че горният код ще работи само в IE.
Ако браузърът не поддържа CSS, той поне ще изобрази всички връзки.
Така нареченият "проблем на Mozilla" - връзките в подменютата не работят. Тези. не е възможно да ги отворите в същия прозорец (но работят, когато натиснете Shift + щракване - към нов). За описание на проблема вижте раздела "Грешки".
По подразбиране връзките към подменюто не работят в Mozilla. Но намерих повече или по-малко приемливо решение на тази грешка. Базира се на вмъкване на специално меню, отново без използването на скриптове. Погледнете внимателно местата в кода, където се споменава Mozilla (или „moz“). Ще видите, че HTML секциите нямат вложени котви (последният таг е поставен там, където трябва). В първата част на CSS използвам недокументирани селектори, които са специфични за Mozilla, и добавям селектор :hover за тези div елементи, които се поддържат от Mozilla. И все пак след това поведението остава не съвсем правилно.
Страницата е тествана в IE версии 5, 5.5, 6, Opera 7.23 и Mozilla 0.71. Най-вероятно менюто ще работи в по-стари версии на тези браузъри.