Vertikaalne menüü saidi kujul akordion koos jQuery

Menüüs, nagu te teate - lahutamatu osa saidile. Huvitavad navigate veebiressurss suudab huvi külastajatele. Lisaks on oluline vara ühtegi menüü - selle kompaktsus. Lihtne vertikaalne menüü lihtsalt loodud kasutades HTML ja CSS. Aga me minna kaugemale: Õppigem luua menüü- "akordion" abiga jQuery.

Loo menüü- "akordion"

Mis on vertikaalne menüü kujul akordion? See on rippmenüüst, mis loob lihtne navigeerida ja annab stiilne kohas. Menüü läbi niimoodi, saab sisse palju alajaotused. Juurdepääs neile tekib, kui klõpsate hiire soovitud kirje. Keegi võib öelda, et see on võimalik teha lihtsa menüü sel moel ilma kasutamise jQuery. Jah, on küll. Aga see objekt ei oleks väga kasulik omanikud nutitelefonid või tabletid. Loome vertikaalne menüü ahvatlev kõigile. Siis, muutes värvi styling navigeerimise on võimalik kohandada disain tahes kohas.

HTML koodi

Nii, et luua meie vertikaalne menüü, siis tuleb kõigepealt valida HTML-koodi, mis sisaldab järgmised read:

Salvesta see kood faili nimega Accord_menu.html.

Nagu näete, oleme loonud järjestamata loetelu. Koosneb 3 peamist aspekti:

- fotod;

- kiled;

- raamatud.

Iga element on mõned punktid. Kus on #, siis on vaja lisada linke. Nüüd on oluline, et kirjeldada stiilis. See kõik sõltub ilme Internet ressurss. Vertikaalne menüü sait peab integreerima harmooniliselt oma disain.

CSS-koodi

Mis stiili te ei tohiks olla raske. Märgime ainult, et selles näites kasutab astmiktäitega. Siin on CSS-kood:

värv on täpsustatud CSS-fail, suurus markerid eemaldatakse loendi elemendid vasakul. See määratakse, kuidas käituda iga kirje ja alammenüü, kui sa hõljuma üle. Näiteks:

# E1fee2 - see kahvatu roheline sub.

# C4f0f7 -golubovaty varju all, kui viite kursori neid.

Display vara küsida ploki väärtuse reguleerimiseks vajalikud polstri ja suurus. Värv, suurus, kirjatüüp, asukoha - kõik on nagu kirjeldavad CSS faili. Kõne see näiteks accordionmenu_my1.css.

Ühendamine jQuery menüü parandusi

Nagu te võib-olla mäletate, meie eesmärk - luua vertikaalne menüü jQuery. Kui te ei ole tuttav selle tehnoloogia, ärge muretsege. Me kasutame Google'i andmehoidla ja ühendada jQuery skripti. See muudab atraktiivsemaks menüü. jQuery on JavaScript raamatukogu põhineb interaktsiooni Hypertext Markup HTML ja JavaScript. jQuery võimaldab juurdepääsu sisu ja atribuute elemente.

Niisiis, ühendada vajalikke skripti keha HTML-faili ja kehtestada eeskirjad ladustamise 2 muutujad, välja arvatud hobuste võidusõidu elemente. Kaasa kood, Teiste kaartide sulgemine avamisel üks aasta, mis on hiireklõpsuga. Siin on, kuidas see välja:

Salvesta kõik muudatused, vaata, mida ta välja näeb brauseri menüüs. See on ühine tulemus: Selle tulemusena oleme jõudnud atraktiivne menüüs saate alati muuta, sõltuvalt nende eelistusi. Ja omandada uusi teadmisi valdkonnas jQuery, CSS, siis loob unikaalseid elemente saidi, parandades oma oskusi.