Header

La Composant Header est un composant JavaScript utilisé pour créer ou personnaliser l'en-tête d'un site web. JavaScript permet de créer des en-têtes personnalisés qui sont réactifs, animés ou ont d'autres fonctionnalités interactives.

Comment l'utiliser

Après importation du javascript, dans le html aller mettre le data-component. Créé le toggle pour le responsive.

# HTML
<div class="swiper" data-component="Carousel"></div>

# HTML
<header class="header" data-component="Header">
    <a href="index.html" class="header__brand">
        <img src="assets/images/" alt="TimTools" />
    </a>
    <nav class="nav-primary">
        <ul>
            <li>
               <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
            <li class="nav-right"></li>
            <li >
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>

        </ul>
    </nav>
    <button class="header__toggle js-toggle">
        <span></span>
        <span></span>
        <span></span>
    </button>
</header>

Pour voir comment ajouter la composante au JS

Variation

Ajouter data-limit = “limit” sur un élément pour que le header se cache une fois atteint.

Ajouter data-not-hiding="not-hiding" pour empêcher que le header se cache.

# HTML
data-not-hiding="not-hiding" // Va sur la balise header.
data-limit=”limit” // Va sur l'élément defini comme limit.

exemple avec data-not-hiding

exemple avec data-limit=”limit”

Animation Du header

Dans le fichier css du header, section nav-primary>ul vous pouvez modifier l’animation lorsque la navigation responsive est active.

Les classes d'états

-header-is-hidden(va cacher le header)

-is-scrolling-down(indique au css de reagire en fonction que le scroll va vers le bas)

-is-scrolling-up (indique au css de reagire en fonction que le scroll va vers le bas)

-js-toggle(fais activer activer la nav en responsive)