Ɔfkanvas

Bil saydbar dɛn we ayd insay yu prɔjek fɔ nevigishɔn, shopin kat, ɛn ɔda tin dɛn wit sɔm klas dɛn ɛn wi JavaSkript plɔgin.

Na dis pej

Aw i de wok

Offcanvas na wan saydba kɔmpɔnɛnt we yu kin chenj bay JavaSkript fɔ apia frɔm di lɛft, rayt, ɔp, ɔ dɔŋ edj na di viupɔt. Dɛn kin yuz bɔtin ɔ anka dɛn as trig dɛn we dɛn kin ataya to sɔm patikyula tin dɛn we yu kin tɔgl, ɛn datadɛn kin yuz atribyut dɛn fɔ kɔl wi JavaSkript.

Offcanvas de sheb sɔm pan di sem JavaSkript kɔd dɛn lɛk modal dɛn. Fɔ kɔnsɛpt, dɛn rili fiba, bɔt dɛn na difrɛn plɔgin dɛn.
Semweso, sɔm sɔs Sass vɛriɔbul dɛn fɔ ɔfkanvas in stayl ɛn dimɛnshɔn dɛn de inhɛrit frɔm di modal in vɛriɔbul dɛn.
We dɛn sho am, ɔfkanvas gɛt difɔlt bakdrop we yu kin klik fɔ ayd di ɔfkanvas.
Semweso lɛk modals, na wan ɔfkanvas nɔmɔ dɛn kin sho wan tɛm.

Hed dɛn de ɔp! Given aw CSS de handle animashɔn, yu nɔ go ebul fɔ yuz marginɔ translatepan wan .offcanvasɛlimɛnt. Bifo dat, yuz di klas as indipɛndɛnt wrap ɛlimɛnt.

Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Ɛgzampul dɛn

Di komponent dɛn we de na di ɔfkanvas

Dis dɔŋ ya na wan ɔfkanvas ɛgzampul we dɛn sho bay difɔlt (via .showon .offcanvas). Offcanvas inklud sɔpɔt fɔ wan hεda wit wan klos bɔtin ɛn wan opshɔnal bɔdi klas fɔ sɔm initial padding. Wi de advays yu fɔ put ɔfkanvas hεda dɛn wit dismis akshɔn ɛnitɛm we i pɔsibul, ɔ gi wan klia dismis akshɔn.

Kontinyu fɔ di ɔfkanvas de go ya. Yu kin put jɔs lɛk ɛni Bootstrap kɔmpɔnɛnt ɔ kɔstɔm ɛlimɛnt dɛn ya.

html

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Layf dɛmo

Yuz di bɔtin dɛn we de dɔŋ fɔ sho ɛn ayd wan ɔfkanvas ɛlimɛnt tru JavaSkript we de tɔgl di .showklas pan wan ɛlimɛnt wit di .offcanvasklas.

.offcanvasde ayd di tin dɛn we de insay (difɔlt) .
.offcanvas.showsho wetin de insay

Yu kin yuz wan link wit di hrefatribyut, ɔ wan bɔtin wit di data-bs-targetatribyut. Insay dɛn tu kes ya, data-bs-toggle="offcanvas"dɛn nid fɔ du di.

Link wit href

Sɔm tɛks as pleshɔlda. In rial layf yu kin gɛt di ɛlimɛnt dɛn we yu dɔn pik. Lɛk, tɛks, pikchɔ dɛn, list dɛn, ɛn ɔda tin dɛn.

html

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Di bɔdi we de skrol

Skrol di <body>elemɛnt nɔ de wok we yu si wan ɔfkanvas ɛn in bakdrop. Yuz di data-bs-scrollatribyut fɔ mek yu ebul fɔ <body>skrol.

Tray fɔ skrol di ɔda pat dɛn na di pej fɔ si dis opshɔn de wok.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Bɔdi skrol ɛn bakdrop

Yu kin ɛnabul bak fɔ <body>skrol wit bakdrop we yu kin si.

Tray fɔ skrol di ɔda pat dɛn na di pej fɔ si dis opshɔn de wok.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Statik bakgrɔn

We dɛn sɛt bakdrop to statik, di ɔfkanvas nɔ go lɔk we yu klik ausayd am.

A nɔ go klos if yu klik ausayd mi.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Dak ɔfkanvas

Dɛn ad am na v5.2.0

Chenj di apinɛns fɔ ɔfkanvas wit yutiliti fɔ bɛtɛ mach dɛn to difrɛn kɔntɛks dɛn lɛk dak navbar dɛn. Na ya wi ad .text-bg-darkto di .offcanvasɛn .btn-close-whiteto .btn-closefɔ prɔpa stayl wit wan dak ɔfkanvas. If yu gɛt drɔpdɔwn dɛn insay, tink bak bɔt fɔ ad .dropdown-menu-darkto .dropdown-menu.

Put ɔfkanvas kɔntinyu ya.

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Fɔ ansa

