Apprenez à créer de magnifiques menus de navigation très pratiques avec le Framework BootStrap 3.
Vos menus s’adapteront aux périphériques de l’utilisateur. Et qu’ils soient classiques ou déroulant vous pourrez entièrement les personnaliser.
Vous pourrez également les fixer au navigateur pour qu’ils suivent toujours l’utilisateur.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer des menus de navigation avec le Framework BootStrap 3
Bonjour à tous et bienvenu sur développement facile.
Donc dans cette nouvelle vidéo vous allez apprendre à créer des menus de navigation avec le framework CSS BootStrap 3. Dans les cours précédents vous avez déjà appris à créer des menus à partir des listes et également des menus à partir des boutons et là on va aller un peu plus loin pour créer les menus de navigation qui sont prévus avec le framework BootStrap.
Les menus de navigation
Donc comme je vous l’ai dit BootStrap 3 permet de créer des menus qui s’adaptent automatiquement en fonction de la largeur du périphérique de l’utilisateur. Pour créer un menu c’est très simple, il suffit d’utilisé la balise HTML 5 nav qui est dédié justement au menu de navigation et après vous avez les classes nv-bar, navbar-header pour l’entête. Donc pour la mise en forme vous avez le choix entre deux sous-classes navbar-default avec un arrière-plan gris et un texte en gris foncé ou navbar-inverse avec un arrière-plan noir et le texte en gris. C’est à vous de choisir. Après bien évidemment vous pouvez utiliser des classes CSS pour personnaliser et adapter la couleur, le menu en fonction de votre site Internet. Donc par défaut le menu définit avec la classe navbar un positionnement relatif. Avec BootStrap 3 vous avez la possibilité si l’internaute défile la page le menu on ne le verra pas, ce n’est pas très pratique surtout sur les périphéries avec un petit écran, pas du tout pratique. On peut fixer le menu tout en haut de l’écran, ça fait que quand l’utilisateur se déplace sur la page, il verra toujours le menu donc c’est très pratique pour lui. Donc vous utiliser la classe navbar-fixed-top pour le fixer en haut, ou navbar-fixed-bottom pour le fixer en bas. Ensuite vous avez la classe pull-right. Si vous l’appliquez la balise ul, ça permet de décavé les éléments du menu donc au-dessus vers la droite. Vous avez la classe navbar-btn, vous pouvez ajouter une balise bouton, ça va vous permettre d’afficher un bouton dans votre menu de navigation. Souvent dans le menu de navigation en haut on a le bouton connecter, ou alors vous pouvez ajouter du texte informatif en haut dans votre menu avec la classe navbar-text. Et tout ça ce sera très ergonomique et ça va s’adapter bien évidemment en fonction de la largeur de l’écran du périphérique de l’utilisateur et ça reste compatible avec la majorité des navigateurs Internet. Vous pouvez également ajouter une zone de recherche dans votre menu. Souvent, notamment sur les blogs soit on voit le bouton de connexion, soit une zone de recherche. Il suffit utiliser la classe form dans une balise … non pardon … la classe navbar-form dans une balise form pour créer un formulaire vous rajoutez la classe CSS navbar-form et ça va vous permettre de … ensuite vous ajoutez votre élément le formulaire de recherche, comme on a vu dans les cours précédents. Vous pouvez créer un menu déroulant bien évidemment dans votre menu de navigation avec la fameuse classe CSS dropdown, on l’a vue ensemble dans plusieurs cours donc je vais passer très vite, vous savez l’utiliser, vous pouvez utiliser dropdown-toggle pour gérer l’aspect des éléments cliquer focus, hover, … Et vous avez la classe caret, ça permet d’afficher une flèche pour montrer le menu déroulant de la également, dans les cours et dans lorsque pour créer des menus déroulant, on l’a également vu dans les cours précédents lorsque l’on a créé des menus déroulants à partir des boutons ou des listes. Et donc dropdown-menu ça contient le contenu du menu déroulant. On va voir tout ça à travers un exemple de code source.
Vous avez la possibilité de créer un menu qui se réduit, c’est-à-dire le menu est réduit quand l’utilisateur clique dessus, il se déroule automatiquement donc c’est pratique sur les périphériques mobile. Vous avez une petite icône avec des petites barres et en fait quand l’utilisateur clique dessus, ça déroule et ça affiche le menu. C’est discret, ça prend pas beaucoup de place à l’écran donc c’est l’idéal pour les smartphones, ou les tablettes. Donc il suffit d’utiliser 2 attributs data-toggle et avec les éléments data-target.
Menu avec une page « dynamique »
Vous avez sûrement rencontré des pages web avec des sections. C’est une page Web énorme et dedans quand vous cliquez sur le menu ça se déplace dans la page Web a une certaine section … tutoriels …vidéo … vous contactez … C’est de plus en plus à la mode, donc des grandes pages Web avec le menu qui se déplace automatiquement dans la page Web, il reste tout le temps fixe au-dessus. BootStrap 3 permet de reproduire très simplement ce comportement en fait.
Exemple d’application
On va voir ça ressemble à travers un exemple de code source. Donc là, vous avez votre menu, le texte informatif et le menu déroulant ici avec la zone rechercher. Donc comment on créer ça ?
La balise nav avec la classe navbar-inverse pour définir la couleur, vous avez la couleur que vous souhaitez en fonction de votre application Web bien évidemment. Ensuite il y a le texte, le header, l’entête, le titre, vous pouvez mettre un lien en principe ça renvoi vers l’accueil du site, un texte informatif donc dans une balise p avec navbar-text et là, on l’aligne à droite, le menu donc il est aligné à droite. Donc si j’agrandis la page, vous voyez, il est aligné à droite, tout simplement, avec les éléments du menu tutoriel information, formation, … Et après le menu déroulant donc ça avec dropdown, il est où dropdown ? il est là, menu déroulant, dropdown … hop … le menu déroulant et votre zone de recherche avec form-group et navbar-form donc rechercher ici, vous pouvez rechercher un élément et cliquer sur le bouton rechercher. Bien évidemment je n’ai mis aucune action je n’ai pas associé d’actions aux boutons, ce sera à vous en fonction de votre site Web, vous allez appeler une page donc soit vous créez l’action avec jQuery, un script jQuery, ou soit vous appelez une URL, donc ça, ç ‘est à vous voir en fonction de comment vous gérez la chose avec le form vous pouvez appeler une autre URL. Enfin je vous renvoie comme d’habitude à la formation HTML 5 professionnelle donc une formation gratuite pour apprendre à utiliser les formulaires HTML 5. Il suffit d’aller dans une vidéo sur développement facile, vous choisissez n’importent quel cours HTML 5 en dessous vous avez un formulaire, vous renseignez votre prénom et votre e-mail et automatiquement vous recevrez les cours professionnels sur HTML 5 du niveau débutants, jusqu’au niveau professionnel. Donc vous verrez comment utiliser le bouton submit et les formulaires dans le détail. Le menu déroulant, voilà, tout simplement et ensuite le container, c’est à dire la zone, le texte, là vous pouvez rajouter du texte, voilà, du texte dans la description du contenu, tout simplement. Je recharge la page. Ensuite, je vous ai mis l’exemple pour les téléphones portables. Alors, ça marche comment sur les Smartphones ? Et bien il suffit d’utiliser … voilà on peut défiler donc vous avez une grande page en pratique sur les nouveaux sites donc on peut défiler comme ça directement et donc avec l’affichage, le menu sur les mobiles, vous le refermez et vous naviguez par exemple pour aller à « vos questions » … on arrive, on le referme, on est sur « Vos questions » tout simplement. Donc comment on fait ce mini menu sur mobile ? navbar-toggle pour créer un menu de navigation sur mobile avec defil le défilement, il y a la balise body à modifier, voilà, pour qu’il y ai un scroll de défilement sur la balise body. A chaque fois que vous cliquez ici, ça défile sur la page comme vous le voyez. Donc là on sait qu’on est au niveau des tutoriels, tout simplement. Donc c’est aussi simple que ça d’utiliser le système de menu. Donc je répète le défilement, pensez à faire correspondre les ids de défilement, modifiez la balise body après c’est un menu classique et pour le menu sur mobile ç’est avec le menu toggle, donc ça permet en fonction de la taille du périphériques, le menu se transforme, voilà, tout simplement le périphérique est agrandi. Donc c’est vraiment génial BootStrap pour créer des menus. Donc la en fait on utilise lead, c’est pour le résumé. Je vous renvoie dans les cours précédents sur le framework BootStrap pour utiliser le système de résumé et en dessous de texte, et là le titre et donc id question, ici vous faites un renvoi vers le lien #question. #formation renvoi ici et c’est pour ça que sa s’affiche directement ici ; puisqu’il reconnaît la balise.
Votre plan d’actions !
Maintenant c’est à vous de jouer donc vous retrouverez le code source sous ce cours vidéo, vous pouvez le réutiliser donc pour créer vos sites Internet qui soient compatibles avec la majorité des navigateurs avec les périphéries smartphones, tablettes, ordinateur de bureau. Si vous avez des questions sur le cours, posez-les dans le formulaire sous cette vidéo et maintenant je vous invite à consulter la deuxième vidéo donc qu’est ce que vous allez apprendre dans la deuxième vidéo ? Vous allez découvrir comment aller beaucoup plus loin avec HTML 5, CSS 3, le framework BootStrap 3. Vous allez aller beaucoup plus loin. A la fin de cette vidéo, il y a un lien qui va s’afficher, la vidéo va devenir cliquable, il suffit de cliquer donc vous allez cliquer sur le lien de cette vidéo et vous allez tomber sur la deuxième vidéo pour découvrir HTML 5, CSS 3, et le framework BootStrap 3, d’une façon beaucoup, beaucoup, plus avancée donc je vous dis à tout de suite dans la deuxième vidéo
[/ppmtoggle] [/ppmaccordion]
Télécharger les exemples de menus BootStrap 3
Et voici le code source commenté de la formation.
Téléchargement du code source Exemple de menus avec BootStrap 3
