Chargement…
Menu Avec Barre de Progression et Défilement

Menu Avec Barre de Progression et Défilement



CSS Tutoriels : Créer Un Menu Avec Barre de Progression et Défilement. L’animation se déclenche quand en utilise le curseur de la souris ou la petite barre à droite.

Menu Avec Barre de Progression et Défilement Horizontale

Menu Avec Barre de Progression et Défilement

Démonstration Télécharger Code Source

C’est un menu avec curseur / timeline, un cadran qui glisse et des pages qui défilent. Vous pouvez aussi cliquer sur chaque lien du menu, ce qui va faire glisser et défiler la page sélectionnée.

Le Code HTML

Chaque élément du menu est relier à une page identifier dans des DIV :

Le CSS

Le css de notre menu est très simple, en utilise une animation Transition pour déclencher le défilement des pages :

Puis en utilise un script jQuery pour gèrer le bon défilement des pages et pour effectuer quelques calculs pour positionner avec précision le bouton de curseur :

Voilà!



Laisser un commentaire