Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces
Retour au catalogue

Navigation, Menus & Composants UI

Menus animés, composants UI et anchor positioning.

Comment creer une navigation qui impressionne ? La navigation est le premier element avec lequel vos visiteurs interagissent : elle conditionne l'ensemble de leur experience. Ces 36 composants couvrent tous les patterns modernes : hamburger animes, mega-menus, sidebars coulissantes, tabs interactifs et breadcrumbs. Chaque composant est responsive, accessible au clavier et structure pour une integration rapide.

Utilisez un mega-menu pour vos sites e-commerce avec de nombreuses categories, une sidebar coulissante pour vos applications web, ou des tabs animes pour organiser du contenu dense sur une meme page. Les breadcrumbs ameliorent le SEO et l'orientation utilisateur, tandis que les hamburger animes apportent une touche de finition sur mobile.

Tout le code est fourni, documente et conforme aux standards d'accessibilite (navigation au clavier, attributs ARIA). Pas besoin de passer des jours a tester des combinaisons de media queries et de transitions : Effect.Labs reunit les meilleurs patterns de navigation, testes et optimises, pour accelerer vos developpements.

Accueil Services Contact

Underline Expand

Ligne qui s'étend depuis le centre.

CSS Center
Accueil Services Contact

Underline Slide

Ligne qui glisse de droite à gauche.

CSS Slide
Accueil Services Contact

Background Fill

Fond qui se remplit au survol.

CSS Fill
Accueil Services Contact

Bracket Hover

Crochets qui apparaissent au survol.

CSS Text

Cliquez pour animer

Hamburger Menu

Animation hamburger vers croix.

CSS Toggle
Home About Work

Pill Indicator

Indicateur animé qui suit la sélection.

JS Tab
Menu
Option 1
Option 2
Option 3

Dropdown Reveal

Menu déroulant avec animation fade/slide.

CSS Dropdown

Cliquez pour animer

Morphing Hamburger

Icone hamburger qui se transforme en X avec animation fluide.

CSS Morph
Dashboard Analytics Settings

Tab Slider

Onglets avec indicateur glissant qui suit l'onglet actif.

JS Slider

Breadcrumb Animated

Fil d'Ariane anime avec chevrons interactifs.

CSS Breadcrumb

Scrollez pour voir l'effet sticky header avec détection d'intersection.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.

Sticky Header Detection

Header sticky avec Intersection Observer qui détecte le scroll et change de style.

JS Sticky Observer
Accueil Services Contact

Custom Bezier Transition

Transition de couleur avec courbe cubic-bezier personnalisée pour un mouvement fluide.

CSS Bezier Smooth
Overview Features Pricing

Floating Indicator

Indicateur flottant avec transition cubic-bezier fluide. Inspiré de CTA Gallery.

JS Nav Smooth

Survolez pour révéler

Dashboard Analytics Settings Logout

Stagger Menu Reveal

Menu avec animation staggered - chaque item apparaît avec un délai progressif.

CSS Stagger Reveal
Contenu de la première section avec animation de hauteur fluide.
Deuxieme section avec du contenu different.
Troisieme et dernière section.

Accordion Basic

Sections extensibles avec animation de hauteur fluide. Plusieurs sections peuvent etre ouvertes.

CSS JS Interactive
Une seule section peut etre ouverte a la fois.
Ouvrir cette section ferme les autres.
Parfait pour les FAQ et menus.

Accordion Single

Une seule section ouverte a la fois. Les autres se ferment automatiquement.

CSS JS Exclusive
Bienvenue sur la page d'accueil. L'indicateur glisse en douceur.
Votre profil utilisateur. Animation fluide entre les onglets.
Paramètres de l'application. Transition elegante.

Tabs Animated

Onglets avec indicateur qui glisse entre les selections.

CSS JS Transition

Toast Success

Notification de succes verte avec animation de glissement. Disparait apres 3 secondes.

JS Animation Feedback

Toast Error

Notification d'erreur rouge pour alerter l'utilisateur. Auto-dismiss apres 3 secondes.

JS Animation Alert

Toast Stack

Plusieurs toasts s'empilent avec un espacement elegant.

JS Stack Queue

Skeleton Card

Placeholder de carte avec effet de scintillement pendant le chargement.

CSS Loading Shimmer

Skeleton Text

Placeholder de texte avec animation de chargement elegante.

CSS Loading Placeholder

Tooltip Fade

