Nu cu mult timp în urmă, am decis să adaug vorbitori la meniul de sus de pe site-ul meu. Probabil ați observat cum se selectează zona selectată a elementului în meniul de sus de pe acest site.
Pentru a nu reinventa roata, in primul rand am decis sa caut solutii gata pe internet si asa cum sa dovedit nu in zadar. Există un plugin special pentru jQuery. care se numește LavaLamp.
În acest articol vom discuta în detaliu crearea unui meniu dinamic utilizând plug-inul LavaLamp.
Deci, înainte de a continua, aruncați o privire la meniurile de probă pe care le puteți crea utilizând acest plugin.
Stil inferior
Destul de bine, nu-i așa?
Astfel de meniuri sunt create elementar! Mai intai vom crea codul HTML al meniului:
Acest element de meniu prevede stiluri de meniuri active (selectare activă) și poziționate absolut în interiorul meniului. Astfel, atunci când mutați cursorul mouse-ului peste elementul de meniu, schimbăm proprietatea CSS la stânga și facem să se miște în direcția dorită. Și pentru ca textul elementelor de meniu să fie în partea superioară a zonei selectate a indexului Z, acesta este setat mai puțin decât restul elementelor din meniu
Cu algoritmul plug-in-ului elaborat, acum aruncați o privire asupra stilurilor:
Mai întâi, am setat stilul pentru lista "ul" cu o imagine de fundal portocaliu strălucitor și am setat câteva proprietăți de bază cum ar fi înălțimea, lățimea, margini, margini etc. Utilizăm poziționarea relativă, deoarece, astfel încât să putem poziționa absolut "li" în relație cu "ul". Aceasta vă permite să mutați liber "li" în interiorul părintelui "ul"
Apoi, setăm proprietatea CSS "li" la "float: left", plasând astfel aspectul orizontal al tuturor elementelor de meniu.
În cele din urmă, un stil pentru link-uri care reprezintă o parte virtuală interactivă a fiecărui element de meniu. Aceste stiluri sunt în mare parte cosmetice.
Rămâne să conectați scriptul bibliotecii jQuuery și pluginul lavalamp la pagină. Pentru a face acest lucru între etichete
plasați următorul cod:Pluginul jquery.easing.js este necesar pentru a da efecte frumoase atunci când animați. Nu este obligatorie! Puteți descărca aici. și pluginul lavaLamp în sine este aici
Plug-in-ul lavaLamp suportă următorii parametri: viteza de animație "fx", "viteza" și al treilea parametru este o funcție de apel invers care va fi apelată când se face clic pe elementul de meniu. Toți acești parametri sunt opțional și implicit la valorile următoare: "fx" - "liniar", "viteză" - 500 ms.
Și pentru ca zona selectată să fie returnată locului, este necesar să setați elementul de meniu necesar la clasa "curent"
Puteți descărca sursa meniurilor aici
La asta poate tot! Sper că acest material a fost util pentru dvs.?
Pentru a face legăturile să funcționeze, ștergeți această bucată de cod atunci când apelați pluginul!
Evaluați acest articol:
Articole similare
Trimiteți-le prietenilor: