Како направити падајући менији ЦСС

Данас ћемо размотрити питање "Како да направим падајући ЦСС менија?". Треба да стоји одмах да ће ова ставка бити без повезивања додатних средстава. То је, мени ће бити креиран само са ЦСС и ХТМЛ.

обука

Да би у потпуности разумели шта је у њему у чланку, морате мало да се упознају са теоријским материјалом. Али, ако сте упознати са псеудо-класе, можете да прескочите овај пасус. Дакле, да се створи вертикални падајућег менија ЦСС, потребно нам је елемент као «: наведите». Псеудо «: наведите» може бити додељен било који ХТМЛ таг. То вам омогућава да дефинишете тренутак када је ставка ховер миша. На пример, ми смо именовани имовину: «А: ховер {цолор: црвена;}». Овај унос значи да када летите мишем да поцрвени о садржају било које ознаке <а>. Важно је напоменути да је овај псеудо елемент и инактивира. Узгред, «: наведите» је у вези сличне елементе. Али, од тога ћемо створити падајући мени псеудо-ЦСС.

упутство

Прво, да се разумемо шта је падајући мени. Према овој дефиницији добија много различитих метода конструисања различитих распореда. У овом случају, ћемо анализирати структуру која се састоји од неколико стално видљивих предмета и неколико додатних (скривено). Хајде да завршимо са теоријом и почну да вежбају.

• Ми стварамо изглед нашег менија. Да бисте то урадили, ХТМЛ код етикетирања. Критике угњеждену листу: <ул> <ли> <п> <ул> <ли> <п> <п> < / ул>. Нешто овако треба да изгледа као твој падајућег менија. ЦСС-а за касније интервенише. У том случају главни листа се састоји од три главне области и два затвореним.
• Сакрити под-мени. За ово користимо стила дефинишите следећа својства: ул ул {дисплаи: ноне;} Ово ће уклонити све елементе друге листе од екрана.
• Критике менија ЦСС, спустите се из главне листе. Тхе Цасцадинг Стиле Схеетс напише следеће правило: ул ли: ховер ул {флоат: лефт;}. Овај унос значи да када је миш изнад елемент Ли, који се налази у ул листи појављује на екрану ул (у прилогу). На први поглед, таква шема може да изгледа компликовано и збуњујуће. Али, у ствари, све је врло једноставно.
• Користите ову распоред сами убацивањем ознаке <ли> садржај. Можете променити број елемената из листе.

декоративне измене

Чим изгледа главног менија је спремна, можете наставити са регистрацијом. Вероватно, многи на првом месту спреман да се ослободи од маркера који указују на нову ставку. Ово се ради помоћу једног ЦСС имовине, а то је лист-стиле-типе. Потребно је да додате следећу ставку: ли {бордер-стиле-типе: ноне}. Онда можете да убаците оквир и направи позадину. Граница и позадина ти помогнем. Можда неки се неће допасти падајући мени ће се појавити као додатни листи, гура на истим основним елементима. Да бисте то решили, можете га поставити. Да бисте то урадили, Цасцадинг Стиле Схеетс напише следеће ставке: ул ул {поситион: абсолуте; лево: 15пк; десно: 15пк; Топ: 15пк; боттом: 15пк;}. Наравно, вредности које ће користити свој. У зависности од тога где желите да видите падајуће меније, цсс ће понудити много више функција које могу додати различите ефекте и украшава наше листе.

закључак

Још једном је напоменути изградњу менија. Да бисте доделили правила ЦСС који се користе у овом случају уграђен вредности, на пример, ул ул. Ако сте у документу да задовољи друге сличне структуре, може бити великих проблема. У оваквим ситуацијама, треба да користите одређену сврху, на пример, селектора или ИД-ИД. Наведени мени чланак распоред падајући је дизајниран да упозна општи дизајн. Остатак рада почива на раменима.