Comment créer des menus à onglets avec le Framework BootStrap 3

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Ce cours fait suite au précédent sur la création des menus avec le Framework BootStrap 3.

Ici vous allez apprendre à créer des menus à onglets et des menus verticaux.

Tout est dans la formation ci-dessus.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Comment créer des menus à onglets avec le Framework BootStrap 3

Bonjour à tous et bienvenu sur développement facile donc dans le cours précédent vous avez appris à créer des menus de navigation avec le framework BootStrap 3. On va aller plus loin dans la création de menu vous allez apprendre à créer des menus à onglets, des menus verticaux toujours avec le framework CSS BootStrap 3. Donc on va utiliser la simplicité de ce framework pour créer des applications Web qui s”affichent tout aussi bien sur n’importent quel périphérique mobile smartphones et tablettes et sur les ordinateurs et qui soient compatibles avec la majorité des navigateurs qui existe sur le marché.

Les menus avec et sans onglets

Une page web peut contenir des menus simple et c’est  ce que l’on va apprendre à faire ensemble donc il faut savoir que bootStrap 3 gère ce comportement toujours avec la classe nav que vous avez vu dans le cours précédent rappelez-vous. Donc il est possible de créer des menus avec onglets avec la classe nav-tabs et des menus sans onglet avec la classe nav-pills tout simplement. Donc par défaut les menus sont alignés à gauche et je vous ai expliqué pour un alignement sur la droite vous utilisait la classe pull-right comme on a vu également dans le cours précédent. Vous pouvez utiliser la classe nav-justified, c’est pour répartir le menu sur toute la largeur. Au lieu  qu’il ne prenne uniquement cette largeur sur un écran de bureau (ordinateur de bureau), vous pouvez lui dire prend toute la largeur disponible en rajoutant la classe nav-justified donc très très simple. Le framework BootStrap 3 est vraiment très simple, c’est un système de classe CSS qu’on rajoute dans des balises bouton, des balises a, des blaises div, …

Les menus verticaux

Donc vous avez également la classe nav-stacked, ça va vous permettre de créer des menus verticaux, après suivant vos préférences, ils y en qui préfèrent des menus horizontaux d’autres des menus verticaux donc tout ça, ça dépend de votre site Web de vos préférences personnelles.

Exemple d’application

Donc on voit ensemble un exemple de code source. Ça c’est un menu avec système d’onglets donc moi j’ai laissé le défilement sur toute la page parce que c’est plus simple pour vous expliquer. Bien évidemment dans le menu à onglets et bien vous allez définir … au lieu que ce soit des ancre … ce sera des pages différentes que vous allez appeler. Donc là c’est un affichage sur mobile. C’est moins pratique, vous voyez, que un affichage sur ordinateur de bureau et on prend toute la largeur puisqu’on a utilisé l’option pour afficher le menu sur toute la largeur, alors c’est justified voilà. Cette classe CSS permet d’afficher le menu sur toute la largeur, si je l’enlève vous allez voir une différence d’affichage, vous voyez il ne prend pas beaucoup de place. C’est moyen, alors je préfère le laisser. C’est plus propre en fait. Donc tout ça c’est le système de menu, après vous avez le menu sans les onglets, donc là il n’y a plus d’onglets. Bien évidemment le bouton changera de couleur, vous avez ici, active. Je vous en ai peut-être pas parler, active ça permet de définir par défaut le bouton qui sera actif donc si je le change par exemple je vais le mettre ici, là je l’enlève, « Nos formation » sera actif par défaut donc il n’y a plus besoin … je vais juste mettre la classe pull-right, voilà, donc avec un alignement à droite pour la classe pull-right donc active par défaut c’est le menu « Nos formations ». Donc ça c’est encore un autre exemple de menu et les menus verticaux, donc ici. Bon j’ai toujours mis le défilement sur la page bien évidemment, après ce sera à vous de mettre des liens HTML et avec toujours active, donc active on peut la changer, on va la mettre sur « Nos formations » donc il sera « Nos formations » par défaut, qui sera activé ici. Donc il suffit d’utiliser nav-stacked pour que le menu soit afficher horizontalement, donc verticale, menu sans onglet, menu avec onglets et menu vertical.

Votre plan d’actions !

A vous de jouer maintenant pour créer des sites Internet qui soit compatible avec les smartphones, les tablettes, les ordinateurs de bureau. Vous retrouvez sous ce code source, sous cette vidéo, pardon, le code source qui va avec ce cours, donc vous pouvez bien évidemment réutiliser ce code source. Ça va vous aider à concevoir vos menus de navigation. Récemment je discutais avec un ami entrepreneur qui a créé une application pour les commerciaux et donc il avait ce souci des fois les commerciaux ils se connectent avec leur tablette ils font une commande avec leur smartphone ou une commande avec leur ordinateur de bureau, et bien il a utilisé le framework BootStrap 3 pour garantir l’affichage quel que soit le périphérique du commercial utilisé. Donc c’est très, très, utilisé dans le monde professionnel se framework. Donc je vous invite à regarder la deuxième vidéo, elle va particulièrement vous intéresser si vous voulez aller beaucoup plus loin avec HTML 5, CSS 3, et le framework BootSrap 3, rendez-vous, regardez bien cette deuxième vidéo pour tout savoir comment utiliser le potentiel de HTML 5, CSS 3 et du framework CSS BootStrap 3. Alors comment accéder à la deuxième vidéo ? à la fin de cette vidéo, il y a un lien qui va s’afficher et la vidéo deviendra cliquable, il suffit de cliquer sur le lien sur cette vidéo et vous allez pouvoir consulter la deuxième vidéo donc je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Exemple de différents menus réalisés avec BootStrap 3

Retrouvez le code source commenté d’implémentation des menus avec le framework BootStrap 3

Downloads

  • Exemple de menus BootStrap 3
    Exemple de menus BootStrap 3

    Code source avec un exemple de menus à onglets fait avec BootStrap 3
    Ce fichier contient également le Framework BootStrap version 3.2.0, jQuery version 1.10.2 et Font Awesome version 4.1.0

Partagez vos plus beaux menus

Utilisez la zone commentaire pour nous montrez vos plus belles réalisations de menus avec le framework BootStrap 3

Créez des Sites Web Magnifiques avec la Formation Gratuite CSS3 Facile !

Apprenez comment utiliser les nouveautés de CSS3, les balises supplémentaires, la gestion simplifiée des blocs div...