Vertikali meniu į į akordeonas su jQuery formos svetainėje

Meniu, kaip žinote - neatskiriama svetainėje. Įdomu naršyti interneto išteklių sugeba palūkanų lankytojams. Be to, svarbi savybė bet kurio meniu - jos kompaktiškumas. Paprastas vertikalus meniu lengvai sukurtas naudojant HTML ir CSS. Bet mes einame toliau: Išmokime kurti pagal meniu "akordeonu" su jQuery pagalba.

Sukurti pagal meniu "akordeonu"

Kas yra vertikalus meniu į akordeono forma? Tai yra išskleidžiamajame sąraše, kuris sukuria lengva naršyti ir suteikia stilingą svetainę. Meniu, atliekamas tokiu būdu, leidžia jums įjungti sub-daug elementų. Prieiga prie jų įvyksta, kai jūs spustelėkite pele ant norimo elemento. Kažkas gali pasakyti, kad tai yra įmanoma padaryti paprastą meniu šiuo būdu be jQuery naudojimui. Taip, ji yra. Bet šis objektas nebūtų labai naudinga savininkams išmaniųjų telefonų arba tabletes. Kurkime vertikalų meniu, patrauklus visiems. Tada, keičiant spalvą stilius yra navigacijos, bus galima pakoreguoti dizainą į bet kokios svetainės.

HTML kodas

Taigi, norint sukurti mūsų vertikalus meniu, pirmiausia turite surinkti HTML kodą, kuris bus nurodytas šias eilutes:

Išsaugoti šį kodą į failą pavadinimu Accord_menu.html.

Kaip matote, mes sukūrėme netvarkingai sąrašą. Jis susideda iš 3 pagrindinių dalykų:

- nuotraukos;

- filmai;

- knygos.

Kiekvienas daiktas turi kelis punktus. Kur #, jums reikės įdėti nuorodas. Dabar svarbu apibūdinti stilių. Viskas priklauso nuo jūsų interneto išteklių išvaizdą. Vertikali meniu svetainėje turi integruoti harmoningai į savo dizainą.

CSS kodas

Su stilių jums neturėtų būti sunku. Atkreipiame dėmesį, tik kad šiame pavyzdyje naudojamas gradiento užpildyti. Čia yra CSS kodas:

spalva nurodyta CSS failą, dydis žymekliai yra pašalinami iš sąraše kairėje daiktais. Jis nustatė, kaip elgtis kiekvieno elemento ir sub-meniu, kai jūs Pakimba virš jo. Pavyzdžiui:

# E1fee2 - tai šviesiai žalios spalvos pietus.

# C4f0f7 -golubovaty atspalvis pietus nuvedus ant jų.

Rodyti nuosavybė paklausti blokas vertę nustatykite reikiamą padding ir dydį. Spalva, dydis, šrifto tipas, vieta - viskas kaip aprašyti CSS faile. Pavadinkite tai, pavyzdžiui, accordionmenu_my1.css.

Prijungimas JQuery meniu patobulinimai

Kaip Jūs galbūt žinote, mūsų tikslas - sukurti vertikalaus meniu jQuery. Jei nesate susipažinę su šia technologija, nesijaudinkite. Mes naudojame Google saugyklą ir prijungti JQuery scenarijų. Tai, kad jis taptų patrauklus meniu. JQuery yra JavaScript biblioteką remiantis Hypertext Markup HTML ir "JavaScript" sąveika. JQuery leidžia jums prieigą prie turinio ir atributus elementų.

Taigi, prisijungti reikiamą scenarijų į HTML failą kūno ir nustatyti taisykles, skirtas saugoti 2 kintamųjų, išskyrus žirgų lenktynių elementais. Prisidėti kodą, uždarymo kitus skirtukus ties vienu, dėl kurių yra pelės paspaudimu atidarymo. Štai kaip tai atrodo:

Išsaugoti pakeitimus, matyti, kaip jis atrodo naršyklės meniu. Tai yra bendras rezultatas: Kaip rezultatas, mes turime ateiti patrauklią meniu, kad jūs visada galite keisti priklausomai nuo jų pageidavimus. Ir įgyti naujų žinių apie JQuery, CSS srityje, jums bus sukurti unikalius elementus svetainėje, gerinti savo įgūdžius.