OffCanvas er en bootstrap 5 -plugin for en sidefeltmeny som vises på skjermen fra venstre, høyre eller bunn som per brukerkrav. OffCanvas kan også brukes som en sekundær meny eller hovedmenyen, og den kan utløses med en knapp eller en lenke. Når sidefeltet utenfor lerreten utløses, blokkerer den siden fra alle slags interaksjoner, fordi når menyen avslører seg, gjemmer siden seg bak den.

Denne artikkelen vil gi en detaljert guide om:

• Hvordan lage offCanvas sidefelt
• Ulike posisjoner i offCanvas sidefelt

Hvordan lage offCanvas sidefelt

For å lage en offCanvas sidefelt, legg til .OffCanvas klasse i en div tag med sin posisjon som å avsløre .OffCanvas-start og en unik id. Etterpå, pakk denne diven rundt en div med klassen .OffCanvas-Header som inneholder sidefelttittelen med avskjedsknappen og en div med klassen .OffCanvas-kropp som inneholder innholdet i sidefeltet.

Til slutt, for å utløse offCanvas sidefeltbruk data-bs-toggle = ”OffCanvas” og Data-BS-Target = ”#id” For å koble sidefeltet med en knapp eller en lenke som ved å klikke avslører OffCanvas sidefelt:

Kode

Meny

Hjem
Om
Produkt
Kontakt oss
Innstillinger

OffCanvas sidefelt

Knappen nedenfor åpner offCanvas sidefelt.

Åpen

Slik lager du en offCanvas sidefelt i Bootstrap 5.

OffCanvas -posisjoner

OffCanvas sidefelt kan avsløres fra hvilken som helst kant av skjermen i henhold til brukerkrav. For å spesifisere offCanvas -posisjonen, bare legg til .OffCanvas-Start/End/Top/Bottom klasse med .OffCanvas klasse.

Start

.OffCanvas-start Klasse vil avsløre sidefeltet fra venstre side av siden.

Slutt

.OffCanvas-end Klasse vil avsløre sidefeltet fra høyre side av siden.

Topp

.OffCanvas-topp Klasse vil avsløre sidefeltet fra oversiden av siden.

Bunn

.OffCanvas-Bottom Klasse vil avsløre sidefeltet fra undersiden av siden.

Konklusjon

OffCanvas sidefelt opprettes ved å legge til .OffCanvas klasse til en div. Legg så til .OffCanvas-Start/End/Top/Bottom for å spesifisere sidefeltposisjonen og id attributt for å gi sidefeltet en unik ID. Etterpå pakker denne diven rundt en div med klassen .OffCanvas-Header som inneholder sidefelttittelen med avskjedsknappen og en div med klassen .OffCanvas-kropp som inneholder innholdet i sidefeltet. Nå for å utløse offcanvas -sidefeltbruken data-bs-toggle = ”OffCanvas” og Data-BS-Target = ”#id” For å koble sidefeltet med en knapp eller en lenke som ved å klikke avslører OffCanvas sidefelt.