Учурдагы веб-дизайн стандартын сактоо үчүн CSS жана HTMLдеги 11 тегерек меню

CSS Spin чыгып

Башкасы менен улантабыз CSSтеги тегерек менюлардын чоң тизмеси HTMLдегидей эле, аларды веб-сайтыңыздын муктаждыктарына ылайыкташтырыңыз. Бул тегерек менюлар, негизинен, гамбургердин менюсун айланып турган стилди жана анимацияны берүүгө аракет кылышат; ал башкача болушу мүмкүн эмес эле.

Бул жерде ар кандай, ошондой эле кемчиликсиз бири бар керектүү көңүл бурууга жөндөмдүү белгилүү бир темага. Анимация жана минималисттик визуалдык стиль келгендерге сигналдарды бере алат, ошондо алар биздин вебсайттын сапатын веб-дизайнда жасоого жакшы көзүбүз бар экендигин билишет. Алгач өзүбүздү байланышуудан ажыратпай, 11 тегерек меню менен жасайлы CSS менюларынын башка тизмесине.

Айланма навигация менюсу

Бул тегерек навигация менюсу CSS жана HTML тилдеринде жеткиликтүү, андыктан сиз код менен иштөөгө көнүп калган болсоңуз, аны ишке ашыруу жөнөкөй. Берилген сонун анимация жана минималдуу стиль аны тизмедеги мыктылардын катарына кошот.

Калкып турган тегерек меню

Калкып турган тегерек меню

Бул калкыма тегерек меню JavaScript менен сугарылган, ошондой эле HTML жана CSS. Бул тизмедеги мыктылардын катарына кирген анимациялардын сериясы бар дагы бир меню. Эч кандай шек жок сапаттуу.

Айланма навигация тилкеси

Circular navbar

Бул тегерек тилке илхам алган Гуглдун Материалдык Дизайн деп аталган дизайн тили. Эгер сиз ошол тилдин бир бөлүгүн издесеңиз, анда аны веб-сайтыңызга киргизүүгө убакыт талап кылынат.

Circular Material менюсу

Circular Material

Материалдык Дизайн үчүн дагы бир тегерек меню жана ал башкалардан айырмаланып турат тигинен пайда болгон иконалардын сериясы үчүн. Укмуш жана кемчиликсиз бир бүтүрүү менен; сонун эмес, бирок сонун көрүнөт.

Айланма меню

Айланма меню

Бул меню анимация менен жабдылган гамбургер баскычын кеңейтүү ал интеграцияланган веб-сайттан кире турган ар кандай бөлүмдөрдү көрсөтүү.

CSS'теги радиалдык меню

CSS Радиалдык Менюсу

Бул радиалдык меню CSS жана HTMLде жасалган. Бир абдан визуалдык тегерек меню ошол сүрөттөр сериясы үчүн гамбургер сүрөтчөсүн чыкылдатууда пайда болот. Ал өзү гана ошол жагы менен айырмаланып турат.

Радиалдык меню

Айланма меню

Менен мүнөздөлгөн тизмедеги креативдүү менюлардын бири анимация абдан жакшы иштеди. Вебсайтыңыздагы ар кандай меню бөлүмдөрүн көрүү үчүн чыкылдатуунун кажети жок.

CSS Gooey Менюсу

Gooey Менюсу

Бул меню анимациянын ошол түрүнө баш иет ар кандай бөлүмдөрдү жасайт Gooey деп аталат гамбургер баскычынан агат. Циркулярдык меню CSSтеги башкалардан айырмаланып, аны веб-сайтка киргизүүгө даярсыз. Жандуу жана көз жоосун алган анимация аны башкалардан өзгөчөлөнтүп турат.

Анимацияланган радиалдык меню

Circular radial

Бул тегерек меню бир топ жөнөкөй, бирок сапаттуу болуш үчүн ага анимация жетишсиз. Бул JavaScript колдонот CSS жана HTML коштоо үчүн. Гамбургер сөлөкөтүн жөнөкөй чыкылдатуу менен, бардык бөлүмдөр ачылат, андыктан аларга өтүүгө болот.

Айланма навигациянын калкып чыгуучу терезеси

Айланма калкымак

Гамбургер сөлөкөтүндөгү кыскача пресс ар кандай бөлүмдөрдү толугу менен ачат тегеректи чоңойтуу жана басууга мүмкүнчүлүк алуу ар биринде. Чычканды алардын кайсынысына болбосун басып коё берсеңиз, анда ал учуу таасирин тийгизет, андыктан мурункусуна караганда кызыктуу болуп калат, бул бир аз жөнөкөй.

Айланма меню

CSS Spin чыгып

Бул тизмедеги эң оригиналдуу жана креативдүү тегерек менюлардын бири. бул кыйла ыңгайлаштырылган жана телефонду эсиңизге салат Ар бир сандар менен чалуу үчүн манжаны бурушубуз керек болгон илгерки адамдардын. Концепциясы боюнча башкалардан өзгөчөлөнүп турган тегерек меню үчүн кызыктуу анимация. Чындыгында анимация мунун баарына жетишет, андыктан сиз белгилүү бир тема үчүн кызыктуу жана кызыктуу меню издесеңиз, мисалы, чалуулар борбору, бул ага ылайыктуу.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий, өзүңүз калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Leandro ал мындай деди:

    Керемет, аларды коддоруңуз менен кошо жүктөгөнүңүз үчүн рахмат. Чоң рахмат. Бул веб баракча түз эле менин кыстармалар тилкесине өтөт.