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.

Groupe d'accordéon Article # 1 
 C'est un menu pliable. 
Groupe d'accordéon Article # 2 
 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.

Créez rapidement des e-mails réactifs avec MJML Framework

Concevoir et coder un bulletin d'information prend du temps. Vous pouvez trouver beaucoup de conseils de conception, mais le codage de votre bulletin d'information dans un modèle est la partie la plus difficile.C'est là que le cadre MJML entre en jeu. C'est l'un des meilleurs frameworks d'e-mails gratuits et il compile en HTML / CSS pur, qui fonctionne pour tous les clients de messagerie .L

(Conseils techniques et de conception)

Financement de votre entreprise: autofinancement vs recherche d'investisseurs

L'un des principaux problèmes dans le démarrage de votre propre entreprise est de savoir comment commencer et ensuite rester à flot financièrement. Il y a essentiellement deux façons de le faire: financer l'entreprise vous-même ou convaincre les investisseurs de la financer pour vous .Beaucoup d'entrepreneurs en démarrage croient qu'il est sage d'obtenir des investisseurs qui s'intéresseront à votre projet plutôt que d'y investir vos propres fonds. Le finan

(Conseils techniques et de conception)