16 menus cascading ee CSS si dib loogu habeeyo websaydhkaaga

JQuery menu

Liistada Cascading ama dropdown waa muhiim u ah ku dhowaad nooc kasta oo degel ah. Gaar ahaan kuwa u baahan hordhaca xogta booqdaha, sida wax fudud sida doorashada jinsiga ama xulashada midabka uu noqon doono shaarka aad doonaysid inaad ku iibsato e-commerce.

Liiska Cascading waa cunsurro kale oo aan ku cusbooneysiin karno degelkeenna si aan u raacno heerarka naqshadeynta websaydhka hadda jira. Taabashadaas iyo khiyaanadaas oo tayo dheeraad ah ku soo kordhin doonta dhammaan deegaanka webka ee aan u diyaarinnay degelkeenna. Adiga ku soo bandhigida CSS 16 buug-gacmeedka cascading taas ayaa ku anfacaya inay cusboonaysiiso boggaaga. Waxaan xasuusnaano in qaarkood sidoo kale yeelan doonaan xoogaa JavaScript ah, oo aan la iloobin HTML-gaas lagama maarmaanka ah sidoo kale.

Menu Waterfall

Liiska biyo-dhaca gaarka ah

Liiska biyo-dhaca ama hoos u dhaca wuxuu ka kooban yahay HTML, CSS iyo JavaScript. In kasta oo koodhka JavaScript uu aad u gaaban yahay. Waxay la socotaa heerka Maaddada Naqshadeynta hadda jirta oo ah luuqad naqshadeyn ah si loogu daro animation biyo-dhac fudud oo toosan oo leh indho qabasho joogitaan leh. Markaad furaneyso xulashooyinka kaladuwan ee menu, waxaa jira saameyn hover graphic ah markaan ka tagno tilmaamaha jiirka dushooda.

Liiska soo daadinta oo leh jQuery

JQuery menu

Liiskan biyo-dhaca ah ayaa toos u toosan, laakiin waa qaab aad u qurux badan. Waxay sidoo kale leedahay hover si loo xoojiyo midabka buluugga ah ee menu kasta iyo animation cascading ah oo aan faan badan lahayn. Waxaa lagu sameeyaa HTML, CSS iyo JavaScript (jQuery).

Qaabka menu-biyo dhaca

Liiska Karbaashka

Liiskan hoos u dhigista ee HTML, CSS iyo JavaScript waa waxaa dhiirrigeliyay mid ka mid ah websaydhada ugu habboon ee loogu talagalay: Stripe (adeegga kaarka dijitaalka ah). Ma jiro wax dulsaaran menus, laakiin animation si heer sare ah loo qaabeeyey si loo caddeeyo ujeeddooyinkeenna ku saabsan qaabeynta degelkeenna. Muhiim u ah tayadeeda oo ku habboon in la cusbooneysiiyo menusyada boggaaga.

Liistada biyo dhaca ee dhaqdhaqaaqa ah

Liistada daahitaanka animation

Liiskan hoos u dhaca wuxuu isku dayayaa inuu muujiyo isticmaalka ka raagay animation mid kasta oo ka mid ah canaasiirta soo ifbaxaya markaad ka tagto tilmaamaha jiirka ee menu kasta. Iyadoo dhowr meelood meel dib loo dhigo, saameynta dib udhacaas ayaa la gaaray taas oo siinaysa taabasho aad u gaar ah.

Saamaynta liiska soo daadinta

Nadiifi CSS

Sida haddii a taxane ah oo kaararka ka sagxad ah, animation-ka miiskan biyo-dhaca ayaa aad ugu khaas ah. Saameyn biyo-dhac wanaagsan oo CSS nadiif ah. Waxaad horeyba u ogtahay waxa ay tahay inaad sameyso si aad uga hirgeliso bartaada.

Animation Waterfall ee ku jira menu

Animation menu biyo dhaca

Liiska hoos u dhaca garaacista animations iyo midabka buluuga ah ee muuqda. Iyada oo libdhi iyo gudahood, animation ka dhigaya qaybaha kala duwan ee menu ka muuqan. Lagu sameeyay HTML, CSS iyo JavaScript.

Iyada oo yar jQuery: menu Waterfall

Liiska soo daadinta

Liistada liiska shaqsi ahaaneed oo aad u kooban uma baahna nooc faahfaahin ah. Laga yaabee fudeydkeedu inuu yahay kan ugu fiican uguna xun. Waxay ku xirnaan doontaa waxaad ugu baahan tahay boggaaga iyo himilooyinkaaga. CSS badan iyo inyar oo JavaScript ah.

Liiska biyo-dhacayaasha ee quruxda badan

Cascada

Haddii tii hore aan seegno xoogaa animation ah iyo qaabeyn ka wanaagsan, meeriskan hoos u dhaca waxay leedahay wax kasta oo lagu sameeyo CSS iyo JavaScript. Dhaqdhaqaaqa iyo saameynta hooska ayaa ku garaacaya oranji mar kasta oo aan ka tagno tilmaamaha jiirka mid kasta oo ka mid ah qaybaha. Mid ka mid ah kuwa ugu fiican liiska.

