Vertical menu para sa site sa anyo ng isang akurdyon may jQuery

Ang menu, tulad ng alam mo - isang mahalagang bahagi ng site. Kagiliw-giliw navigate online na mapagkukunan ay magagawang interes bisita. Sa karagdagan, ang isang mahalagang pag-aari ng anumang menu - sa kanyang limit. Ang isang simpleng vertical menu madaling nilikha gamit ang HTML at CSS. Ngunit pumunta kami sa karagdagang: Ipaalam sa amin malaman upang lumikha ng menu- "akurdyon" sa tulong ng jQuery.

Gumawa ng isang menu- "akurdyon"

Ano ang isang vertical menu sa anyo ng isang akurdyon? Ito ay isang drop-down na listahan, na lumilikha ng isang madaling i-navigate at nagbibigay ng isang naka-istilong site. Menu, ginanap sa paraang ito, ay nagbibigay-daan sa iyo upang i-on ang isang pulutong ng mga sub-item. Access sa mga ito ay nangyayari kapag nag-click ang mouse sa ninanais na item. May isang taong maaaring sabihin na ito ay posible na gumawa ng isang simpleng menu sa ganitong paraan na hindi gumagamit ng jQuery. Oo, ito ay. Ngunit ang bagay na ito ay hindi maging napaka-kapaki-pakinabang sa mga may-ari ng smartphone o tablet. ni lumikha ng isang vertical menu, sumasamo sa lahat ipaalam. Pagkatapos, pagbabago ng kulay Pag-istilo ng pag-navigate, ito ay magiging posible upang ayusin ang disenyo sa anumang site.

HTML code

Kaya, upang lumikha ng aming vertical menu, kailangan mo munang i-dial ang HTML-code, na maglalaman ng mga sumusunod na linya:

I-save ang code sa isang file na tinatawag na Accord_menu.html.

Tulad ng iyong nakikita, lumikha kami ng isang unordered listahan. Binubuo ito ng 3 pangunahing puntos:

- mga larawan;

- mga pelikula;

- libro.

Ang bawat item ay may ilang mga talata. Kung nasaan #, kakailanganin mong magdagdag ng mga link. Ngayon ito ay mahalaga upang ilarawan ang estilo. Lahat ng ito ay depende sa ang hitsura ng iyong Internet na mapagkukunan. Vertical menu para sa ang site ay dapat isama harmoniously sa disenyo nito.

CSS-code

Sa estilo hindi ka dapat maging mahirap. tandaan lamang namin na sa halimbawang ito ay gumagamit ng isang gradient fill. Narito ang CSS-code:

kulay ay tinukoy sa CSS-file, laki ng marker ay inalis mula sa mga item sa listahan sa kaliwa. Ito ay tinutukoy kung paano kumilos sa bawat item at sub-menu kapag hover ka sa ibabaw nito. Halimbawa:

# E1fee2 - ito maputla berde Kulay ng sub.

# C4f0f7 -golubovaty shade sub kapag hover ka sa mga ito.

Display property hilingin block halaga upang ayusin ang mga kinakailangang padding at laki. Ang kulay, laki, uri ng font, ang lokasyon - lahat ng bagay ay bilang naglalarawan sa CSS file. Tumawag ito, halimbawa, accordionmenu_my1.css.

Pagkonekta ng jQuery pagpapabuti menu

Bilang maaari mong isipin, ang aming layunin - upang lumikha ng isang vertical menu jQuery. Kung ikaw ay hindi pamilyar sa ang teknolohiyang ito, huwag mag-alala. Ginagamit namin ang imbakan ng Google at kumonekta JQuery script. Ito ay gawin itong mas kaakit-akit menu. jQuery ay isang library JavaScript batay sa pakikipag-ugnayan ng Hypertext Markup HTML at JavaScript. jQuery ay nagbibigay-daan sa iyo upang ma-access ang nilalaman at mga katangian ng mga elemento.

Kaya, ikonekta ang mga kinakailangang script sa katawan ng HTML-file at i-set ang mga patakaran para sa imbakan ng 2 variable, maliban para sa horse racing elemento. Mag-ambag code, isara ang iba pang mga tab sa pagbubukas ng isa na kung saan doon ay isang mouse click. Narito kung paano ito asta:

I-save ang lahat ng mga pagbabago, makita kung ano ang hitsura nito tulad ng sa menu ng browser. Iyon ay isang pangkaraniwang resulta ng: Bilang isang resulta, kami ay dumating sa isang kaakit-akit na menu na maaari mong laging baguhin, depende sa kanilang kagustuhan. At pagkuha ng mga bagong kaalaman sa larangan ng jQuery, CSS, ikaw ay lumikha ng mga natatanging mga elemento ng site, ang pagpapabuti ng kanilang mga kasanayan.