Dɛn ad am na v5.2.0

Rispɔnsiv ɔfkanvas klas dɛn de ayd kɔntinyu ausayd di viupɔt frɔm wan spɛsifikɛd brekpɔynt ɛn dɔŋ. Abov dat brekpoint, di tin dɛn we de insay go biev lɛk aw i kin bi. Fɔ ɛgzampul, i .offcanvas-lgde ayd di tin dɛn we de insay wan ɔfkanvas we de dɔŋ di brek pɔynt lg, bɔt i de sho di tin dɛn we de ɔp di lgbrek pɔynt.

Risayz yu brɔwza fɔ sho di ɔfkanvas tɔgl we de ansa.

Dis na tin dɛn we de insay wan .offcanvas-lg.

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Rispɔnsiv ɔfkanvas klas dɛn de akɔdin to ɛni brekpɔynt.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

Di ples we dɛn fɔ put am

No difɔlt ples nɔ de fɔ ɔfkanvas kɔmpɔnɛnt dɛn, so yu fɔ ad wan pan di modifya klas dɛn we de dɔŋ ya.

.offcanvas-startde put ɔfkanvas na di lɛft say na di say usay dɛn de si di tin dɛn (we dɛn sho ɔp)
.offcanvas-endde put ɔfkanvas na di rayt say na di say usay dɛn de si di pikchɔ
.offcanvas-topde put ɔfkanvas na di tap na di say we dɛn de si di pikchɔ
.offcanvas-bottomde put ɔfkanvas na di bɔt ɔf di viupɔt

Tray di ɛgzampul dɛn we de ɔp, rayt, ɛn dɔŋ dɔŋ ya.

...

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Di we aw pɔsin kin ebul fɔ go de

Bikɔs di ɔfkanvas panɛl na kɔnsɛptwal wan modal dayalɔg, mek shɔ se yu ad aria-labelledby="..."—rɛfrɛns di ɔfkanvas taytul—to .offcanvas. Notis se yu nɔ nid fɔ ad role="dialog"bikɔs wi dɔn ɔlrɛdi ad am bay JavaSkript.

CSS we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS variebul aprɔch, ɔfkanvas naw de yuz lokal CSS vɛriɔbul dɛn on .offcanvasfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass di vayriɔbul dɛn

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Aw fɔ yuz am

Di ɔfkanvas plɔgin de yuz sɔm klas ɛn atribyut dɛn fɔ handle di ebi liftin:

.offcanvasde ayd di tin dɛn we de insay
.offcanvas.showsho di tin dɛn we de insay
.offcanvas-startayd di ɔfkanvas na di lɛft
.offcanvas-endayd di ɔfkanvas na di rayt say
.offcanvas-topde ayd di ɔfkanvas we de ɔp
.offcanvas-bottomde ayd di ɔfkanvas we de dɔŋ

Ad wan dismis bɔtin wit di data-bs-dismiss="offcanvas"atribyut, we de mek di JavaSkript wok. Mek shɔ se yu yuz di <button>ɛlimɛnt wit am fɔ biev fayn akɔdin to ɔl di divays dɛn.

Via data atribyut dɛn

Toggle fɔ di wan dɛn we de

Ad data-bs-toggle="offcanvas"ɛn wan data-bs-targetɔ hrefto di ɛlimɛnt fɔ ɔtomɛtik asaynd kɔntrol fɔ wan ɔfkanvas ɛlimɛnt. Di data-bs-targetatribyut de aksept wan CSS sɛlɛktɔ fɔ aplay di ɔfkanvas to. Mek shɔ se yu ad di klas offcanvasto di ɔfkanvas ɛlimɛnt. If yu want fɔ mek i opin difɔlt, ad di ɔda klas show.

Pul

Yu kin ebul fɔ dismis wit di dataatribyut we de na wan bɔtin insay di ɔfkanvas lɛk aw dɛn sho dɔŋ ya:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

ɔ pan wan bɔtin we de na do na di ɔfkanvas yuz di data-bs-targetlɛk aw dɛn sho dɔŋ ya:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

Pan ɔl we dɛn sɔpɔt ɔl tu di we dɛn fɔ dismis ɔfkanvas, mɛmba se fɔ dismis frɔm ɔdasay na ɔfkanvas nɔ de mach di ARIA Ɔtorin Praktis Gɛd dayalɔg (modal) patɛn . Du dis pan yu yon risk.

Yu kin yuz JavaSkript fɔ yuz am

Enable manually wit:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Di tin dɛn we yu kin pik fɔ du

As opshɔn dɛn kin pas bay data atribyut ɔ JavaSkript, yu kin ad opshɔn nem to data-bs-, lɛk insay data-bs-animation="{value}". Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm “ camelCase ” to “ kebab-case ” we yu de pas di opshɔn dɛn tru data atribyut dɛn. Fɔ ɛgzampul, yuz data-bs-custom-class="beautifier"insted fɔ data-bs-customClass="beautifier".

