Moeletsi oa mehato ka mehato
Ho sa tsotellehe hore na hau ea hau ea ho tsamaea ke mela e holimo holimo holimo kapa moleng o ka tlaase ho lehlakore, e ntse e le lethathamo feela. Ha ho etsoa marang-rang a marang-rang, hangata ho le bonolo ho lebala hore leeto la ho sesa ke sehlopha se tlotlisitsoeng sa li-link. Empa haeba o etsa kemiso ea hau ea ho tsamaea ka XHTML + CSS, u ka etsa menyetla e nyenyane ea ho e jarolla (XHTML) le e bonolo ho e etsa (CSS).
Rea qala
Ho qala ho theha lethathamo la ho tsamaea, u lokela ho sebelisa lethathamo.
E ka 'na ea e-ba lethathamo le tloaelehileng le sa tloaelehang le khethiloeng e le leeto:
Haeba u sheba haufi-ufi le HTML, u tla hlokomela hore link "Home" e na le boitsebiso ba ho se tsebe. Sena se tla u lumella hore u thehe menu e khethollang sebaka sa hona joale sa babali ba hao. Esita le haeba o sa rera ho ba le mofuta ona oa setšoantšo sa hau sebakeng sa hau hona joale, o ka kenyelletsa tlhahisoleseding eo. Haeba u etsa qeto ea ho eketsa tlhahiso ea morao hamorao, u tla ba le coding e tlaase ho lokisetsa sebaka sa hau.
Ntle le mokhoa leha e le ofe oa CSS , lenaneo lena la XHTML le shebahala lethathamo le sa tloaelehang. Ho na le li-bullets le lintho tse thathamisitsoeng lenaneng tse fokotsoang hanyenyane. Hobane ke sebelisa li- linkholder , li-browser tse ngata li ke ke tsa bontša li-link tse kang tse hlalositsoeng (tse totobetseng le tse putsoa). Haeba u kenya letsoho HTML kahare ho Websaete ea hau, ho tsamaea ha hau ho tla shebahala tjena:
- Lehae
- Lihlahisoa
- Litšebeletso
- Iteanye le rona
Sena se monate ebile ha se shebahala joaloka menu. Empa ka mekhoa e seng mekae ea CSS e kenyelletsitsoeng lenaneong, o ka etsa menu e etsang hore u ikhohomose.
Mokhoa oa Tsela oa Tsela
Ntho e bonolo ea ho tsamaisa thepa e bonolo ho ngola hobane e bontša ka tsela e tšoanang le lethathamo le tloaelehileng: ho ea holimo le ho theoha.
Lintho tse thathamisang lenane li bonts'a ka tlaase ho leqephe.
Ha ke e-na le menythe ea setaele, ke rata ho qala ka ntle le ho sebetsa ho eona. Ka sena, ke bolela hore ke qala mokhoa oa ho tsamaela ka lekhetlo la pele ebe ke fallela li li likarolo ebe ke li-link, joalo-joalo. pele u hlalosa hore na bophara ba menyetla ke bo bokae. Sena se tla etsa bonnete ba hore le haeba lintho tsa menu li le telele, li ke ke tsa sutumelletsa karolo eohle ea mohaho kapa tsa baka ho phalla ho hokae.
ho # navigation {width: 12em; }}
Hang ha ke e-na le bophara bo boholo, nka bapala le lintho tsa lethathamo. Sena se nolofalletsa ho beha lintho tse kang (ho tlosa li-bullets), mebala ea mokokotlo, meeli, ho lumellana ha mongolo le margins.
li # navigation # li {
mokhoa oa lethathamo: ha ho letho;
'mala oa mokokotlo: # 039;
moeli-top: o tiileng 1px # 039;
mongolo oa mongolo: ho le letšehali;
marge: 0;
}}
Hang ha u se u behile motheo oa lintlha tsa lethathamo u ka qala ho bapala le kamoo menu e shebahalang kateng sebakeng sa li-link. Tsela ea pele UL # navigation LI A ebe joale A: link, A: e etetse, A: hover, le A: mafolofolo (haeba u ba batla). Bakeng sa li-link, ke rata ho etsa hore li-link li be le ntho e itseng ea bohlokoa (ho fapana le ea ho qetela ka holimo). Sena se ba qobella hore ba nke sebaka sohle sa LI-'me ba etsa ho hongata joaloka serapa, e leng se etsang hore li nolofalloe ho ba li-buttons tsa menyetla. Ntho e 'ngoe eo ke e etsang hangata ke ho tlosa molaetsa o ka tlas'a moqhaka (mongolo oa litšoantšo: ha ho letho;), kaha sena se etsa hore likonopo li shebahale joaloka likonkete tse ngata ho 'na.
Empa ha e le hantle, moqapi oa hau o ka 'na oa fapana.
l #
hlahisa: thibela;
mongolo-mokhabiso: ha ho letho;
ho roala: .25em;
moeli-tlaase: o tiileng 1px # 39f;
moeli-ho le letona: o tiileng 1px # 39f;
}}
Hlokomela hore ka pontšo: thibela; beha mabaleng, lebokose le leng la ntho e hlahisang menyetla e hlakile, eseng feela mangolo. Sena se boetse se molemo bakeng sa ho sebetsa hantle. Etsa bonnete ba ho beha mebala ea li-link (link, ho etela, ho ea holimo le ho sebetsa) haeba u batla hore ba fapane le botala bo hlollang, bo bofubelu le bo pherese.
a: link, a: e etselitsoe {mmala: #fff; }}
a: hover, a: e sebetsang {mmala: # 000; }}
Ke boetse ke rata ho fana ka tlhokomelo e eketsehileng haholoanyane ka ho fetola mobala oa mokokotlo.
a: hover {mobala o ka morao: #fff; }}
Haeba u ka rata mehlala e meng ea menus e tobileng, sheba lenane le ka tlase mona.
- Menu ea Vertical Styled
- Setšoantšo sa Basic Basic Vertical
- Mokhoa oa Vertical Styled With You Are Here
- Setšoantšo sa Basic Basic Vertical le uena se teng
Mokhoa o holimo oa Navigation
Ho theha menyetla ea ho tsamaea e holimo ho thata haholo ho feta ho tsamaea ka maoto meleng hobane u tlameha ho fokotsa 'nete ea hore marang-rang a HTML a khetha ho bonts'a. Joaloka le menu e holimo, qala ka ho etsa leeto la hau la ho tsamaea lethathamong la hau:
Ho theha menu e holimo, etsa se tšoanang le seo u se entseng ka menu e tobileng. Qala ka ka ntle le ho sebetsa. Kaha ke batla ho tsamaea ha ka ka lehlakoreng le letšehali, ke le beha ka lehlakoreng le letšehali le la padding, 'me ke le futhumatsa ka ho le letšehali. U lokela ho ba le tloaelo ea ho beha bophara e le hore menyetla ea hau e se ke ea nka sebaka se seng kae ho feta seo u se rerileng. Bakeng sa meno a holimo, hangata sena ke bophara bo feletseng ba moqapi. Ke boetse ke kentse 'mala oa mokokotlo ho lenane lohle ho etsa hore ho be bonolo ho bala.
ho # navigation {
float: ho le letšehali;
marge: 0;
ho robala: 0;
bophara: 100%;
'mala oa mokokotlo: # 039;
}}
Empa sephiri sa menyetla e tsamaeang ea ho tsamaea ka bongata ke lethathamong la lintho. Lintho tse thathamisang hangata li thibela likarolo, tse bolelang hore li tla ba le lineline tse behiloeng pele le ka morao ka seng. Ka ho fetola ponts'oa ho tloha ho thibela ho ea ka moeli, o qobella lintlha tsa marang-rang hore li tsamaee haufi le tse ling.
ho # tsamaiso ea hau {ho bonts'a: inline; }}
Ke ile ka tšoara li-link ka tsela e tšoanang hantle le eo ke ileng ka ba tšoara ka eona ho menu ea maoto, ka mebala e tšoanang le ho khabisa melaetsa. Ke kentse moeli o ka holimo ho hlahisa likonopo ha li se li le holimo. Ntho feela eo ke e tlositseng e ne e le pontšo: thibela; kaha seo se tla kenya lenaneo la newline le ho senya menu e holimo.
l #
mongolo-mokhabiso: ha ho letho;
ho robala: .25em 1em;
moeli-tlaase: o tiileng 1px # 39f;
moeli-holimo: o tiileng 1px # 39f;
moeli-ho le letona: o tiileng 1px # 39f;
}}
a: link, a: e etselitsoe {mmala: #fff; }}
ho ea ho le ho: hover {
mobala oa mokokotlo: #fff;
'mala: # 000;
}}
U na le Boitsebiso ba libakeng
Karolo e 'ngoe ea HTML ke identifi ea hau. Haeba o batla ho fetola menyetla ea hau ho bontša sebaka sa hau sa basebelisi ba hau, sebelisa feela ID ena ho hlalosa mobala o fapaneng oa moelelo kapa mokhoa o mong. Hlahisa tšobotsi eo ea boitsebiso boemong bo nepahetseng ba menyetla maqepheng a mang e le hore leqephe la kajeno le totobatsoe.
ho # tsamaiso ea # ho amoheleha {mobala o ka morao: # 09f; }}
Haeba u beha mekhoa ena hammoho leqepheng la hau, u ka etsa mohala o holimo kapa o totobetseng oa menu o sebetsang le sebaka sa hau empa o potlakela ho o jarolla mme o bonolo haholo ho o ntlafatsa nakong e tlang. Ho sebelisa XHTML + CSS ho fetisa lintlha tsa hau hore e be sesebelisoa se matla haholo bakeng sa ho qaptjoa.
Haeba u ka rata mehlala e meng ea meno a holimo, sheba lintlha tse latelang.
- Menu e ts'oareng e holimo
- Setšoantšo sa Basic Basic Horizontal
- Menu e ts'oatsitsoeng e holileng le uena e teng
- Setšoantšo sa Basic Basic Horizontal le U Teng