Падащо меню без CSS JavaScript
Единственият недостатък на падащото меню, без JS е, че трябва да се знае предварително колко ще бъдат инвестирани нива. Ще опиша един пример с пет нива, които трябва да бъдат достатъчно за почти всеки сайт.
Меню ще бъде построен върху неподредените списъци, вложени. Нека да пиша веднъж HTML код на нашия падащото меню (да не се натрупват огромен списък Направих падащия просто втора алинея):
За да бъде по-лесно да се работи със списъци, сложих нашето меню в контейнер за DIV.
Сега ние трябва да нулирате стиловете за списъци, за да донесе красота с точките са подобни на бутона, и да се скрият елементи подменюто. За да направите това, пишем стила:
Ако прочетете моята статия за това как да се направи проста CSS меню. Може би сте забелязали някои разлики. Първо направих рамка с помощта на границата на собственост, за които е предназначен; На второ място, за да добавите отстъп, аз не се използва подложка имота, и са направили правилния височина и ред тире помощта на имот текст тире. Защо така? Но само на широчината на менюто е същото във всички браузъри.
Да видим какво имаме:
Сега нашата задача е да задържите курсора на мишката върху елемент от менюто, пусна списъка с дете. Този проблем е решен много лесно за Firefox, Opera, Safari б IE7. Добави в стила на следните елементи:
Нека обясня какво е направено. Използвах псевдо-клас изскачащата за LI елемент и посочи относителната му позициониране, както и видимост за списъка с дете: видима, което всъщност показва падащо меню. Трябва да се отбележи, че ако пишете .cssmenu Ли: мишката ул (неподписана>), след това се показват всички вложени нива на менюто, че ние не се нуждаем. Аз също се идентифицират всички родителски връзки, които могат да се видят по целия път до текущия елемент от менюто.
Това е, което се случи в края (трябва да работи в Firefox, Opera, Safari и IE7):
Но вложени елементи от менюто не са вътре таг , и след него, и така няма да бъдат показани елементите от менюто на детето. Така че ние трябва да се поставят децата в списъка с етикет . За да се реши този проблем с падащото менюто на дисплея в Internet Explorer под седмата версия, ние ще трябва да прибегне до условния коментар и таблици. Къде трябва да има дъщерно меню, вместо затварящия маркер пишем това:
И тогава списъка дете добавете следния код:
Ние трябва да получите на следния HTML код:
Остава само да добавите стил на масата за справка, когато задържите:
Това меню работи абсолютно същите се появява в браузърите на FF, Opera, IE7, IE6, Safari. За изследователя при втория, може да се наложи в khimichit със стил, за да се покаже правилно, широчината на елемента. Аз специално не се коригира на дисплея в IE 5.5, с надеждата, че те са малко тези, които я използват.