Documentation

Documentation - Offcanvas.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Documentation - Offcanvas. +

Startup

Basic concepts

Utilities

Components

Offcanvas

Marssel integrates an offcanvas system to create sliding side panels from the edges of the screen. Ideal for navigation menus, filters, shopping carts or any secondary content.

Basic setup

The OffcanvasManager is automatically initialized:

const marssel = new Marssel();
// The OffcanvasManager is ready to use

HTML structure

An offcanvas consists of a trigger and a panel:

Preview

<button data-offcanvas-target="offcanvas-menu">
    Open menu
</button>

<div id="offcanvas-menu" class="offcanvas offcanvas-start">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title c-[black]">Menu</h5>
        <button class="offcanvas-close">&times;</button>
    </div>
    <div class="offcanvas-body">
        <p>Menu content</p>
    </div>
</div>

Positions available

Set the position with the appropriate classes:

<!-- From the left (default) -->
<div id="offcanvas-start" class="offcanvas offcanvas-start">
    <!-- Content -->
</div>

<!-- From the right -->
<div id="offcanvas-end" class="offcanvas offcanvas-end">
    <!-- Content -->
</div>

<!-- From the top -->
<div id="offcanvas-top" class="offcanvas offcanvas-top">
    <!-- Content -->
</div>

<!-- From the bottom -->
<div id="offcanvas-bottom" class="offcanvas offcanvas-bottom">
    <!-- Content -->
</div>

Scroll lock

Control page scrolling with data-offcanvas-lock-scroll:

<!-- With lock (default) -->
<button data-offcanvas-target="offcanvas-menu"
        data-offcanvas-lock-scroll="true">
    Open
</button>

<!-- Without locking -->
<button data-offcanvas-target="offcanvas-menu"
        data-offcanvas-lock-scroll="false">
    Open
</button>

JavaScript API

Control offcanvas programmatically:

// Show an offcanvas
marssel.offcanvasManager.show('offcanvas-id');

// Show without locking the scroll
marssel.offcanvasManager.show('offcanvas-id', false);

// Hide active offcanvas
marssel.offcanvasManager.hideActive();

// Create an offcanvas dynamically
marssel.offcanvasManager.create({
    id: 'new-offcanvas',
    title: 'Nouveau panneau',
    content: '<p>Contenu dynamique</p>',
    position: 'end' // 'start', 'end', 'top', 'bottom'
});

// Update content
marssel.offcanvasManager.update('offcanvas-id', {
    title: 'Nouveau titre',
    content: '<p>Nouveau contenu</p>'
});

// Delete an offcanvas
marssel.offcanvasManager.remove('offcanvas-id');

Custom Events

Listen to the opening and closing events:

// Opening event
document.getElementById('offcanvas-menu').addEventListener('offcanvas:shown', (e) => {
    console.log('Offcanvas ouvert');
    // Load data, etc.
});

// Closing event
document.getElementById('offcanvas-menu').addEventListener('offcanvas:hidden', (e) => {
    console.log('Offcanvas fermé');
    //Clean, save, etc.
});

Customizing styles

Style your offcanvas with Marssel classes:

<!-- Custom header -->
<div class="offcanvas-header---[bg-[gradient(135deg,_667eea_0%,_764ba2_100%)]+c-[ffffff]+border-[none]]">
    <h5 class="offcanvas-title---[font-size-[20px]+font-weight-[700]]">Title</h5>
    <button class="offcanvas-close---[c-[ffffff]+font-size-[28px]]">&times;</button>
</div>

<!-- Personalized bodysuit -->
<div class="offcanvas-body---[bg-[f8f9fa]+p-[24px]]">
    <p>Content</p>
</div>

Responsive offcanvas

Adapt the width according to the screen size:

<style>
.offcanvas-start,
.offcanvas-end {
    width: 300px;
}

@media (min-width: 768px) {
    .offcanvas-start,
    .offcanvas-end {
        width: 400px;
    }
}

@media (min-width: 1024px) {
    .offcanvas-start,
    .offcanvas-end {
        width: 500px;
    }
}
</style>

Complete example