Liiska ku daadinta CSS

CSS menu

Un menu-biyo-dhaca ugu yar iyo in si khaas ah loogu qaabeeyey CSS. Animation fudud, laakiin sifiican ayaa loo qabtay si uusan u istaagin. Liis aan la dareemi karin oo raacaya heerarka naqshadeynta hadda.

Liiska soo daadinta

Nadiifinta liiska CSS

Cuntadan CSS cascade ee nadiifka ahi waa mid kale si fiican loogu kala soocay animation taasi waxay dhacdaa markasta oo aan gujino liiska. Animation-ku wuxuu daaqada ka daaqayaa dhinaca midig oo leh wakhti ku habboon. Mid kale oo ka mid ah kuwa ugu xiisaha badan liiska oo dhan.

Liiska biyo-dhaca fudud

Liiska biyo-dhaca fudud

Liiskan ayaa asal ahaan fudud wuxuuna ka kooban yahay HTML iyo CSS. Waa mid kale oo ka mid ah menusyada noo oggolaanaya inaan cusbooneysiino qaybtaas muhiimka ah ee degelkeenna iyo taas ha siin qashin badan. Waxaan u maleynayaa in si wanaagsan loo fahmay waxa aan uga jeedno.

Hordhaca menu menu

Menu Horizontal

In kasta oo ay haddaba tahay in la fuliyo uu 4 sano, Liiskan biyo-dhaca ah ayaa ku dhajinaya midigta ku xigta si qurux badan oo hal abuur leh. Haddii aad raadineyso wax ka duwan, waa mid kale oo aad ka xulan karto liiska.

Liiska ku daadinta CSS

Menu Waterfalls

Liis kale oo kaliya ayaa ku jira CSS iyo taas waa midab midab leh, uguyaraan ku-habboonaanta lagu siiyay tusaalaha. Midabbada fidsan, animation-ka ayaa muujinaya saameynta isdabajooga ee hoos u dhigaya qaybaha kala duwan ee xulashada xulashada. Mid kale oo ka mid ah liiska xiisaha xiisaha leh ee ku dhaca liiska oo leh mawduuc si wanaagsan loo xushay.

Menu Waterfall leh JS yar

CSS menu

Liiskan hoos-u-dhiggu wuxuu adeegsadaa JavaScript aad u yar, oo ku filan in uu si otomaatig ah u xiro menu-ka markaan u gudubno wax kale. Ma yahay waqti fiican qabtay saamaynta animation si aad u noqoto mid ka mid ah kuwa ugu fiican ee arrintan la xiriira.

Meel kale oo CSS cascading menu ah

Liistada iskuxirka qashinka

Menu A cascading la animations kaas oo waxaa jira wax adag oo dib u dhac ah kun meelood labaad. Marka waxay soo saartaa saameynta deg degga ee soo booqdaha. Hover saameyn iyo menu soo jiidasho leh oo xiiso leh iyadoon wax faneed ah laga helin heer guud.

Cascade menu zig zag concept

Zig zag menu

Haddii aad raadineyso menu aan ka aheyn liiska oo dhan boostadan, liiskan hoos u dhaca wuxuu leeyahay wax walba oo aad raadsan karto. Ku animation la soo saaray waa zigzag inaad bixiso nooc kale oo khibrad ah oo tijaabo yar ah. Waxay sifiican ugu habboonaan kartaa mowduuc ciyaarta fiidiyowga ah, sidaas darteed haddii aad leedahay nooc kasta oo macmiil ah oo raadinaya wax ka duwan, hubaal waa midka ugu habboon liiska oo dhan. Qaababkeeda jajaban iyo animation dhakhso leh ayaa dhahaya dhammaantood.

Waan kuu daayey adiga taxanahan liiska CSS ee boggaaga kuwaas oo leh tiro aad u tiro badan oo iyaga ka mid ah.


Nuxurka maqaalka wuxuu u hogaansamayaa mabaadi'deena anshaxa tifaftirka. Si aad u soo sheegto khalad guji Halkan.

Noqo kuwa ugu horreeya ee faallo bixiya

Ka tag faalladaada

cinwaanka email aan la daabacin doonaa. Beeraha loo baahan yahay waxaa lagu calaamadeeyay la *

*

*

  1. Masuul ka ah xogta: Miguel Ángel Gatón
  2. Ujeedada xogta: Xakamaynta SPAM, maaraynta faallooyinka.
  3. Sharci: Oggolaanshahaaga
  4. Isgaarsiinta xogta: Xogta looma gudbin doono dhinacyada saddexaad marka laga reebo waajibaadka sharciga ah.
  5. Kaydinta xogta: Macluumaadka ay martigelisay Shabakadaha Occentus (EU)
  6. Xuquuqda: Waqti kasta oo aad xadidi karto, soo ceshan karto oo tirtiri karto macluumaadkaaga.