Падащо меню CSS - всичко за DLE, datalife двигател, DLE

Това меню работи във всички браузъри, включително IE 5/6.

Ще започнем с семантично маркиране. Нашето меню, съдържащо три нива едновременно - това е проста неподреден списък, както и всяко подменю в него - това е вложено списък. Този подход има няколко предимства:

* Код менюто си заема малко място
* Меню е достъпно за търсачките и алтернативни клиенти
* Имате ли споделяне на съдържание и представяне, контролиране на клиринга, използвайки само CSS

В HTML, то изглежда така:

Не се страхувайте от списъка с прикачени файлове. Основното нещо - да се следват коректността на отваряне / затваряне на таговете. По-специално, всеки subtag

Това е, което имаме до момента: Стъпка 1.
битов стил

Сега ние ще се добавят няколко филийки в нашия CSS код:

#nav, #nav ул списък стил # 58; няма;
марж # 58; 0;
подложка # 58; 0;
граница # 58; 1px твърдо вещество # 000;
фон # 58; # 515151;
поплавък # 58; ляв;
ширина # 58; 100%;
>
#nav Li поплавък # 58; ляв;
позиция # 58; относителна;
фон # 58; # 515151;
фон # 58; няма;
>
#nav ли ул дисплей # 58; няма;
>

Трите правила сме извършили следните неща:

* Премахнато куршум от нашия списък - списък стил: няма
* Възстановяване на подложките за уплътнение и поле от елементите от менюто
* Украсете граничния менюто и заден план. фона на имущество: няма се използва за определяне на всички браузъри прозрачен фон освен IE 5. Аз ще го обясня по-късно
* Принудени да елемента в списъка

, застане на една линия с помощта на правила плувка: ляво
* Скрита подменю на 2-ри и 3-ти ниво, като посочва дисплей: няма

Когато елементите на блока имат поплавък собственост, те стават "плаващ". Тя ви позволява да ги изгради в една линия един с друг. Повече информация за поплавък имота.

От всички елементи на списъка

сега е "плаващ", самият списък "свива". Това се дължи на невъзможността да се определи действителната височина на елемента, който съдържа други "плаващи" елементи.

За да се справи с тази напаст, има няколко метода, но те не могат да работят в новия IE 7. Така че тук реших да използвам метода на ПНС е да се възложи имот поплавъка: ляво на контейнера. Тя ни освобождава от "разпадането" на списъка, но го прави с тях елементи на разгъната от дясната страна на менюто. Ето защо ние определите ширината на цялото меню на 100% - в дясно просто не се възпроизведе.

В допълнение, ние може да покаже имота ясно: и двете за елемента веднага след менюто. Тя щеше да го накара да падне под всички "плаващите" елементи.

Това, което имам: Стъпка 2.

#nav цвят # 58; #fff;
текст-украса # 58; няма;
показване на # 58; блок;
ширина # 58; 120px;
подложка # 58; 4px 10px;
фон # 58; URL # 40; dot.png # 41; Повтарям-годишна десен;
>
#nav на # 58; навъртам цвят # 58; # 000;
фон # 58; #ccc;
>
#nav ли # 58; висене фон # 58; # 333;
>

Първото правило ние изправи връзки (така че те са по-скоро като един бутон):

Целева ширина е необходимост при използване на свойствата на поплавъка за всички елементи с изключение на елемент

Selector #nav на: навъртам се задейства, когато ние обобщим курсора връзка и #nav Ли: навъртам - когато става сумиране на елемента от списъка. Вторият случай е необходимо да се гарантира, че в менюто си остава "следа" на нашето движение (както ще видим по-късно).

Резултат: Стъпка 3.
Ние не напразно се нарича "падащото" меню е

Ние добавя към съществуваща правило:

#nav ли ул дисплей # 58; няма;
>

#nav ли ул дисплей # 58; няма;
позиция # 58; абсолютна;
фон # 58; URL # 40; Fone-tr.png # 41 ;;
подложка # 58; 8px 0;
ширина # 58; 138px;
>

Експресия позиции: абсолютен използвани за абсолютна член позициониране относителна подменю

горен слой.

Когато имаме родител елемент, разположен "роднина" (т.е., с позиция: .. Относителна), всички абсолютно позиционирани елементи, съдържащи се в него, ще бъдат позиционирани спрямо майка елемент, но не и по отношение на цялата страница.

#nav Li Li ширина # 58; 118px;
фон # 58; няма;
>
#nav ли # 58; мишката ул дисплей # 58; блок;
>

Магията е в дисплея на падащото меню: блок за #nav Ли: мишката ул. Това го прави подменю "се появи", когато курсорът се приближава връзката, на мястото на бившия инсталиран режим на изображение: няма:

#nav ли # 58; висене ли ул дисплей # 58; няма;
ширина # 58; 138px;
Отговор # 58; -9px;
лявото # 58; 133px;
>
#nav ли # 58; висене ли # 58; мишката ул дисплей # 58; блок;
>

Ширината на нашия под пиксела 138 се дължи на факта, че ние изважда 2 пиксела от границите на всяка страна: 140 - 1 - 1 = 138 пиксела.

Selector #nav Ли: висене ли ул засяга менюто ниво 3. Ние му изместване наляво с ширина от 133 пиксела (чисто емпиричен стойност) и малко по-нагоре (за да го доведе до едно и също ниво с линк). Сега, когато се движите мишката, нашата подменю ще изскочи отдясно на справки.

Падащо меню (все още за IE): Стъпка 4.
IE фактор

Животът на много уеб разработчици ще бъде по-лесно, ако не съществуваше Internet Explorer. Ситуацията започва да се подобри в резултат на изхвърлянето на седмата версия, но широкото разпространение е все още много далеч.

Това ви позволява да "приложи" jshover клас за всеки елемент

, върху които курсорът преминава. Тази функция работи само в Internet Explorer - други браузъри той просто не е необходимо.

Сега, когато менюто е спечелил в IE, добавете към четирите вече съществуващи правила за допълнителна селектор li.jshover:

#nav ли # 58; мишката,
#nav li.jshover.
>
#nav ли # 58; мишката ул,
#nav li.jshover ул.
>
#nav ли # 58; висене ли ул,
#nav li.jshover ли ул.
>
#nav ли # 58; висене ли # 58; мишката ул,
#nav li.jshover li.jshover ул.
>

Сега вече можете да гледате и IE: стъпка 5, на финала.
допълнителна информация

Нейната фон полупрозрачни PNG файл подменю. IE 6 не поддържа прозрачност, но можете да го оправя.

Поради използването на прозрачни изображения, че трябва да се премахне цвета на фона. Това доведе до факта, че ако забраните снимките под-писма не са видими. Има само един изход: да се определи цвета на фона на #nav ли, загуба на прозрачност.

Аз използвам хак фон: няма;, за да принудят менюто цвят за IE 5. Ако това не бъде направено, то няма да бъде показан фона на браузъра. Може би това може да се коригира по някакъв начин и по друг начин, но нямам желание да се справят с всичките си странности.

UPD. Akella предполага, че в някои настройки, системата за меню се пука по операта. Това се дължи на използването на всички размери на "абсолютни" звена на пиксела. Pixels - е зло.
Така че аз направих втора версия на напълно ги (с изключение на ширината на граница). И тъй като на този един пиксел рамка може да се появи малки пропуски чрез увеличаване на размера на шрифта. Exit - Да не се използва границата =)