Navigations

Les éléments présentés ici on été produits à partir des zonings des 3 sites.

Cependant les éléments du menu de navigation principale et du header du site doivent être adaptés en fonction des besoins.

Avant de présenter la navigation principale et le footer, voici le composant menu qui en est une pièce importante.

Tous les menus des barre de navigation et du footer sont basés dessus et ont si besoin une classe spéciale supplémentaire : menu-connexion, menu-site...

<ul class="menu">
    <li>
        <a class="menu__link">

class="menu"

See the Pen menu - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.


                        

See the Pen Navigation principale - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

See the Pen Navigation principale - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

Lanceur d'appli

See the Pen lanceur d'appli - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

Header

Le header est basé sur la structure d'hero.

Au scroll (sauf sur la page d'accueil), ce header passe de l'état is-expanded à l'état is-shrinked

fw-section
hero
header-site
is-expanded / is-shrinked

See the Pen header site - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

See the Pen header site - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

>

See the Pen footer site - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

Pagination

<ul class="pagination list">
    <li>
        <span class="pagination__link pagination__keyword">
    <li>
        <span class="pagination__link is-active">
                            

class="pagination"

See the Pen pagination - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.


                        

<ul class="breadcrumb list">
    <li>
      <a class="breadcrumb__link">

class="breadcrumb"

See the Pen breadcrumb - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

breadcrumb 
list

breadcrumb__link

Panneaux de menu

class="panel"

See the Pen panel - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

panel
panel__title
panel__section
panel__header
panel__content