Komputiloj, Programaro
Kiel fari desplegable CSS menuoj
Hodiaŭ ni konsideros la demandon "Kiel mi kreas falmenuo CSS menuoj?". Ĝi devas diri tuj ke tiu ero estos farita sen konektanta ajna aldona financo. Tio estas, la menuo estos kreita nur kun CSS kaj HTML.
trejnado
Por plene kompreni kio estas en ĝi en la artikolo, vi devas iomete konatiĝi kun teoriaj materialo. Sed se vi estas familiara kun kvazaŭ-klasoj, vi povas salti tiu paragrafo. Do, por krei vertikala desplegable CSS menuoj, ni bezonas elementon kiel «: ŝvebado». La pseŭdo «: ŝvebado» povas esti asignita al iu ajn HTML etikedo. Ĝi permesas vin difini la momenton kiam elemento Ŝvebi vian muson. Ekzemple, ni alproprigis propraĵo: «al: ŝvebado {koloro: ruĝa;}». Navigacio signifas ke kiam vi ŝvebi la muson rezultas ruĝa sur la enhavo de ajna etikedo . Estas notinde, ke tiu kvazaŭ-elementon ankaŭ inaktivigita. Parenteze, «: ŝvebado» rakontis similaj elementoj. Sed el tio ni kreos pseŭdo CSS falmenuo.
instrukcioj
Unue, ni komprenas kion estas falmenuo. Sub tiu difino ricevas multajn malsamajn metodojn konstruado malsamaj layouts. En ĉi tiu kazo, ni analizos strukturo konsistas de pluraj konstante videblaj erojn kaj pluraj aldona (kaŝita). Ni finos kun la teorio kaj komenci praktiki.
- Ni kreas la aranĝon de nia menuo. Por fari tion, HTML-kodo etiquetado. Krei nestitaj listo:
-
- < / ul>. Eble tiel aspektu via falmenuo. CSS interveni poste. En ĉi tiu kazo la ĉefa listo konsistas el tri ĉefaj areoj kaj du enfermitan.
- Kaŝi la sub-menuo. Por tio ni uzas stilfolio, difini jenaj propraĵoj: ul ul {display: none;} Ĉi forigos la elementoj de la dua listo de la ekrano.
- Krei menuo CSS, faligi malsupren de la ĉefa listo. La akvofalo stilo littukojn skribi la sekvan regulon: ul span: ŝvebi ul {display: block;}. Navigacio signifas ke kiam la muso estas super la elementon span, kiu situas en ul listo aperas sur la ekrano ul (fiksita). Al unua vido, tia skemo ŝajnas komplika kaj konfuza. Sed fakte, ĉiu estas tre simpla.
- Uzu tiun aranĝon mem enigante la etikedoj
- via enhavo. Vi povas ŝanĝi la numeron de listo elementoj.
ornamaj ŝanĝoj
Tuj kiam la ĉefa menuo aranĝo estas preta, vi povas procedi al registriĝo. Probable, multaj en la unua loko pretas forigi signoj indikas la listeron. Ĉi tiu estas farita uzante sola proprieto CSS, nome la listo-stilo-tipo. Vi devas aldoni la sekvan eniron: li {listo-stilo-tipo: neniu;}. Tiam vi povas enmeti la kadro kaj fari la fono. La limo kaj fono helpi vin kun tio. Eble iuj ne ŝatas la tiro-malsupren menuo aperos kiel aldona listo, puŝante samtempe bazaj elementoj. Por solvi ĉi tion, vi povas loki ĝin. Por fari tion, akvofalo stilo littukojn skribi la sekvan eniron: ul ul {pozicio: absoluta; maldekstra: 15px; dekstra: 15px; supro: 15px; fundo: 15px;}. Kompreneble, la valoroj vi uzos vian propran. Depende kie vi volas vidi la desplegable menuoj CSS proponos pli da funkcioj kiuj povas aldoni diversajn efektojn kaj ornami niajn listojn.
konkludo
Fojo pli estas interese observi la konstruo de la menuo aranĝo. Atribui la CSS reguloj uzataj en ĉi tiu kazo enigita valoro, ekzemple, ul ul. Se vi estas en la dokumento por renkonti aliajn similajn strukturon, povas esti grandaj problemoj. En ĉi tiuj situacioj, vi devas uzi specifan celon, ekzemple, selectores aŭ id-IDs. La supra artikolo aranĝo falmenuo estas desegnita familiarizar la ĝenerala dezajno. La resto de la laboro ripozas sur la sxultroj.
Similar articles
Trending Now