Google Nexus thème WordPress

Ajouter par Fred Le

Catégorie(s): Thème Wordpress
 

wp_nexus_menu

 

 

Aujourd’hui, j’ai intégré le menu latéral de Google Nexus 7 dans un Thème Wordpress. Le menu glisse en deux parties, lorsque vous survolez l’icône du menu, il laisse apparaitre les icones de chaque page, puis en cliquant sur une icône le menu apparaitra complètement avec le nom des pages. J’ai utilisé un thème de base responsive design que j’ai développé pour créer mes thèmes et que vous pourrez personnaliser facilement.

Utilisation du thème

Une fois que vous avez activé le thème et que vous avez créé vos pages, pour ajouter une icône devant le nom de la page vous devez ajouter une classe css, pour activé les classes css personnalisées pour le menu : allez dans Apparence – Menus – Options de l’écran puis coché classes CSS :

2015-02-23_17h06_12

Puis dans classes CSS (facultatives) ajouté la classe de l’ icônes que vous voulez utiliser, pour les icônes j’ai intégrer Font Awesome qui laisse un large choix d’icônes voici le lien du site pour récupérer les classes : Icône Font Awesome 

Conclusion

Il m’a fallu 3 heures pour intégrer le menu de Google Nexus 7  à un Thème Wordpress et le résultat est plutôt bien réussi surtout pour les tablettes et Smartphones. L’animation du  menu est fluide et sympa et il ne demande pas beaucoup de ressources pas besoin de la librairie Jquery.  

Sources du projet

Codrops

Font Awesome