Documentation

Documentation - Header.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Documentation - Header. +

Démarrage

Concepts de base

Utilitaires

Composants

Header

Marssel intègre un système de header (en-tête) flexible et responsive avec support de menus mobiles adaptatifs, positionnement configurable et gestion automatique des breakpoints.

Configuration de base

Le HeaderManager est automatiquement initialisé :

const marssel = new Marssel();
// Le HeaderManager est prêt à l'emploi

Configuration de base

Le HeaderManager est automatiquement initialisé :

<header id="main-header" class="header">
    <div class="header-container">
        <div class="header-logo">
            <a href="#">
                <img src="https://placehold.co/120x40" alt="Logo">
            </a>
        </div>

        <nav class="header-navbar">
            <ul class="nav">
                <li class="nav-item"><a href="#" class="nav-link">Accueil</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Produits</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
            </ul>
        </nav>

        <div class="header-actions">
            <a href="#" class="btn">Connexion</a>
            <a href="#" class="btn">Inscription</a>
        </div>

        <button class="menu-toggle" data-toggle="menu">
            <span></span>
            <span></span>
            <span></span>
        </button>

    </div>
</header>

Options

Contrôlez la disposition des éléments, le comportement du menu mobile avec des attributs data :

<header id="main-header" class="header"
data-logo-position="left|center|right"
data-nav-position="left|center|right"
data-action-position="left|center|right"
data-mobile-menu-type="sidebar|below|fullpage"
data-sidebar-position="left|right"
data-sidebar-style="overlay"
data-mobile-breakpoint="xl"
>

Détail des configurations :

    Logo Position (data-logo-position)

        left : Aligne le logo à gauche
        center : Centre le logo
        right : Aligne le logo à droite

    Navigation Position (data-nav-position)

        left : Aligne la navigation à gauche
        center : Centre la navigation
        right : Aligne la navigation à droite

    Actions Position (data-action-position)

        left : Aligne les boutons d'action à gauche
        center : Centre les actions
        right : Aligne les actions à droite (par défaut)

    Mobile Menu Type (data-mobile-menu-type)

        sidebar : Menu latéral glissant
        below : Menu sous le header
        fullpage : Menu plein écran

    Sidebar Position (data-sidebar-position)
    (Uniquement pour le type sidebar)

        left : Menu mobile sort de la gauche
        right : Menu mobile sort de la droite

    Sidebar Style (data-sidebar-style)
    (Option supplémentaire visible dans le code)
    overlay : Superposition semi-transparente (par défaut)

    Menu Mobile (data-mobile-breakpoint)
    xs, sm, md, lg, xl, xxl

    <!-- Menu mobile qui sera généré par le HeaderManager -->

    <!-- Overlay pour le menu mobile -->

Header avec logo centré

Exemple d'un header avec logo au centre :

<header class="header"
    data-logo-position="center"
    data-nav-position="left"
    data-action-position="right">
    <div class="header-container">
        <nav class="header-navbar">
            <ul class="nav">
                <li class="nav-item"><a href="#" class="nav-link">Accueil</a></li>
                <li class="nav-item"><a href="#" class="nav-link">À propos</a></li>
            </ul>
        </nav>

        <div class="header-logo">
            <a href="/">
                <img src="https://placehold.co/120x40" alt="Logo" class="h-[40px]">
            </a>
        </div>

        <div class="header-actions">
            <button class="bg-[2563eb] c-[fff] p-[10px_20px] rounded-[6px] border-[none]">
                Contact
            </button>
        </div>

        <button class="menu-toggle" data-toggle="menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</header>

Header transparent

Créez un header transparent qui se fixe au scroll :

