Joriy veb-dizayn standartiga rioya qilish uchun CSS va HTML-dagi 11 ta dumaloq menyu

CSS chiqib ketadi

Biz boshqasi bilan davom etamiz CSS-dagi dumaloq menyularning katta ro'yxati HTML-dagi kabi ularni veb-saytingiz ehtiyojlariga moslashtirishingiz mumkin. Ushbu dairesel menyular asosan ushbu gamburger menyusiga aylana atrofida aylanadigan uslub va animatsiyalarni berishga harakat qiladi; xuddi shunday bo'lishi mumkin emas edi.

Bu erda juda xilma-xil va mukammal bo'lganlar mavjud kerakli e'tiborni berishga qodir ma'lum bir mavzuga. Animatsiya va minimalist vizual uslub, tashrif buyuruvchiga signallarni berishga qodir, shunda ular veb-dizayndagi veb-saytimiz sifatini ta'minlashga qodir ekanligimizni bilishadi. Keling, avval o'zimizni bog'lashdan mahrum qilmasdan, 11 dumaloq menyu bilan qilaylik CSS menyularining boshqa ro'yxatiga.

Dairesel navigatsiya menyusi

Ushbu dairesel navigatsiya menyusi CSS va HTML-da mavjud, shuning uchun siz kod bilan ishlashga odatlangan bo'lsangiz, uni amalga oshirish juda oson. Bilan ta'minlangan ajoyib animatsiya va minimal uslub uni ro'yxatdagi eng yaxshilar qatoriga qo'shadi.

Suzuvchi dairesel menyu

Suzuvchi dairesel menyu

Ushbu suzuvchi dairesel menyu JavaScript-ga singib ketgan, shuningdek HTML va CSS. Ushbu ro'yxatdagi eng yaxshi qatorga joylashtirilgan bir qator animatsiyalarga ega yana bir menyu. Hech shubhasiz sifat.

Dumaloq navigatsiya paneli

Dumaloq navbar

Ushbu dairesel bar ilhomlangan Materiallar dizayni deb nomlangan Google dizayn tili. Agar siz ushbu tilning bir qismini qidirsangiz, uni veb-saytingizga qo'shish uchun vaqt kerak.

Circular Material menyusi

Dumaloq material

Material Design uchun yana bir dumaloq menyu va shu boshqalardan ajralib turadi vertikal ravishda paydo bo'lgan ushbu piktogramma uchun. Ajoyib va ​​mukammal tugatish bilan; nafis emas, lekin u ajoyib ko'rinadi.

Dumaloq menyu

Dumaloq menyu

Ushbu menyu animatsiya bilan jihozlangan gamburger tugmachasini kengaytirish u birlashtirilgan veb-saytga kirishingiz mumkin bo'lgan turli bo'limlarni ko'rsatish.

CSS-dagi radial menyu

CSS Radial Menyusi

Ushbu radial menyu CSS va HTML tillarida yaratilgan. A juda ko'rgazmali dairesel menyu ushbu rasmlar seriyasi uchun gamburger belgisini bosganda paydo bo'ladi. U o'zi bilan faqat shu jihati bilan ajralib turadi.

Radial menyu

Dumaloq menyu

Ro'yxatdagi eng ijodiy doiraviy menyulardan biri animatsiya juda yaxshi ishladi. Veb-saytingizdagi turli xil menyu bo'limlarini ko'rish uchun siz bosishingiz shart emas.

CSS Gooey menyusi

Gooey menyusi

Ushbu menyu ushbu turdagi animatsiyaga bo'ysunadi "Gooey" deb nomlangan, u turli bo'limlarni yaratadi gamburger tugmachasidan oqing. Dumaloq menyu CSS-ning qolgan qismidan farq qiladi, shuning uchun uni veb-saytga qo'shishga tayyor bo'lasiz. Jonli va jozibali animatsiya bu haqiqatan ham boshqalardan ajralib turadigan narsa.

Animatsion radial menyu

Dumaloq radial

Ushbu dairesel menyu juda sodda, ammo sifatli bo'lish uchun adolatli animatsiya yo'q. JavaScript-ni ishlatadi CSS va HTML-ga hamroh bo'lish. Gamburger belgisini bosish orqali barcha bo'limlar ochiladi, shunda ularga o'tishingiz mumkin.

Dairesel navigatsiya oynasi

Dumaloq popout

Gamburger belgisiga qisqa bosish turli bo'limlarni to'liq ochadi doirani kattalashtiring va bosish imkoniyatiga ega bo'ling har birida. Agar siz sichqonchani ularning birortasida ushlab tursangiz, u hover effektiga ega, shuning uchun avvalgisiga qaraganda qiziqroq bo'ladi, bu biroz sodda.

Dumaloq menyu

CSS chiqib ketadi

Bu butun ro'yxatdagi eng original va ijodiy dumaloq menyulardan biridir. Shunday juda moslashtirilgan va sizga telefonni eslatadi har bir raqam bilan qo'ng'iroq qilish uchun barmoqni burishimiz kerak bo'lgan qadimgi odamlar. O'zining kontseptsiyasida boshqalardan ajralib turadigan dumaloq menyu uchun qiziqarli animatsiya. Bu haqiqatan ham animatsiyaning barchasiga erishadi, shuning uchun agar siz qo'ng'iroq markazi kabi ma'lum bir mavzu uchun qiziqarli va qiziq menyu qidirsangiz, bu juda mos keladi.


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

Izoh, o'zingiznikini qoldiring

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

  1.   Leandro dijo

    Ajoyib, ularni o'zingizning kodlaringiz bilan birga yuklaganingiz uchun tashakkur. Katta rahmat. Ushbu veb-sahifa to'g'ridan-to'g'ri mening xatcho'plar satrida joylashgan.