Vertikala menuo por la retejo en la formo de akordiono kun jQuery

La menuo, kiel vi scias - estas integra parto de la retejo. Interesaj navigi enreta rimedo povas intereso vizitantoj. Krome, grava propraĵo de ajna menuo - ĝia kompakteco. Simpla vertikala menuo facile kreita uzante HTML kaj CSS. Sed ni iru plu, Ni lernas krei menu- "akordiono" kun la helpo de jQuery.

Krei menu- "akordiono"

Kio estas vertikala menuo en la formo de akordiono? Jen fallisto, kiu kreas facile navigi kaj donas eleganta ejo. Menuo, farita tiamaniere, ebligas al vi turni multajn sub-artikolojn. Aliro al ili okazas kiam vi klakas la muson sur la deziratan objekton. Iu povas diri, ke eblas fari simplan menuon tiamaniere sen la uzo de jQuery. Jes, estas. Sed ĉi objekto ne estus tre utila al posedantoj de smartphones aŭ tablets. Ni kreos vertikala menuo, vokante al ĉiuj. Tiam, ŝanĝante la koloro stiligante navigacio, eblos agordi la dezajno al ajna retejo.

HTML kodo

Do, por krei nian vertikala menuo, vi devas unue marki la HTML-kodo, kiu enhavos la sekvajn liniojn:

Konservu tiun kodon en dosiero nomata Accord_menu.html.

Kiel vi povas vidi, ni kreis neordigitan liston. Ĝi konsistas el 3 ĉefaj punktoj:

- fotoj;

- filmoj;

- libroj.

Ĉiu elemento havas kelkajn alineojn. De kie #, vi bezonos aldoni ligojn. Nun ĝi estas grava por priskribi la stilon. Tute dependas de la aspekton de via Interreta rimedo. Vertikala menuo por la retejo devas integri harmonie en ĝian dezajnon.

CSS-kodon

Kun stiloj vi ne devus esti malfacila. Ni notas nur, ke en ĉi tiu ekzemplo uzas gradienton ĝissate. Jen la CSS-kodo:

koloro estas precizigita en la CSS-dosiero, grandeco markiloj estas eltiritaj de la artikoloj en la listo maldekstre. Ĝi difinita kiel konduti en ĉiu ero kaj sub-menuon kiam vi ŝvebi super ĝi. Ekzemple:

# E1fee2 - ĉi pala verda koloro sub.

# C4f0f7 -golubovaty ombro sub kiam vi ŝvebi super ili.

Montru proprieto demandas bloko valoro agordi la necesan kompletigon kaj grandeco. La koloro, grandeco, tiparo tipo, la loko - ĉio estas kiel priskribi en la CSS-dosiero. Nomu ĝin, ekzemple, accordionmenu_my1.css.

Konektado jQuery menuo plibonigoj

Kiel vi eble memoras, nia celo - por krei vertikala menuo jQuery. Se vi ne estas familiara kun ĉi tiu teknologio, ne maltrankviliĝu. Ni uzas la Google-deponejo kaj konekti jQuery skripton. Tio ĉi faras ĝin pli alloga menuo. jQuery estas JavaScript biblioteko bazita en la interago de Hipertextual Markup HTML kaj JavaScript. jQuery permesas vin aliri la enhavon kaj atributoj de elementoj.

Do, konekti la necesan skripton en la korpo de HTML-dosiero kaj starigis la regulojn por stokado de 2 variabloj, krom ĉevalvetkuro elementoj. Kontribui kodon, fermante aliaj pestañas en la malfermo de tiu, sur kiu estas musklako. Jen kiel ĝi aspektas:

Konservu ĉiujn ŝanĝojn, vidi kiel ĝi aspektas en la retumilo menuo. Tio estas komuna rezulto de: Rezulte, oni venis allogan menuo ke vi povas ĉiam ŝanĝi, depende preferojn. Kaj akirante novaj konoj en la kampo de jQuery, CSS, vi kreos la solaj elementoj de la ejo, plibonigi iliajn kapabloj.