<header class="header-transparent---[bg-[transparent]+pos-[fixed]+top-[0]+left-[0]+right-[0]+z-[1000]+transition-[all_0.3s]]"
        data-logo-position="left"
        data-nav-position="center"
        data-action-position="right">
    <div class="header-container">
        <nav class="header-navbar">
            <ul class="nav">
                <li class="nav-item"><a href="#" class="nav-link">Accueil</a></li>
                <li class="nav-item"><a href="#" class="nav-link">À propos</a></li>
            </ul>
        </nav>

        <div class="header-logo">
            <a href="/">
                <img src="https://placehold.co/120x40" alt="Logo" class="h-[40px]">
            </a>
        </div>

        <div class="header-actions">
            <button class="bg-[2563eb] c-[fff] p-[10px_20px] rounded-[6px] border-[none]">
                Contact
            </button>
        </div>

        <button class="menu-toggle" data-toggle="menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</header>

<script>
    window.addEventListener('scroll', () => {
    const header = document.querySelector('.header-transparent');
        if (window.scrollY > 50) {
            header.classList.add('bg-[ffffff]', 'shadow-[0_2px_10px_rgba(0_0_0_0.1)]');
        } else {
            header.classList.remove('bg-[ffffff]', 'shadow-[0_2px_10px_rgba(0_0_0_0.1)]');
        }
    });
</script>

Header avec dropdowns

Intégrez des menus déroulants dans la navigation :

<header class="header">
    <div class="header-container">
        <div class="header-logo">
            <a href="/">Logo</a>
        </div>

        <nav class="header-navbar">
            <ul class="nav">
                <li class="nav-item"><a href="#" class="nav-link">Accueil</a></li>
                <li class="nav-item dropdown" data-dropdown>
                    <a href="#" class="nav-link dropdown-toggle">
                        Produits
                        <span class="icon-[chevron-down] icon-size-[small]"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="dropdown-item">Produit 1</a></li>
                        <li><a href="#" class="dropdown-item">Produit 2</a></li>
                        <li><a href="#" class="dropdown-item">Produit 3</a></li>
                    </ul>
                </li>

                <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
            </ul>
        </nav>

        <button class="menu-toggle" data-toggle="menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</header>

API JavaScript

Contrôlez le header programmatiquement. Le menu mobile s'active automatiquement en dessous de lg (992px). :

// Ouvrir le menu mobile
marssel.headerManager.openMobileMenu('main-header');

// Fermer le menu mobile
marssel.headerManager.closeMobileMenu('main-header');

// Basculer le menu mobile
marssel.headerManager.toggleMobileMenu('main-header');

// Mettre à jour la configuration
marssel.headerManager.updateHeaderConfig('main-header', {
    logoPosition: 'center',
    navPosition: 'left',
    mobileMenuType: 'fullpage'
});

// Obtenir la configuration actuelle
const config = marssel.headerManager.getHeaderConfig('main-header');
console.log(config);

// Vérifier si un menu est ouvert
if (marssel.headerManager.isAnyMenuOpen) {
    console.log('Un menu est ouvert');
}

// Obtenir le breakpoint actuel
const breakpoint = marssel.headerManager.getCurrentBreakpoint();
console.log(breakpoint); // 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'

// Vérifier si on est en mode mobile
if (marssel.headerManager.isMobileBreakpoint()) {
    console.log('Mode mobile');
}

```
## Breakpoints
Le header s'adapte automatiquement selon les breakpoints :
```
xs:  < 576px   (Mobile portrait)
sm:  576px     (Mobile paysage)
md:  768px     (Tablette)
lg:  992px     (Desktop)
xl:  1200px    (Large desktop)
xxl: 1400px    (Extra large)

Gestion du scroll

Le header verrouille automatiquement le scroll de la page quand les menus sidebar ou fullpage sont ouverts.

← Précédent Table

Suivant → Footer

Documentation - Header.

Démarrage

Concepts de base

Utilitaires

Composants

Header

Configuration de base

Configuration de base

Options

Header avec logo centré

Header transparent

Header avec dropdowns

API JavaScript

Gestion du scroll

Réglages des cookies