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 ✨ Passer Premium
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

Underline Slide

Ligne qui glisse de droite à gauche.

CSS Slide

Background Fill

Fond qui se remplit au survol.

CSS Fill

Bracket Hover

Crochets qui apparaissent au survol.

CSS Text

Hamburger Menu

Animation hamburger vers croix.

CSS Toggle

Pill Indicator

Indicateur animé qui suit la sélection.

JS Tab

Dropdown Reveal

Menu déroulant avec animation fade/slide.

CSS Dropdown

Morphing Hamburger

Icone hamburger qui se transforme en X avec animation fluide.

CSS Morph

Tab Slider

Onglets avec indicateur glissant qui suit l'onglet actif.

JS Slider

Breadcrumb Animated

Fil d'Ariane anime avec chevrons interactifs.

CSS Breadcrumb

Sticky Header Detection

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

JS Sticky Observer

Custom Bezier Transition

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

CSS Bezier Smooth

Floating Indicator

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

JS Nav Smooth

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

Accordion Single

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

CSS JS Exclusive

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

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

Annotation Layer

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

CSS Hover Annotation

Dynamic Badge Positioning

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

CSS Badge Responsive

Guided Tour Spotlight

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

JS Tour Anchor

Context Menu

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

JS Click Position

Footnote Popover

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

CSS Hover Popover

Chart Data Labels

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

CSS Hover DataViz

Command Palette ⌘K

Palette de commandes ⌘K construite sur l'API popover native : recherche filtrante, navigation clavier, light-dismiss. Le pattern SaaS moderne par excellence, sans usine à gaz JS.

💡 Idéal pour : navigation rapide d'app SaaS, recherche globale, raccourcis power-user, menu d'actions, back-office.

Popover API ⌘K Navigation Premium

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