09
MARS

Circulus.svg - Un menu circulaire animé en SVG et Javascript

Publié le 09/03/15 à 09h16 par DJo

Circulus.svg est un outil vous permettant de générer facilement des menus circulaires SVG avec ou sans animation Javascript.

Circulus.svg est un outil vous permettant de générer facilement des menus circulaires avec ou sans animation Javascript.

On ne vous parle plus du SVG et de ses inombrables possibilités pour rendre votre site plus design et moderne...

Circulus.svg est encore un bel exemple de SVG réussi qui vous permettra de créer des menus ergonomiques avec des effets qui donneront tout de suite du cachet à vos pages.

Menu circulaire SVG

Grâce à cette ressource, vous aurez la possibilité de créer un menu circulaire ou semi circulaire.

Couplé à une icone représentant l'action à déclencher au clic, ces menus rajoutent une couche d'UX fort sympathique, surtout lorsque vous n'avez pas forcément beaucoup d'espace pour présenter les différentes actions possibles.

Animation d'ouverture de menu demi circulaire

A l'aide d'effets Javascript (plusieurs exemples sont disponibles sur le site de la ressource), vous pourrez facilement animer l'ouverture et la fermeture du menu. Travaillez l'elasticité du menu grâce au SVG pour un rendu du plus bel effet.

Côté menu, il est facilement paramétrable à l'aide du configurateur en ligne dans lequel vous pourrez définir:

  • La forme du menu: Demi cercle ou cercle entier
  • La forme des items: Pizza ou cake ?
  • Ajustement de taille, de nombre d'items...
  • Positionnement et taille de l'icone
  • Etc

Configuration du menu circulaire SVG

Une fois satisfait du rendu, vous n'aurez plus qu'à télécharger le code HTML/SVG généré.

A tester !

 

Site Officiel

Baraguiné par le 12/03/15 à 11h59
Intéressant pour faire un sélecteur de couleur :)

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web