hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


YAMM3 - Construire Megamenu pour Bootstrap 3

Il y a beaucoup d'avantages d'utilisation dans l'utilisation de megamenu sur une page Web. Avec megamenu, vous pouvez prendre le contrôle total de votre menu . Presque tous les éléments Web peuvent y être affectés. Certaines grandes entreprises ont même appliqué megamenu dans leur site Web. Amazon et Mashable par exemple. Amazon a un fond d'image dans son menu et Mashable utilise des vignettes d'image pour un menu plus attrayant.

Si vous avez travaillé avec Bootstrap, vous pouvez maintenant créer un mégamenu en un rien de temps avec cette nouvelle bibliothèque appelée Yamm de Geedmo.

Yamm3 ( Yet Another Megamenu ) est une bibliothèque CSS pour vous aider à construire un mégamenu dans Bootstrap 3 facilement. Le mégamenu fonctionne à la fois pour les mises en page réactives et fixes . Il couvre presque tous les éléments bootstrap à inclure dans la barre de navigation comme l'image, l'accordéon, la liste, la grille, la table, la forme et ainsi de suite.

Guide de base

Yamm3 utilise des CSS légers et purs. Pour commencer avec Yamm3, il vous suffit d' inclure la classe Yamm3 dont vous avez besoin dans votre balise HTML standard de la barre de navigation.

Avant de travailler avec Yamm3, la première étape consiste à inclure la bibliothèque de feuilles de style Yamm3 et Bootstrap dans la section head comme suit:

 ...  ... 

Et n'oubliez pas d' inclure également la bibliothèque jQuery et Bootstrap dans votre projet, soit dans la section head ou body, comme ceci:

 ... ... 

Veuillez noter que nous utilisons ici Bootstrap 3 et que la version minimale de jQuery requise est la version 1.9.0+ . Si vous utilisez toujours la version précédente de Bootstrap, nous vous recommandons de suivre le guide de la version précédente de Yamm.

Balisage HTML

Dans un premier temps, pour utiliser Yamm3, ajoutez d' .yamm classe .yamm en haut du balisage de la barre de navigation. Ensuite, vous pouvez ajouter votre balisage de menu dans la classe .dropdown-menu . Ce qui suit est un exemple de base.

Comme vous pouvez le voir, vous pouvez également utiliser le .yamm-content comme option pour envelopper le contenu avec un remplissage.

Essayons par exemple d'ajouter un menu accordéon dans notre barre de navigation. Remplacez le commentaire Votre menu va ici par le code suivant.

C'est un menu pliable.
C'est un menu pliable.

En appelant l'identificateur d' accordion et en utilisant une classe de panel-group pour le regroupement, vous pouvez créer un accordéon dans la barre de navigation. Et ainsi notre menu ressemblera à la capture d'écran ci-dessous:

Il y a beaucoup d'autres composants que vous pouvez ajouter dans la barre de navigation. L'auto-exploration des autres composants que vous pouvez implémenter peut être faite si vous téléchargez l'archive complète de Yamm3 et ouvrez le fichier index.html avec votre éditeur de code favori.

Javascript

Il y a un code javascript supplémentaire utilisé pour empêcher un menu fermé inattendu dans certains composants comme l'accordéon, les formulaires, etc. Il suffit d'inclure le code suivant dans votre section de tête ou de corps:

Conclusion

Yamm3 est un autre excellent produit tiers pour stimuler le développement de votre Twitter Bootstrap lors de la construction d'une barre de navigation attrayante. Vous avez juste besoin d'un peu d'effort pour explorer tous les composants d'implémentation, car il manque de support de documentation pour la création de divers composants .

Partagez votre opinion avec nous dans la section des commentaires ci-dessous.

Cheatsheets Fonds d'écran pour les concepteurs Web et les développeurs

Cheatsheets Fonds d'écran pour les concepteurs Web et les développeurs

Cheatsheets sont un bon moyen d' accéder rapidement à certaines informations utiles lorsque vous ne voulez pas entrer dans les détails. Des commandes de programmation aux raccourcis de Photoshop, les cheatsheets rendent votre travail plus commode. Et combien plus commode ce serait si vous pouvez avoir vos cheatsheets préférés en tant que beaux fonds d'écran .Eh bie

(Conseils techniques et de conception)

Développement d'applications: 10 meilleurs outils de suivi des bogues et des utilisateurs

Développement d'applications: 10 meilleurs outils de suivi des bogues et des utilisateurs

Bien que le suivi des bogues soit l'une des tâches les plus importantes lorsque votre application est encore en phase de développement, les problèmes peuvent encore augmenter lors de la phase de production après la mise en ligne de votre application. Dans le processus de "collecte de bogues", il peut également être utile de permettre à vos utilisateurs de vous donner un retour instantané ou de leur permettre de poser des questions s'ils ne comprennent pas le fonctionnement de votre application. Vos ut

(Conseils techniques et de conception)