Вебсайтыңызды жаңыртуу үчүн 16 каскаддык CSS меню

JQuery менюсу

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

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

Шаркыратманын менюсу

Ыңгайлаштырылган шаркыратманын менюсу

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

JQuery менен ачылуучу меню

JQuery менюсу

Бул шаркыратманын менюсу жөнөкөй, бирок андай эмес дизайны жагынан абдан жарашыктуу. Ошондой эле, ар бир менюнун көк түсүн баса турган учкуч жана каскаддык анимация анча-мынча ызы-чуусуз. Ал HTML, CSS жана JavaScript (jQuery) менен жасалган.

Шаркыратманын менюсу

Stripe Menu

HTML, CSS жана JavaScriptтеги бул ачылуучу меню мыкты иштелип чыккан веб-сайттардын биринин жетеги менен жазылган: Stripe (санариптик карта кызматы). Менюлардын үстүндө эч кандай учуу жок, бирок веб-сайтыбыздын жасалгаланышына байланыштуу ниетибизди ачыкка чыгаруу үчүн эң сонун иштелип чыккан анимация. Вебсайтыңыздын менюларын жаңыртуу үчүн анын сапаты жана кемчиликсиздиги үчүн маанилүү.

Шаркыратманын менюсу

Анимацияны кечиктирүү менюсу

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

Ачылуучу меню эффекттери

Таза CSS менюсу

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

Шаркыратма анимациясы менюда

Шаркыратманын менюсу

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

Бир аз jQuery менен: Шаркыратманын менюсу

Ачып түшүүчү меню

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

Саркеч шаркыратманын менюсу

шаркыратма

Эгерде мурунку анимацияны жана жакшыраак дизайнды байкабай калсак, анда бул ачылуучу меню CSSте жасала турган нерселердин бардыгы бар жана JavaScript. Ар бир бөлүмдүн үстүнө чычкан көрсөткүчүн калтырган сайын, анимация жана кызгылт сары түстөгү көлөкө түсү таасир берет. Тизмедеги мыктылардын бири.

CSS ичинде ачылуучу меню

CSS менюсу

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

Ачып түшүүчү меню

Таза CSS ачылуучу менюсу

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

Жөнөкөй шаркыратманын менюсу

Жөнөкөй шаркыратманын менюсу

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

Горизонталдык менюда чабыттоо

Горизонталдык меню

Ал буга чейин аткарылышы керек болсо да анын 4 жыл, бул шаркыратманын менюсу анын жанындагы жагымдуу бөлүгүн кооз чыгармачыл жол менен каптайт. Эгер сиз башка нерсени издесеңиз, анда ал тизмеден дагы бир нерсени тандап алсаңыз болот.

CSS ичинде ачылуучу меню

Шаркыратмалар менюсу

CSS дагы башка меню жана ал ал абдан түстүү, жок дегенде, мисалда келтирилген настройкада. Жалпак түстөр менен, анимация тандалган менюнун ар кандай бөлүмдөрүн түшүрүп турган жылма жылмакай эффектти көрсөтөт. Тизмедеги дагы бир кызыктуу шаркыратма менюсу, ал жакшы тандалган темага ээ.

Кичинекей JS менен шаркыратма менюсу

CSS ачылуучу менюсу

Бул ачылуучу меню JavaScriptти аз колдонот, башка нерсеге өткөндө менюну автоматтык түрдө жабуу үчүн жетиштүү. Is убакыт жакшы жетишилди анимациянын таасири менен бул жагынан эң мыктылардын катарына кирет.

Дагы бир CSS каскаддык менюсу

Ачылуучу интерфейс менюсу

Анимациялары бар каскаддык меню миңден биринин кечигиши кыйын экинчи. Ошентип, ал конокко дароо таасир этет. Hover эффектиси жана кызыктуу ачылуучу меню жалпы деңгээлде анча-мынча ызы-чуусуз.

Каскад менюсу zig zag түшүнүгү

Zig zag менюсу

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

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


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

Комментарий биринчи болуп

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

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

*

*

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