Menu nangtung pikeun situs dina bentuk hiji akordion kalawan jQuery

Menu, anjeun nyaho - bagian integral loka. Metot sumberdaya online Napigasi téh bisa datang dipikaresep. Sajaba ti éta, hiji sipat penting menu naon - compactness na. A menu nangtung basajan gampang dijieun maké HTML jeung CSS. Tapi urang buka salajengna: Marilah urang diajar nyieun menu- "akordion" kalayan bantuan jQuery.

Jieun menu- "akordion"

Naon téh menu nangtung dina bentuk hiji akordion? Ieu daptar turun-handap, anu nyiptakeun hiji gampang pikeun nganapigasi tur mere situs stylish. Menu, dipigawé ku cara ieu, ngidinan Anjeun pikeun ngaktipkeun loba sub-barang. Aksés ka aranjeunna lumangsung nalika anjeun klik beurit dina item nu dipikahoyong. Batur bisa disebutkeun yen kasebut nyaéta dimungkinkeun pikeun ngadamel menu basajan dina fashion ieu tanpa pamakéan jQuery. Sumuhun, éta. Tapi tujuanna teu bakal jadi pohara kapaké pikeun boga smartphone atawa tablet. Hayu urang nyieun hiji menu nangtung, pikaresepeun ka sadaya. Lajeng, ngarobah warna styling navigasi hiji, éta bakal mungkin pikeun ngaluyukeun rarancang keur situs nanaon.

kode HTML

Ku kituna, mun nyieun menu nangtung urang, nu kahiji kudu dipencét nu HTML-kode, anu baris ngandung garis handap:

Simpen kode ieu dina file disebut Accord_menu.html.

Sakumaha anjeun tiasa tingali, urang geus nyieun hiji daptar unordered. Ieu ngawengku 3 titik utama:

- poto;

- film;

- buku.

Unggal item boga sababaraha paragraf. Dimana #, anjeun bakal kedah nambahkeun tumbu. Ayeuna hal anu penting pikeun ngajelaskeun gaya. Eta sadayana gumantung kana tampilan sumberdaya Internet Anjeun. menu nangtung pikeun situs kudu ngahijikeun harmoniously kana desain na.

CSS-kode

Kalawan gaya anjeun teu kedah hésé. Urang catetan wungkul nu di conto ieu ngagunakeun gradién eusian. Di handap ieu CSS-kode:

Warna ieu dieusian dina CSS-file, spidol ukuranana téh dikaluarkeun tina item dina daptar di kénca. Ieu ditangtukeun kumaha kalakuanana di unggal item sarta sub-menu mun anjeun hover leuwih eta. Contona:

# E1fee2 - kieu warna héjo bulak sub.

# C4f0f7 -golubovaty sahadé sub mun anjeun hover leuwih aranjeunna.

sipat tampilan menta nilai block pikeun nyaluyukeun padding tur ukuranana perlu. Warna, ukuranana, jenis font, lokasi - sagalana geus jadi ngajelaskeun dina file CSS. Sebut wae, contona, accordionmenu_my1.css.

Nyambungkeun menu perbaikan jQuery

Salaku mungkin anjeun ngelingan, gawang kami - nyieun menu jQuery nangtung. Mun anjeun teu wawuh jeung téhnologi ieu, ulah salempang. Kami nganggo Repository Google tur sambungkeun Aksara JQuery. Ieu bakal nyieun menu leuwih pikaresepeun. jQuery mangrupakeun perpustakaan JavaScript dumasar interaksi Hypertext Aksara HTML jeung JavaScript. jQuery ngidinan Anjeun pikeun ngakses eusi na atribut unsur.

Ku kituna, nyambungkeun Aksara diperlukeun dina awak HTML-file tur nyetel aturan pikeun neundeun 2 variabel, iwal elemen balap kuda. Nyumbangkeun kode, nutup tab sejenna dina bubuka hiji on nu aya nyaéta klik mouse. Di dieu nu kumaha eta Sigana:

Simpen sadaya parobahan, tingali naon eta Sigana mah di menu browser. Anu mangrupakeun hasil ilahar: Hasilna, urang geus datangna hiji menu pikaresepeun nu salawasna bisa ngarobah, gumantung kana préferénsina. Sarta acquiring knowledge anyar dina widang jQuery, CSS, anjeun bakal nyieun unsur unik loka éta, ngaronjatkeun kaahlian maranéhna.