Kompjuters, Softwer
Kif tagħmel drop down menus CSS
Illum se tikkunsidra l-kwistjoni ta ' "Kif nista jinħoloq drop down menus CSS?". Hija għandha tgħid mill-ewwel li din il-partita se jsiru mingħajr konnessjoni kwalunkwe fondi addizzjonali. Jiġifieri, il-menu ser ikunu maħluqa biss bl CSS u HTML.
taħriġ
Biex jifhmu bis-sħiħ dak li huwa fiha fil-artikolu, inti għandek bżonn ftit li jiffamiljarizzaw ma 'materjal teoretika. Imma jekk inti familjari mal psewdo-klassijiet, inti tista 'skip dan il-paragrafu. Allura, biex toħloq drop-down CSS menus vertikali, għandna bżonn element bħala ": imbagħad jerġgħu". Il psewdo ": imbagħad jerġgħu" jista 'jiġi assenjat lil xi tag HTML. Huwa jippermettilek li jiddefinixxu l-mument meta oġġett Hover maws. Per eżempju, aħna ħatru proprjetà: «a: imbagħad jerġgħu {kulur: aħmar;}". Din l-entrata ifisser li meta inti imbagħad jerġgħu l -maws issir ħamra fuq il-kontenut ta 'kull tikketta. Ta 'min jinnota li dan psewdo-element huwa wkoll inattivati. Mill-mod, ": imbagħad jerġgħu» ikun sar elementi simili. Iżda minn dan aħna se toħloq CSS psewdo-drop-down menu.
istruzzjoni
L-ewwel, ejja jifhmu x'inhu drop-down menu. Taħt din id-definizzjoni gets ħafna ta 'metodi differenti qed tibni taqsim differenti. F'dan il-każ, aħna se janalizza struttura li fiha diversi oġġetti viżibbli kontinwament u diversi addizzjonali (moħbija). Ejja finitura mal-teorija u jibdew prattika.
- Aħna joħolqu l-format ta 'menu tagħna. Biex tagħmel dan, l-ittikkettjar HTML code. Oħloq lista nested:
-
- < / ul>. Xi ħaġa bħal din għandu look like drop-down tiegħek menu. CSS għall issir aktar tard. F'dan il-każ il-lista prinċipali jikkonsisti fi tliet oqsma prinċipali u tnejn magħluqa.
- Aħbi l-sub-menu. Għal dan nużaw stylesheet, tiddefinixxi l-proprjetajiet li ġejjin: ul ul {display: xejn;} Dan se tneħħi l-elementi tat-tieni lista mill-iskrin.
- Oħloq CSS menu, drop down mil-lista prinċipali. Il-folji stil cascading jikteb-regola li ġejja: LI ul: imbagħad jerġgħu ul {display: block;}. Din l-entrata ifisser li meta l-maws huwa fuq-li-element, li tinsab fil-lista ul tidher fuq l-ul-iskrin (mehmuża). Ewwel daqqa t'għajn, tali skema jistgħu jidhru ikkumplikat u konfuża. Imma fil-fatt, kollox huwa sempliċi ħafna.
- Uża dan id-disinn lilek innifsek billi ddaħħal l-tags
- kontenut tiegħek. Tista 'tbiddel l-għadd ta' elementi lista.
bidliet dekorattivi
Hekk kif il-menu tqassim prinċipali hija lesta, inti tista 'tipproċedi għar-reġistrazzjoni. Probabbilment, ħafna fl-ewwel post lesti biex jeħles mill markaturi li jindikaw l-oġġett lista. Dan isir permezz ta 'CSS proprjetà waħda, jiġifieri l-lista stil tat-tip. Ikollok bżonn li jiżdiedu l-entrata li ġejja: Li {lista stil tat-tip: xejn;}. Imbagħad inti tista 'daħħal il-frejm u jagħmlu l-isfond. Il-fruntiera u l-isfond jgħinuk ma 'dan. Forsi xi mhux se bħall-pull-down menu se jidhru bħala lista addizzjonali, imbuttar fl-istess elementi bażiċi. Biex tissolva din, inti tista 'pożizzjoni dan. Biex tagħmel dan, folji stil cascading jiktbu l-annotazzjoni li ġejja: ul ul {pożizzjoni: assolut; xellug: 15px; dritt: 15px; quċċata: 15px; qiegħ: 15px;}. Naturalment, il-valuri li ser tuża tiegħek stess. Jiddependi fuq fejn inti tixtieq li tara l-drop-down menus, CSS se joffru ħafna aktar karatteristiċi li jistgħu jżidu l-effetti varji u dekorazzjoni listi tagħna.
konklużjoni
Għal darb'oħra min jinnota l-kostruzzjoni tat-tqassim menu. Biex tassenja r-regoli CSS użati f'dan il-każ integrati valur, per eżempju, ul ul. Jekk inti fid-dokument li jissodisfaw struttura simili oħra, jista 'jkun hemm problemi kbar. F'dawn is-sitwazzjonijiet, inti għandek bżonn tuża skop speċifiku, per eżempju, seletturi jew id-IDs. L-artikolu tqassim drop-down menu hawn fuq hija mfassla biex jiffamiljarizzaw id-disinn ġenerali. Il-bqija tal-ħidma tistrieħ fuq spallejn tiegħek.
Similar articles
Trending Now