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