Awọn akojọ aṣayan ipin 11 ni CSS ati HTML lati tẹle idiwọn apẹrẹ wẹẹbu lọwọlọwọ

CSS Omo ere jade

A tẹsiwaju pẹlu omiiran atokọ nla ti awọn akojọ aṣayan ipin mejeeji ni CSS bi ninu HTML ki o ba wọn mu fun awọn aini rẹ ti oju opo wẹẹbu rẹ. Awọn akojọ aṣayan iyipo wọnyi ni akọkọ gbiyanju lati fun ni akojọ aṣayan hamburger aṣa ati awọn ohun idanilaraya ti o yika iyipo; gẹgẹ bi ko ṣe le jẹ bibẹẹkọ.

Oniruuru pupọ wa bii pipe ti o jẹ ni anfani lati fun idojukọ pataki si akori kan pato. Iwara ati aṣa wiwo minimalist ni anfani lati fun awọn ifihan agbara si alejo ki wọn le mọ pe a ni oju ti o dara lati fun didara oju opo wẹẹbu wa ni apẹrẹ wẹẹbu. Jẹ ki a ṣe pẹlu awọn akojọ aṣayan iyipo 11, laisi kọkọ yọ ara wa kuro ni sisopọ si atokọ miiran ti awọn akojọ aṣayan CSS.

Akojọ lilọ kiri

Akojọ aṣyn lilọ kiri yi wa ni CSS ati HTML, nitorinaa imuse rẹ rọrun pupọ ti o ba lo lati ṣiṣẹ pẹlu koodu. Fun ni pẹlu iwara nla ati ọna ti o kere ju eyiti o gbe si ọkan ninu awọn ti o dara julọ lori atokọ naa.

Lilefoofo ipin akojọ aṣayan

Lilefoofo ipin akojọ aṣayan

Atokun ipin yiyi lilefoofo loju omi ni tẹ ni JavaScript, bii HTML ati CSS. Akojọ miiran pẹlu lẹsẹsẹ awọn ohun idanilaraya ti o gbe si ọkan ninu awọn ti o dara julọ lori atokọ yii. Didara laisi iyemeji eyikeyi.

Pẹpẹ lilọ kiri

Cirbar navbar

Yi ipin bar ni atilẹyin nipasẹ awọn Ede apẹrẹ Google ti a pe ni Apẹrẹ Ohun elo. Ti o ba n wa diẹ ninu ede yẹn, o ti gba akoko tẹlẹ lati ṣepọ rẹ sinu oju opo wẹẹbu rẹ.

Akojọ Ohun elo iyipo

Ohun elo ipin

Atokun ipin miiran fun Apẹrẹ Ohun elo ati pe dúró jade lati isinmi fun jara awọn aami ti o han ni inaro. Lilu ati pẹlu ipari pipe; kii ṣe igbadun, ṣugbọn o dabi ẹni nla.

Ipin akojọ

Ipin akojọ

Atokọ yii ti ni ipese pẹlu iwara pe faagun bọtini hamburger lati fihan awọn apakan oriṣiriṣi ti o le lọ si oju opo wẹẹbu nibiti o ti ṣepọ.

Aṣayan Radial ni CSS

CSS Radial Akojọ aṣyn

A ṣe akojọ aṣayan radial yii ni CSS ati HTML. Ṣe a pupọ akojọ aṣayan wiwo fun jara ti awọn aworan ti o han nigbati o ba tẹ lori aami hamburger. O jẹ iyatọ nipasẹ ara rẹ nikan nipasẹ abala yẹn.

Radial akojọ

Ipin akojọ

Ọkan ninu awọn akojọ aṣayan iyipo ti o ṣẹda julọ lori atokọ, ti o jẹ aami nipasẹ a iwara ṣiṣẹ daradara daradara. Iwọ kii yoo ni lati tẹ lati wo awọn apakan akojọ aṣayan oriṣiriṣi lori oju opo wẹẹbu rẹ.

CSS Gooey Akojọ aṣyn

Gooey Akojọ aṣyn

Akojọ aṣayan yii tẹriba iru iwara yẹn ti a npe ni Gooey ti o ṣe awọn oriṣiriṣi awọn apakan ṣàn lati bọtini hamburger. Aṣayan ipin ti o yatọ si iyoku ni CSS, nitorinaa o ti ṣetan lati ṣepọ rẹ sinu oju opo wẹẹbu naa. Iwara ati idanilaraya ti o mu oju jẹ ohun ti o mu ki o wa ni iyasọtọ lati iyoku.

Aṣayan radial ti ere idaraya

Radial ipin

Akojọ aṣayan ipin yii jẹ ohun rọrun, ṣugbọn kii ṣe alaini ere idaraya lati di didara kan. Bẹẹni o nlo JavaScript lati tẹle CSS ati HTML. Tẹ kan ti o rọrun lori aami hamburger yoo ṣii gbogbo awọn apakan ki o le lilö kiri si wọn.

Popout lilọ kiri ipin

Popout ipin

Tẹ kukuru lori aami hamburger ni kikun ṣi awọn oriṣiriṣi awọn apakan fun faagun iyika ki o ni anfani lati tẹ ninu ọkọọkan. Ti o ba ni ipa rababa ti o ba mu Asin mọlẹ lori eyikeyi ninu wọn, nitorinaa o di ohun ti o nifẹ si ju ti iṣaaju lọ, eyiti o jẹ ipilẹ diẹ diẹ.

Yiyi-jade akojọ aṣayan ipin

CSS Omo ere jade

Eyi jẹ ọkan ninu atilẹba ati awọn akojọ aṣayan iyipo ẹda lori gbogbo atokọ. Ṣe ṣe asefara pupọ ati pe yoo leti fun ọ ti foonu kan ti awọn igba atijọ ti a ni lati yi ika pada lati ṣe ipe pẹlu ọkọọkan awọn nọmba. Iwara idunnu kan fun akojọ aṣayan ipin ti o wa ni ita lati iyoku ninu ero rẹ. O jẹ ere idaraya gaan ti o ṣaṣeyọri gbogbo ipa yẹn, nitorinaa ti o ba n wa igbadun ati iyanilenu iyanilenu fun akori kan pato, bii ile-iṣẹ ipe, eyi jẹ pipe fun rẹ.


Awọn akoonu ti nkan naa faramọ awọn ilana wa ti awọn ilana olootu. Lati jabo aṣiṣe kan tẹ nibi.

Ọrọìwòye kan, fi tirẹ silẹ

Fi ọrọ rẹ silẹ

Adirẹsi imeeli rẹ yoo ko le ṣe atejade. O beere aaye ti wa ni samisi pẹlu *

*

*

  1. Lodidi fun data naa: Miguel Ángel Gatón
  2. Idi ti data naa: SPAM Iṣakoso, iṣakoso ọrọ asọye.
  3. Ofin: Iyọọda rẹ
  4. Ibaraẹnisọrọ data: Awọn data kii yoo ni ifọrọhan si awọn ẹgbẹ kẹta ayafi nipasẹ ọranyan ofin.
  5. Ibi ipamọ data: Alaye data ti o gbalejo nipasẹ Awọn nẹtiwọọki Occentus (EU)
  6. Awọn ẹtọ: Ni eyikeyi akoko o le ni opin, gba pada ki o paarẹ alaye rẹ.

  1.   Leandro wi

    Nla, o ṣeun fun ikojọpọ wọn papọ pẹlu awọn koodu rẹ. O ṣeun pupọ. Oju-iwe wẹẹbu yii lọ taara si aaye awọn bukumaaki mi.