Cum se face un meniu derulant pe jquery

Cum se face un meniu derulant pe jquery

Buna ziua tuturor! În acest articol, vom examina cum să facem un meniu de extragere folosind jQuery.

Dacă trebuie să faceți un meniu de tragere pe site, atunci cel mai simplu mod este să utilizați biblioteca Sliide.







Puteți aranja meniul din partea stângă, sus, dreapta sau de jos. Pentru a face mai clar, uita-te la demo-uri.

Pentru ce folosire?

Care sunt dependențele?

Pentru a lucra, aveți nevoie de biblioteca JQuery 2.1.0 sau o versiune mai nouă. Ideea ar trebui să funcționeze cu versiunile mai vechi, dar pot apărea probleme. Nu sunt necesare fișiere de stil, toate stilurile sunt integrate.

Pluginul acceptă Chrome. Firefox. Safari. IE 10/11 și Edge.

Cum se utilizează?







  • Descărcați și conectați jQuery
  • Descărcați și conectați fișierul de script
  • Veți avea nevoie de div (nav sau orice altceva) și setați proprietatea de vizibilitate la ascunsă. Veți avea nevoie și de un obiect cu setări
var settings = comutare: "# sliiider-toggle", // selector pentru meniu
exit_selector: ".slider-exit", // selector pentru butonul de ieșire, dacă este necesar
animație_durare: "0.5s", // durata de animație
loc: "stânga", // de unde va merge meniul (stânga, dreapta, sus, jos)
animation_curve: "cubic-bezier (0.54, 0.01, 0.57, 1.03)", // curba de animație
body_slide: true, // setat la true dacă doriți să plece întreaga pagină, nu doar div
no_scroll: true, // setat la true dacă doriți să dezactivați derularea în timp ce afișați meniul
>; $ ('# Menu') Sliiide (setări); // inițializați
  • Dacă doriți să împingeți meniul pe orizontală, va trebui să setați stilul de lățime al blocului, iar pluginul va crește automat înălțimea maximă. Dacă doriți să împingeți meniul vertical, va trebui să setați înălțimea blocului și plug-in-ul va crește automat lățimea blocului la maxim.
  • Pentru dvs., sunt disponibile funcții utile
var meniu = $ (# '. left-menu #') sliiide ();

meniuactivare (); // activează meniul
menu.deactivate (); // dezactivează meniul
menu.reset (); // elimină toate stilurile care au fost adăugate la orice element

Deci, asta e tot. Vă mulțumesc pentru atenție!







Articole similare

Trimiteți-le prietenilor: