10 menus CSS shaashad buuxda oo loogu talagalay degel kasta

Liiska shaashadda oo buuxa

ka shaashadda CSS ee shaashadda buuxda Waxay ku habboon yihiin adeegsiga sawirro waaweyn oo u muuqda inay xoogga saaraan mawduuca websaydhka, ha noqoto bog degitaan, goob sawir qaadasho ama xitaa eCommerce halkaas oo aan dooneyno inaan ku muujino badeecad gaar ah.

Taxanahan oo ah 10 shaashad buuxda ama shaashad CSS shaashad buuxda leh raac heerarka hadda jira waxayna noo horseedaan inaan soo bandhigno sheygan dheeriga ah ee tayada ku jira naqshadeynta websaydhka ee ay tahay inaan maanta eegno. Waxaan horey u raacnay taxane kale oo maqaalo la mid ah, sida menus dhinaceeda bari o kan kale. Aynu raacno 10-ka shaashadood ee CSS ee shaashadda buuxa leh.

Liiska shaashadda oo buuxa

Shaashad buuxda oo Flexbox jQuery

Koodhkan iyadoo xoogaa Flexbox iyo jQuery ah wuxuu noo keenayaa shaashad shaashadaysan oo shaashad buuxda leh oo u taagan animation-keeda saxda ah. Animation-kaas ayaa na hor dhigaya qaybaha kala duwan. Ku habboon in la cusbooneysiiyo boggeena maanta.

Wareeg shaashad buuxda

Wareeg buuxa

Liis kale oo shaashad buuxda ah oo hadda socda oo siman iyo animation kala guur ah oo si wanaagsan loo bixiyay taas oo noo geynaysa qaybaha kala duwan ee ka muuqda cabir ahaan. La yaab leh oo aad u qurux badan.

Liiska shaashadda oo buuxa

Liiska shaashadda buuxda

Liis-shaashad-shaashad-dhammaystiran oo yar oo soo socota tayada kuwii hore, in kastoo fikrad ahaan way ka fududdahay. Tani macnaheedu maaha inay tahay mid kale oo tayo sare leh in la cusbooneysiiyo degelkeenna oo laga dhigo mid u taagan martida.

Menu shaashadda Flexbox

Liiska sanduuqa shaashadda buuxa

Liiskaan aan si sax ah uga bixin IE. Sikastaba xaalku ha ahaadee, waa mid tayo muuqaal ah oo weyn oo noocyada macaamiisha ah ee raadinaya wax ka duwan, laakiin taasi waxay leedahay muuqaal xirfadlayaal ah. Si aad u wanaagsan ayaa loo fuliyay inuu noqdo mid ka mid ah kuwa ugu khaaska ah liiska.

Wareeg shaashad buuxda

Wareeg shaashad buuxda

Waxaan dooneynaa inaan kugu adkeino taxanahan taxanaha ah. Tan kale waa aad u xarrago leh oo xambaarsan animation kala guur oo habsami leh. Aad bey ufudud u tahay websaydhkaaga. Ma seegi kartid, sidaa darteed waxaad haddaba haysataa ikhtiyaar inaad ku cusboonaysiiso websaydhkaaga noodh sida kan lagu bixiyo codepen. Waxaan kugula talineynaa inaad aragto tusaalaha si aad ula macaamili karto oo aad markaa fikrad dhow uga hesho sida ay u ekaan laheyd.

CSS menu buuxa

CSS shaashad buuxda

Shaashadan shaashadda buuxda leh ayaa ah ee ugu fudud liiska oo dhan. Astaamaha hamburger oo ku yaal dhinaca midig iyo menu-ka soo baxa marka aannu riixno, oo ku yaal bartamaha shaashadda. Waxay mudan tahay in loogu yeero shaashad shaashad buuxda laga sameeyay CSS.

Liiska shaashadda oo buuxa

Shaashad buuxda oo CSS ah

Shaashadan shaashadda buuxda leh waa nadiif CSS iyo ka sii madow mugdiga sidaa darteed ka dib markaad riixdo batoonka hamburger waxaan ka soo muuqaneynaa xulashooyinka kala duwan ee menu oo leh animation biyo-dhac si fiican loo qaabeeyey. Wanaagsan waa shaki la'aan.

Saafi CSS3 menu shaashad buuxda

Nadiifi CSS

Liis shaashad buuxda leh leh taxane ah oo kala guur ah iyo saameyn la soo saaray CSS3 saafi ah. In yar oo rimidda ah, inkasta oo aan laga maqnaan karin liistadan inay ahaato mid aad uga duwan kuwa kale.

Wareeg shaashad buuxda

Nadiifi CSS nadiif ah

Liiska shaashaddan buuxda lagu sameeyay HTML, CSS iyo JavaScript Waxaa lagu gartaa animation ku-meel-gaadh ah xawaare yar oo gaabis ah, laakiin taas oo siisa wax gaar ah websaydhka lambarka lagu galo. Waxay u isticmaashaa hover qayb kasta oo ka mid ah inay ka soocdo inta kale.

Saafi menu CSS

Wareeg shaashad buuxda

Waxaan ku dhammeyneynaa liiska shaashad shaashad buuxda oo lagu sameeyo CSS saafi ah. Markan waxaan leenahay badhanka hamburger ee dhanka bidix shaashadda oo dhaqaajisa animation-ka goobada u furan si loo muujiyo qaybaha kala duwan ee menu-ka. Waxaa laga yaabaa in ku-meel-gaadhka uu gaabis yahay, laakiin waa la isku habeyn karaa in lagu dhejiyo annaga oo jecel.

Waan kuu daayey adiga taxane ah oo qaabab ah CSS sidaa darteed gelinta qoraalka oo noqon doonta mid raaxo leh oo loogu raaxeysto booqdaha shabakadda.


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.