9 четтеги CSS менюсун өткөрүп жибере албайсыз

Navbar каптал тилкеси

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

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

Жооптуу каптал тилкеси-навбар

Vertical Horizontal

Эсте каптал менюсу ARIA колдоосун сунуш кылат жана аны портреттик жана пейзаждык режимде да колдонсо болот. Өтө өзгөчө дизайны менен, ал Facebook үчүн сулуу анимацияны сунуштап, веб-дизайндагы бардык муштумдарды киргизүү үчүн дагы көп анимацияларды алып чыккан бир катар хоперлерди көрсөтөт.

Каптал тилкесинин шаблону

каптал тилкесинин шаблону

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

Каптал тилкесинин көрсөткүчтөрү

Каптал тилкесинин көрсөткүчтөрү

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

Админ каптал тилкеси

Археология

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

Археология

Navbar каптал тилкеси

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

Каптал тилкесинин менюсу

Археология

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

Каптал тилкесиндеги навигациянын инструменттери

Каптал тилкесинде чабыттоо

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

Таза CSS Fly

Таза CSS

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

Каптал тилкесинин менюсун алып баруу

Каптал тилкесинин менюсу

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

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


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

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

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

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

*

*

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