Ուղղահայաց մենյու համար կայքում ձեւով ակորդեոն հետ jQuery

Ճաշացանկը, քանի որ դուք գիտեք, - անբաժանելի մասն է կայքում. Հետաքրքիր է Նավարկում առցանց ռեսուրսը կարող է տոկոսադրույքների այցելուներին: Բացի այդ, կարեւոր սեփականությունը ցանկացած մենյուն - իր compactness. Մի պարզ ուղղահայաց մենյու հեշտությամբ ստեղծել, օգտագործելով HTML եւ CSS. Բայց մենք ավելի հեռուն են գնում: Եկեք սովորենք ստեղծել menu- «ակորդեոն» օգնությամբ jQuery.

Ստեղծել մի menu- «ակորդեոն"

Թե ինչ է ուղղահայաց ընտրացանկը ձեւով ակորդեոն: Սա մի կաթիլ - ներքեւ ցուցակը, որը ստեղծում է հեշտ է նավարկելու եւ հնարավորություն է տալիս նորաձեւ կայքը: Մենյու, կատարվում է այդ կերպ, թույլ է տալիս Ձեզ դիմել մի շատ ենթահաշիվների իրեր: Մատչելիությունը նրանց տեղի է ունենում այն ժամանակ, երբ դուք սեղմեք մկնիկը է ցանկալի կետի. Ինչ-որ մեկը կարող է ասել, որ դա հնարավոր է անել մի պարզ մենյուն այս նորաձեւության առանց օգտագործման jQuery. Այո, դա այդպես է: Բայց սա օբյեկտը չէր լինի, շատ օգտակար է սեփականատերերի սմարթֆոնների կամ հաբեր: Եկեք ստեղծենք մի ուղղահայաց մենյուն, կոչ է բոլորի համար: Ապա, փոխելով գույնը styling նավիգացիան, դա հնարավոր կլինի հարմարեցնել դիզայնի ցանկացած վայրում.

HTML կոդը

Այնպես որ, պետք է ստեղծել մեր ուղղահայաց մենյուն, դուք պետք է առաջին հերթին հավաքեք HTML կոդ, որը պարունակում է հետեւյալ տողերը.

Պահպանել այս կոդը ֆայլի կոչվող Accord_menu.html:

Ինչպես դուք կարող եք տեսնել, մենք ստեղծել ենք մի Չհամարակալված ցուցակ. Այն բաղկացած է 3 հիմնական կետերից:

- լուսանկարներ;

- Ֆիլմեր;

- գրքեր.

Յուրաքանչյուր տարրը ունի մի քանի պարբերությունները: Որտեղ են #, դուք պետք է ավելացնել հղումներ. Այժմ դա կարեւոր է նկարագրել ոճը: Այն ամենը կախված է տեսքը ձեր Ինտերնետ ռեսուրսի. Ուղղահայաց մենյու համար կայքը պետք ինտեգրելու ներդաշնակորեն իր դիզայնով:

CSS կոդի

Հետ ոճերի դուք չպետք է դժվար լինի: Մենք նշում ենք, միայն, որ այս օրինակում օգտագործում է գրադիենտ լրացնել: Այստեղ է, որ CSS կոդ:

գույնը նշված է CSS ֆայլ, չափի Մարկերներ, որոնք հանվել են ապրանքների ցանկում վրա ձախ կողմում. Այն որոշվում, թե ինչպես պետք է վարվել յուրաքանչյուր միավորի եւ ենթաօրենսդրական մենյուն, երբ դուք անցեք դրան: Օրինակ `

# E1fee2 - այս գունատ կանաչ գույնի ենթակետի:

# C4f0f7 -golubovaty կիսամութ ենթակետի, երբ դուք անցեք նրանց:

Ցուցադրում գույքը խնդրեք թաղամաս արժեք է հարմարեցնել անհրաժեշտ լիցք եւ չափը. The գույնը, չափը, տառատեսակը տեսակը, գտնվելու վայրը, - ամեն ինչ, ինչպես նկարագրել է CSS ֆայլը. Այն անվանում, օրինակ, accordionmenu_my1.css.

Connecting jQuery ցանկի բարելավումներ

Քանի որ դուք կարող եք հիշել, մեր նպատակն է, ստեղծել է ուղղահայաց մենյու jQuery. Եթե դուք չեք ծանոթ այս տեխնոլոգիան, մի անհանգստացեք. Մենք օգտագործում ենք Google բազայի եւ միացնել JQuery script. Սա կլինի այն դարձնել ավելի գրավիչ մենյու: jQuery է Javascript- ին գրադարան հիման վրա փոխգործակցության Հիպերտեքստի նշարկման HTML եւ JavaScript: jQuery թույլ է տալիս Ձեզ մուտք գործել բովանդակությունը եւ ատրիբուտներ տարրերի.

Այնպես որ, միացնել անհրաժեշտ սցենար է մարմնի HTML ֆայլ եւ սահմանել այն կանոնները պահեստավորման 2 փոփոխականների, բացառությամբ ձին racing մասին տարրերի. Նպաստել կոդը, փակելով այլ էջանիշերն բացման ժամանակ մեկի վրա, որտեղ կա մի մուկ համար սեղմեք. Ահա թե ինչպես է նայում:

Պահպանել բոլոր փոփոխությունները, տեսնել, թե ինչ կարծես բրաուզերի ցանկի մեջ: Դա այն է, մի ընդհանուր արդյունք: Որպես հետեւանք, մենք եկել ենք գրավիչ մենյուն, որ դուք միշտ կարող եք փոփոխել, կախված իրենց նախասիրությունների: Եւ ձեռք բերելու նոր գիտելիքներ ոլորտում jQuery, CSS, Դուք կարող եք ստեղծել եզակի տարրերը կայքում, բարելավել իրենց հմտությունները: