Menu vertikale për këtë faqe interneti në formën e një fizarmonikë me jQuery

Menu, siç e dini - një pjesë integrale e faqes. Interesant burim Lundruar në internet është në gjendje për vizitorët e interesit. Përveç kësaj, një pronë e rëndësishme e çdo meny - kompaktësinë e saj. Një menu e thjeshtë vertikale krijuar lehtë duke përdorur HTML dhe CSS. Por ne do të shkojmë më tej: Le të mësojnë për të krijuar menyja "fizarmonikë" me ndihmën e jQuery.

Krijo një "fizarmonikë" menyja

Çfarë është një menu vertikale në formën e një fizarmonikë? Kjo është një drop-down list, e cila krijon një të lehtë për të lundruar dhe i jep një vend elegant. Menu, kryer në këtë mënyrë, ju lejon për të kthyer një shumë e nën-artikujve. Qasja në to ndodh kur ju klikoni miun në pikën e dëshiruar. Dikush mund të thotë se është e mundur për të bërë një menu të thjeshtë në këtë mënyrë pa përdorimin e jQuery. Po, ajo është. Por ky objekt nuk do të jetë shumë i dobishëm për pronarët e smartphones ose tableta. Le të krijojnë një menu vertikale, tërheqës për të gjithë. Pastaj, duke ndryshuar ngjyrën styling një navigacion, ajo do të jetë e mundur për të rregulluar të projektimit për çdo vend.

Kodi HTML

Pra, për të krijuar menu tonë vertikale, ju duhet së pari thirrni HTML-kodin, i cili do të përmbajë linjat e mëposhtme:

Ruaj këtë kod në një skedar të quajtur Accord_menu.html.

Siç mund ta shikoni, ne kemi krijuar një listë të parenditur. Ai përbëhet nga 3 pika kryesore:

- photos;

- filmave;

- libra.

Çdo send ka pakë paragrafë. Ku jeni #, ju do të duhet të shtoni links. Tani është e rëndësishme për të përshkruar stilin. E gjitha varet nga pamjen e burimeve tuaj në Internet. menu vertikale për vendin duhet të integrohen në mënyrë harmonike në hartimin e saj.

CSS-code

Me stile ju nuk duhet të jetë e vështirë. Ne konstatojmë vetëm se në këtë shembull përdor një gradient mbushur. Këtu është CSS-code:

ngjyra është specifikuar në CSS-file, madhësia shënuesit janë hequr nga sendet në listën e në të majtë. Është vendosur se si të sillen në çdo send dhe nën-menynë kur ju rri pezull mbi të. Për shembull:

# E1fee2 - kjo zbehtë jeshile ngjyra sub.

# C4f0f7 -golubovaty hije nën kur ju rri pezull mbi ta.

Display Prona kërkojë vlerën bllok për të rregulluar mbushje nevojshme dhe madhësinë. Ngjyra, madhësia, tipi font, vendndodhja - çdo gjë është si përshkruajnë në CSS dosjen. E quajti atë, për shembull, accordionmenu_my1.css.

Lidh përmirësime jQuery menu

Siç mund ta kujtoni, qëllimi ynë - për të krijuar një jQuery vertikale menu. Nëse ju nuk jeni të njohur me këtë teknologji, mos u shqetësoni. Ne përdorim depo Google dhe të lidheni jQuery script. Kjo do të bëjë atë më tërheqës menu. jQuery është një bibliotekë JavaScript bazuar në bashkëveprimin e Hypertext Markup HTML dhe JavaScript. jQuery ju lejon për të hyrë në përmbajtjen dhe atributet e elementëve.

Pra, të lidhë script nevojshme në trupin e HTML-skedar dhe të vendosur rregullat për ruajtjen e 2 variablave, përveç elementeve të kalë garash. Ne kemi gjetur kodin, duke mbyllur skedat e tjera në hapjen e një në të cilën ka një klikim të mausit. Ja se si duket:

Ruaj të gjitha ndryshimet, të shohim se çfarë ajo duket si në menu e shfletuesit. Kjo është rezultat i përbashkët i: Si rezultat, ne kemi ardhur një menu tërheqëse që ju gjithmonë mund të ndryshojë, në varësi të preferencave të tyre. Dhe marrjen e njohurive të reja në fushën e jQuery, CSS, ju do të krijojë elementet unike të faqes, duke përmirësuar aftësitë e tyre.