Садржај

• На корак
• 1. део од 2: Писање ХТМЛ-а
• 2. део од 2: Писање ЦСС-а
• Савети

Помоћу падајућег менија креирате јасан и хијерархијски преглед свих важних делова на страници и пододељака које страница садржи. Само треба да пређете мишем преко главних одељака да би се појавили подсекције. Можете да направите падајући мени користећи само ХТМЛ и ЦСС.

На корак

1. део од 2: Писање ХТМЛ-а

1. Направите свој одељак за навигацију. Обично користите нав> за траку за навигацију на целој веб локацији, заглавље> за мање одељке веза који су везани за страницу или див> ако се чини да ниједна друга опција не одговара. Поставите ово у елемент див> тако да можете прилагодити стил контејнера и самог менија.
   • див>
   • нав>
   • / нав>
   • / див>
2. Дајте сваком одељку атрибут класе. Касније ћемо користити атрибут класе да модификујемо стил ових елемената помоћу ЦСС-а. Дајте и контејнеру и менију свој атрибут класе.
   • див>
   • нав>
   • / нав>
   • / див>
3. Додајте листу ставки у менију. Неуређена листа (ул>) садржи ставке главног менија (ставке листе ли>), ако корисник пређе мишем преко ње, видеће падајуће меније. Додајте класу „цлеарфик“ елементу листе; доћи ћемо до тога касније у табели ЦСС.
   • див>
   • нав>
   •       ул>
   •          ли> Почетна / ли>
   •          ли> Запослени
   •          ли> Контакт
   •          / ли>
   •       / ул>
   • / нав>
   • / див>
4. Додајте везе. Ако ове ставке менија највишег нивоа воде и до сопствених страница, сада можете да их уметнете. Веза до непостојећег сидра (као што је "#!"), Чак и ако се не повезују ни са чим, па ће показивач корисника изгледати другачије. У овом примеру контакт не води никуда, али остале две ставке менија:
   • див>
   • нав>
   • ул>
   • ли>а хреф = "/">Кућа/ а>/ ли>
   • ли>а хреф = "/ Запослени">Члан особља/ а>
   • / ли>
   • ли>а хреф = "#!">Контакт/ а>
   • / ли>
   • / ул>
   • / нав>
   • / див>
5. Направите подлисте за падајуће ставке. Након креирања стила, ове листе формирају падајући мени. Ставите листу у ставку листе преко које ће корисник прелазити мишем. Додајте атрибут класе и везу као и раније.
   • див>
   • нав>
   • ул>
   • ли> а хреф = "/"> Почетна / а> / ли>
   • ли> а хреф = "/ Запослени"> Запослени / а>
   •          ул>
   •             ли> а хреф = "/ борсато"> Марко Борсато / а> / ли>
   •             ли> а хреф = "/ титулаер"> Цхриет Титулаер / а> / ли>
   •          / ул>
   • / ли>
   • ли> а хреф = "#!"> Контакт / а>
   •          ул>
   •             ли> а хреф = "маилто: хелпдеск@цомпани.нл"> Пријави проблем / а> / ли>
   •             ли> а хреф = "/ суппорт"> Корисничка подршка / а> / ли>
   •          / ул>
   • / ли>
   • / ул>
   • / нав>
   • / див>

2. део од 2: Писање ЦСС-а

1. Отворите ЦСС табелу стилова. Пошаљите везу до табеле ЦСС стилова у одељку главе ХТМЛ документа ако веза већ није тамо. У овом чланку нећемо покривати основе ЦСС-а, попут постављања фонта и боје позадине.
2. Додајте цлеарфик код. Сећате се да сте на листу менија додали класу „цлеарфик“? Елементи падајућег менија обично имају транспарентну позадину, што омогућава премештање осталих елемената. Једноставна адаптација ЦСС-а може решити овај проблем. Ево лепог, брзог решења, иако то неће функционисати у Интернет Екплореру 7 и старијим верзијама:
   • .цлеарфик: након {
   • садржај: "";
   • приказ: табела;
   • }
3. Направите основни дизајн. Помоћу овог кода можете да поставите свој мени на врх странице и сакријете падајуће елементе. Ово је наменски врло једноставно, тако да се можемо фокусирати на одговарајући код. Можете га касније изменити додатним ЦСС кодом, као што су додавање и маргина.
   • .нав-враппер {
   • ширина: 100%;
   • позадина: # 008Б8Б;
   • }
   •  
   • .нав мени {
   • положај: сродник;
   • приказ: уградни блок;
   • }
   •  
   • .суб мени {
   • позиција: апсолутна;
   • дисплеј: ниједан;
   • позадина: # 555;
   • }
4. Нека се падајуће ставке појаве када задржите показивач миша изнад њих. Елементи у падајућој листи су сада постављени тако да се не приказују. Ево како да учините да се читава подсписка појави чим задржите показивач изнад „родитеља“:
   • .нав-мену ул ли: ховер> ул {
   • дисплеј блок;
   • }
   • Напомена - ако су додатни менији скривени у ставкама менија у падајућем менију, овде додата својства примењиваће се на све меније. Ако желите да се стил примењује само на први ниво падајућих менија, уместо тога користите „.нав-мену> ул“.
5. Стрелицом означите да постоји падајући мени. Веб дизајнери обично стрелицом надоле показују да елемент отвара падајући мени. Овај код додаје стрелицу сваком елементу у вашем менију:
   • .нав мени> ул> ли: после {
   • садржај: " 25БЦ"; / * избегнути уницоде за стрелицу надоле * /
   • величина фонта: .5ем;
   • дисплеј блок;
   • позиција: апсолутна;
   •    }
   • Напомена - Подесите положај стрелице својствима горњи, доњи, десни или леви.
   • Напомена - Ако немају све ставке у менију падајуће падајуће ставке, немојте мењати изглед целог навигационог менија класе. Уместо тога, додајте другу класу (као што је падајући мени) сваком елементу ли где желите стрелицу. Погледајте ту класу у горњем коду.
6. Подесите подлоге, позадину и друга својства. Мени би сада требало да ради, али још увек није баш леп. Својствима у ЦСС-у можете прилагодити како изгледа свака класа или елемент и где се налазе.

Савети

• Ако обрасцу желите да додате падајући мени, у ХТМЛ5 је то врло лако помоћу елемента селецт>.
• Веза а хреф = "#"> се помера до врха странице, а веза која упућује на непостојеће сидро, као што је хреф = "#!">, Се не помера. Ако вам се чини превише траљаво, можете променити изглед курсора помоћу ЦСС-а.
• Када копирате и налепите узорак кода, уклоните све тачке.