Mee a kwụ menu maka saịtị onwe gị

Kwụ menu nwere fọrọ nke nta ka ọ bụla saịtị - ọ bụ akụkụ dị mkpa, dị ka ọ nwere ike na-ọdịdị ya na usability na-adọta ma ọ bụ, ọzọ, mmenyenjo efep ọbịa. Ka anyị na-amụta otú ike elementrị kwụ menu:-eme ka ọ "ọkpụkpụ" ka HTML, ka nna nkiti nkà nke na-eke. Ị nwere ike na-chọta a njikere menu, ma ọtụtụ nicer ịmụta otú ịzụlite ya onwe gị. Ọ bụ ezigbo fun.

Na-amụta ime menu

Anyị na-agbalị ghara arapu semantics, nke rube isi na-eduga na ọnụ ọgụgụ nke layout. Mbụ i nwere iji mee ka a "ọkpụkpụ" n'ihi na anyị na menus na HTML, na-amụta nkiti nkà mee ha kwụ menus. Na mgbe ahụ, ọ ga-icho mma, iji style Ibé akwụkwọ. Ka anyị kwụ menu nwere 5 ihe. The mbụ item ga-ibugharị na homepage. Nke abụọ mgbe - "Ihe anyị". The atọ - "Anyị enọ". Fourth - "Ọ bụ fun." Nke ise - "Kpọtụrụ anyị".

HTML-koodu anya dị ka nke a:

Onye amaghị: ul mkpado na-eji maka mgbo, ya ọcha na-amalite na li. Li tags eketa ekwekọghị na-etinyere na ul.

Ul - ngọngọ mmewere nke ndepụta, ọ ga-agbatị na obosara. Li bụkwa a ngọngọ.

Ya mere, ike a index.html. Anyị na-anakọta anyị koodu. N'oge a, nchọgharị na-egosiputa a vetikal kama a kwụ menu. Ma, anyị na gị ihe mgbaru ọsọ - eme ka a kwụ menu maka saịtị. N'ihi nke a anyị mkpa CSS.

Gịnị bụ CSS?

Ọ bụrụ na ị nwere ma nna mmepe nke saịtị, ọ dị mkpa iji matakwuo na echiche nke Cascading Style Ibé akwụkwọ. N'ezie, ndị a bụ iwu maka formatting, nhazi, nke na-etinyere iche iche ọcha na peeji nke a web-na saịtị. Ọ bụrụ na anyị na-akọwa Njirimara nke ọcha na ọkọlọtọ HTML, ị ga-ikwugharị a ọtụtụ ugboro, ị ga-esi a mbiputegharị nke otu iberibe koodu. page ibu oge na onye ọrụ kọmputa ga-eto. Iji zere nke a, e nwere a CSS. Ọ suffices akọwa naanị otu ugboro a na-mmewere, na mgbe nanị na-egosi ebe iji Njirimara nke a akpan akpan style. Ọ bụ omume na-eme ka nkọwa nke ọ bụghị nanị na ihe odide nke page onwe ya, kamakwa ọzọ faịlụ. Nke a ga-ekwe ka itinye nkọwa nke ụdị dị iche iche na niile peeji nke saịtị. Ọ bụkwa adaba gbanwee ụfọdụ peeji nke, modifying CSS-file. Style Ibé akwụkwọ ekwe ka ị na-arụ ọrụ na Akara ókwú na a mma larịị karịa HTML, na-enyere iji zere na-akawanye njọ na-ndịna-emeputa peeji nke saịtị.

Iji Style Ibé akwụkwọ maka menu development

CSS-koodu maka menu:

1. # My_1menu {ndepụta-style: adi; padding: 6; obosara: 800px; oke: akpaaka;}
2. # My_1menu li {n'elu mmiri: fọduru; font: Italic 18px Arial;}
3. # My_1menu a {agba: # 756; ngosi: ngọngọ; elu: 55px; akara-elu: 55px; padding: 0px 15px 0px 15px; ndabere: #dfc; ederede-mma: onye ọ bụla;}
4. # My_1menu a: Hover {agba: #foa; ndabere: # 788;}

Ugbu a, ka anya na n'ihi kwụ CSS menu.

# My_1menu - ya mere ọ style ọrụ maka UL- mmewere na id = my_1menu, ndepụta-style: ọ dịghị onye - iwu a iji wepụ akara ekpe site ndokwa ihe.

obosara: 800px - obosara nke anyị menu bụ 800 pikselụ.

padding: 0 - a ewepu padding n'ime.

oke: akpaaka - vyravnivnie kwụ menu na etiti nke anyị na peeji nke.

# My_1menu li - ekenye ekwekọghị li-ọcha.

elu: 55px - menu elu.

# My_1menu a: Hover - ekenye ekwekọghị na mmewere na mgbe ọ na-akpata òké.

Anyị agaghị na-akọwa n'ụzọ zuru ezu na ọ bụla akara, dị ka ọ bụla Mmepụta nwere ike dee ya kwa ebe a. Nke a ndabere maka ojiji nke ekwekọghị na menu na website. Ị nwere ike inye ya a ọzọ okokụre na ndị mara mma ile anya, iji foto. Kenye mmewere ma, n'ihi na ihe atụ, ndabere: url (img1.png) ikwugharị-x. Ka ihe ndabere: url (img2.png) ikwugharị-x maka a: Hover.

Jiri gị pụrụ ichetụ n'echiche, ihe mmasị. Mgbe ahụ dabeere na ihe ọmụma na otú ike a dị mfe menu na website, ị pụrụ ịzụlite a page na ya pụrụ iche a haziri.