Inaro akojọ fun awọn ojula ni awọn fọọmu ti ẹya accordion pẹlu Ìbòmọlẹ

Awọn akojọ, bi o mọ - ohun je ara ti awọn ojula. Awon Lilö kiri online awọn oluşewadi ni anfani lati anfani alejo. Ni afikun, ohun pataki ohun ini ti eyikeyi akojọ - awọn oniwe-compactness. A o rọrun inaro akojọ awọn iṣọrọ da lilo HTML ati CSS. Sugbon a lọ siwaju si: ki a kọ lati ṣẹda menu- "accordion" pẹlu iranlọwọ ti awọn Ìbòmọlẹ.

Ṣẹda a menu- "accordion"

Ohun ni kan ni inaro akojọ ni awọn fọọmu ti ẹya accordion? Eleyi jẹ a jabọ-silẹ akojọ, eyi ti o ṣẹda ohun rọrun lati lilö kiri ati ki o yoo kan ara ojula. Akojọ, ošišẹ ti ni ọna yi, faye gba o lati tan a pupo ti iha-awọn ohun kan. Access si wọn waye nigbati o ba tẹ awọn Asin lori awọn ti o fẹ ohun kan. Ẹnikan le so wipe o ti ṣee ṣe lati ṣe kan awọn akojọ ni yi njagun lai awọn lilo ti Ìbòmọlẹ. Bẹẹni, o jẹ. Ṣugbọn yi ohun yoo ko ni le gidigidi wulo lati onihun ti fonutologbolori tabi awọn tabulẹti. Jẹ ki ká ṣẹda a inaro akojọ, bojumu to gbogbo. Nigbana ni, yiyipada awọn awọ iselona a lilọ, o yoo jẹ ṣee ṣe lati ṣatunṣe awọn oniru si eyikeyi ojula.

HTML koodu

Nítorí náà, lati ṣẹda wa inaro akojọ, o gbọdọ akọkọ kiakia awọn HTML-koodu, eyi ti yoo ni awọn wọnyi ila:

Fi yi koodu ni a file ti a npe ni Accord_menu.html.

Bi o ti le ri, a ti da ohun unordered akojọ. O oriširiši 3 akọkọ ojuami:

- awọn fọto;

- fiimu;

- iwe ohun.

Kọọkan ohun kan ni kan diẹ ìpínrọ. Nibo ni #, iwọ yoo nilo lati fi ìjápọ. Bayi o jẹ pataki lati se apejuwe awọn ara. O da lori gbogbo awọn ti wo rẹ Internet awọn oluşewadi. Inaro akojọ fun awọn ojula gbọdọ ṣepọ harmoniously sinu awọn oniwe-oniru.

CSS-koodu

Pẹlu aza ti o yẹ ki o ko ni le soro. A akiyesi nikan ti ni yi apẹẹrẹ nlo a igbasoke si yó. Eyi ni awọn CSS-koodu:

awọ ti wa ni pato ninu awọn CSS-faili, iwọn asami wa ni kuro lati awọn ohun kan ninu awọn akojọ lori osi. O pinnu bi o lati huwa ni kọọkan ohun kan ati ki o iha-akojọ nigba ti o ba rababa lori o. Fun apẹẹrẹ:

# E1fee2 - yi bia alawọ ewe awọ iha.

# C4f0f7 -golubovaty iboji iha nigba ti o ba rababa lori wọn.

Àpapọ ini beere Àkọsílẹ iye lati ṣatunṣe awọn pataki òwú ati iwọn. Awọn awọ, iwọn, font Iru, awọn ipo - ohun gbogbo ti wa ni bi apejuwe ninu awọn CSS faili. Pe o, fun apẹẹrẹ, accordionmenu_my1.css.

Pọ Ìbòmọlẹ akojọ awọn ilọsiwaju

Bi o ti le ÌRÁNTÍ, wa ìlépa - lati ṣẹda kan inaro akojọ Ìbòmọlẹ. Ti o ba wa ko ba faramọ pẹlu yi ọna ẹrọ, ma ṣe dààmú. A lo Google ibi ipamọ ki o si so Ìbòmọlẹ akosile. Eleyi yoo ṣe awọn ti o siwaju sii wuni akojọ. Ìbòmọlẹ ni a JavaScript ìkàwé da lori awọn ibaraenisepo ti Hypertext díjítà HTML ati JavaScript. Ìbòmọlẹ faye gba o lati wọle si awọn akoonu ati eroja ti eroja.

Nítorí náà, so awọn pataki akosile ninu awọn ara ti HTML-faili ki o si ṣeto awọn ofin fun ibi ipamọ ti awọn 2 oniyipada, ayafi fun ẹṣin-ije eroja. Tiwon koodu, miiran ti miiran awọn taabu ni awọn šiši ti awọn ọkan lori eyi ti o wa ni a Asin lẹmeji. Eyi ni bi o ti wulẹ:

Fi gbogbo awọn ayipada, wo ohun ti o wulẹ bi ni awọn kiri akojọ. Ti o ni a wọpọ abajade ti: Bi awọn kan abajade, a ti wá ohun wuni akojọ ti o le nigbagbogbo yi, ti o da lori wọn lọrun. Ati ki o ra titun imo ni awọn aaye ti Ìbòmọlẹ, CSS, o yoo ṣẹda awọn oto eroja ti ojula, imudarasi wọn ogbon.