Purecssmenu : créer un menu css multi level

Par Laurent | 11.08.09 19:33 | 2 commentaire(s) | programmation

Voici un service web intéressant, qui va vous permettre de créer un menu css (Cascading style sheets) feuilles de style en cascade à plusieurs niveaux, vraiment facilement.Un menu css qui sera téléchargeable avec le code html et css disponible dans le fichier.
Vous pourrez customiser le menu à votre guise, en changeant les noms, les couleurs du texte, du survol...en ajoutant des rubriques...

Comment fonctionne Purecssmenu ?


Sur la gauche de la page, vous verrez 3 onglets :

- Items
En allant sur cet onglet, vous allez pouvoir ajouter,retirer, ou supprimer, un élément de l'architecture du menu.

Effectivement, le menu css est présenté sous forme "d'arbre" avec une racine et des branches...(comme dans l'explorateur par exemple)
L'icone + permet de deployer le noeud et ainsi faire apparaitre les éléments constituants le ou les niveaux de la rubrique sélectionné.

Une fois cliqué sur ce +, un - apparait indiquant que le noeud est déployé


Ainsi si vous voyez un + ou - dans cette sous-rubrique par exemple pour : Menu Features, celà indique que cette sous-rubrique possède un autre niveau qui sera visible en allant sur le +, se transformant en -

Cet exemple engendre un menu a 2 niveaux dont on peut voir l'aperçu (Preview):


Ainsi par le biais de cet onglet Items il est possible de changer l'architecture du menu à votre guise en allant sur les icones

Respectivement :
- ajouter un item(rubrique)
- ajouter une sous-rubrique
- effacer
- effacer tout le menu

Vous pouvez éditer le titre de la rubrique ou sous-rubrique en allant sur le texte à changer ex : Item#41et il apparait comme ceci :


- Parameters
Cet onglet constitue la configuration du texte (surligner, font,....) et les couleurs lorsque l'on survole le menu (hover) ou lorsque l'on ne survole pas le menu.

- Templates
Vous trouverez de nombreux exemples (menus verticaux, et horizontaux) pré-générés de menu que vous pourrez sélectionner et ensuite customiser.

L'aperçu (Preview) au centre de la page met à jour automatiquement le menu lorsque vous ferez des modifications.

Une fois le menu réalisé pour le récupérer sur son ordinateur, il faut aller sur le bouton Download.Vous recevrez un fichier zippé, avec le fichier contenant le code html et css.