Infobulle qui apparait en fondu au survol.

CSS Hover Fade

Tooltip Arrow

Infobulle avec pointeur fleche et animation de levee.

CSS Hover Arrow

Modal Slide

Modal qui glisse depuis le bas de l'ecran avec overlay flou.

CSS JS Overlay

Dropdown Animated

Menu deroulant avec animation d'apparition en cascade.

CSS JS Stagger

Smart Tooltip System

Tooltips qui s'inversent automatiquement selon la position dans le viewport avec position-try-fallbacks.

CSS JS Anchor
A
B
C
D

Connected Nodes

Noeuds draggables connectés par des lignes SVG qui se mettent à jour en temps réel.

SVG JS Drag
✎ Modifier
♥ Favoris
↗ Partager

Floating Action Labels

Labels flottants ancrés aux boutons d'action qui apparaissent au survol avec repositionnement au scroll.

CSS Hover Position

Popover Menu Chain

Menus popover chainés avec sous-menus positionnés relativement au parent via le Popover API pattern.

JS Popover Menu
Le positionnement CSS ancré permet de lier un élément Note : anchor-name en CSS à un autre dans le DOM. Cela remplace les calculs JavaScript manuels Note : getBoundingClientRect() par une solution déclarative avec fallbacks automatiques Note : position-try-fallbacks .

Annotation Layer

Annotations flottantes ancrées à des zones de contenu spécifiques avec empilage intelligent.

CSS Hover Annotation
👤 3 En ligne
👤 12 Occupé
👤 99+ Absent

Dynamic Badge Positioning

Badges de notification ancrés aux coins des avatars, s'adaptant au redimensionnement.

CSS Badge Responsive
Profil
Messages
Paramètres
Étape 1/3
Accédez à votre profil et personnalisez votre avatar.

Guided Tour Spotlight

Onboarding pas-à-pas avec spotlight ancré aux éléments UI et indicateur fléché.

JS Tour Anchor
🖱 Clic droit ici

Context Menu

Menu contextuel positionné au curseur avec logique d'inversion aux bords du viewport.

JS Click Position
L'ancrage CSS est une spécification récente 1 [1] CSS Anchor Positioning, W3C Working Draft, 2024. qui permet de positionner un élément relativement à un autre 2 [2] Utilise anchor-name et position-anchor en CSS natif. sans JavaScript. Le support navigateur est en progression 3 [3] Chrome 125+, Edge 125+. Firefox et Safari en cours. .

Footnote Popover

Notes de bas de page académiques apparaissant en popover près des marqueurs de référence.

CSS Hover Popover
72%
Lun
53%
Mar
91%
Mer
38%
Jeu
65%
Ven

Chart Data Labels

Labels de données ancrés aux points du graphique avec évitement automatique des chevauchements.

CSS Hover DataViz

Questions frequentes

Comment creer un menu hamburger anime en CSS ? +

Utilisez 3 spans dans un bouton. Au clic, appliquez des transforms : le span du milieu disparait (opacity:0), le premier tourne de 45deg et le troisieme de -45deg. Utilisez transition: all 0.3s pour une animation fluide.

Comment faire un mega-menu en CSS ? +

Placez le mega-menu en position absolute sous l'item parent. Utilisez une div invisible (pseudo-element ::before) entre le lien et le menu pour eviter que le hover ne se perde. Animez l'apparition avec opacity et transform.

Quelle est la meilleure pratique pour un menu mobile ? +

Utilisez un panneau lateral (sidebar) qui glisse depuis la gauche ou la droite avec transform: translateX(). Ajoutez un overlay semi-transparent. Fermez au clic sur l'overlay, au bouton fermer et a la touche Echap. Bloquez le scroll du body.

Comment rendre un menu accessible au clavier ? +

Chaque item doit etre navigable avec Tab. Les sous-menus s'ouvrent avec Entree ou Fleche bas. Echap ferme le sous-menu. Ajoutez aria-expanded sur les boutons toggle et role=navigation sur le nav.

Comment creer des tabs animes en CSS ? +

Utilisez des boutons radio hidden (:checked) ou JavaScript pour gerer l'etat actif. Animez un indicateur (pseudo-element) sous l'onglet actif avec transition sur left et width. Le contenu change avec un fade ou un slide.

Categories similaires

🔘

Boutons

27 effets

 📝

Formulaires

20 effets

 🔧

Utilitaires

40 effets