As fɔ Bootstrap 5.2.0, ɔl di kɔmpɔnɛnt dɛn de sɔpɔt wan ɛkspirimɛnt rizɔv data atribyut data-bs-configwe kin os simpul kɔmpɔnɛnt kɔnfigyushɔn as JSON string. We wan ɛlimɛnt gɛt data-bs-config='{"delay":0, "title":123}'ɛn data-bs-title="456"atribyut, di fayn titlevalyu go bi 456ɛn di sɛpret data atribyut dɛn go ɔvalayz valyu dɛn we dɛn gi pan data-bs-config. Apat frɔm dat, di data atribyut dɛn we de naw ebul fɔ gɛt JSON valyu dɛn lɛk data-bs-delay='{"show":0,"hide":150}'.

Nem	Kayn	Balans	Tɔk bɔt
`backdrop`	boolean ɔ di string`static`	`true`	Put bakdrop pan bɔdi we ɔfkanvas opin. Ɔda we de fɔ du dat, spɛsifa `static`fɔ bakdrop we nɔ de lɔk di ɔfkanvas we yu klik.
`keyboard`	boolean we dɛn kɔl	`true`	Klos di ɔfkanvas we yu prɛs di ɛspɛk ki.
`scroll`	boolean we dɛn kɔl	`false`	Alaw fɔ skrol di bɔdi we di ɔfkanvas opin.

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ .

Aktiv yu kɔntinyu as ɔfkanvas ɛlimɛnt. Aksept wan opshɔnal opshɔn dɛn object.

Yu kin mek wan ɔfkanvas instans wit di kɔnstrɔkta, fɔ ɛgzampul:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

We	Tɔk bɔt
`getInstance`	Statik we de alaw yu fɔ gɛt di ɔfkanvas instans we gɛt fɔ du wit wan DOM ɛlimɛnt.
`getOrCreateInstance`	Statik we de alaw yu fɔ gɛt di ɔfkanvas instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we i nɔ bin initialize.
`hide`	Ayd wan ɔfkanvas ɛlimɛnt. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili ayd (dat na bifo di `hidden.bs.offcanvas`ivin apin).
`show`	Sho wan ɔfkanvas ɛlimɛnt. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili sho (dat na bifo di `shown.bs.offcanvas`ivin apin).
`toggle`	Toggles wan ɔfkanvas ɛlimɛnt fɔ sho ɔ ayd. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili sho ɔ ayd (dat na bifo di `shown.bs.offcanvas`ɔ `hidden.bs.offcanvas`ivin apin).

Di tin dɛn we kin apin

Bootstrap in ɔfkanvas klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay ɔfkanvas funkshɔnaliti.

Di kayn tin we apin	Tɔk bɔt
`hide.bs.offcanvas`	Dis ivent de faya wantɛm wantɛm we `hide`dɛn dɔn kɔl di we aw dɛn de du am.
`hidden.bs.offcanvas`	Dis ivent de faya we dɛn dɔn ayd wan ɔfkanvas ɛlimɛnt frɔm di yuza (go wet fɔ mek CSS transishɔn dɛn dɔn).
`hidePrevented.bs.offcanvas`	Dis ivent de faya we dɛn sho di ɔfkanvas, in bakdrop de `static`ɛn dɛn de du wan klik ausayd di ɔfkanvas. Di ivent kin faya bak we dɛn prɛs di ɛspɛk ki ɛn `keyboard`dɛn sɛt di opshɔn to `false`.
`show.bs.offcanvas`	Dis ivent de faya wantɛm wantɛm we dɛn kɔl di `show`instans mɛtɔd.
`shown.bs.offcanvas`	Dis ivent de faya we dɛn dɔn mek wan ɔfkanvas ɛlimɛnt fɔ si to di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Ɔfkanvas

Aw i de wok

Ɛgzampul dɛn

Di komponent dɛn we de na di ɔfkanvas

Ɔfkanvas

Layf dɛmo

Ɔfkanvas

Di bɔdi we de skrol

Offcanvas wit bɔdi skrol

Bɔdi skrol ɛn bakdrop

Bakgrɔn wit skrol

Statik bakgrɔn

Ɔfkanvas

Dak ɔfkanvas

Ɔfkanvas

Fɔ ansa

Rispɔnsiv ɔfkanvas

Di ples we dɛn fɔ put am

Ɔfkanvas na di tɔp

Offkanvas rayt

Offkanvas na di bottom

Di we aw pɔsin kin ebul fɔ go de

CSS we dɛn kɔl CSS

Di tin dɛn we kin chenj

Sass di vayriɔbul dɛn

Aw fɔ yuz am

Via data atribyut dɛn

Toggle fɔ di wan dɛn we de

Pul

Yu kin yuz JavaSkript fɔ yuz am

Di tin dɛn we yu kin pik fɔ du

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Di tin dɛn we kin apin