Mettre en place un menu responsive avec les CSS

Découvrir Responsive Nav et les autres librairies

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les frameworks sont parfois trop lourds quand il ne s'agit que d'intégrer une barre de menus. Ainsi, vous pouvez toujours faire appel à pléthores de librairies plus légères et ciblées.
04:17

Transcription

En complément des menus que vous allez pouvoir développer, mettre en place depuis une page blanche ou en vous appuyant sur les frameworks comme Bootstrap ou Foundation, il existe toute une série de librairies, qui s'appuient ou non sur jQuery, qui vont permettre de réaliser des menus Responsive très rapidement. Ici Responsive Nav qui s'utilise de manière très simple en utilisant d'une part une feuille de style CSS propre à l'outil, plus un JavaScript qui va avec. On va pouvoir appuyer directement des listes ordonnées ou non, de menus imbriqués ou non, et qui vont pouvoir, avec quelques petites options paramétrées en JavaScript, obtenir des résultats assez probants. Donc si vous venez sur le GitHub du site et que vous descendez dans la partie "Démos", ici vous avez quelques démos qui vont permettre de se faire une idée, voilà ici directement. Donc il suffit ensuite de rendre le site bien entendu Responsive pour voir l'aperçu du fonctionnement. Donc ici c'est un menu qui se trouve sur la partie gauche dès le départ, mais il existe d'autres types de menus. Ici je vais prendre par exemple un autre menu qui va être dans la partie haute, et puis dès qu'on va le redimensionner, il va pouvoir venir apporter son contenu. Alors on va aller voir d'autres types de librairies comme ça. Il y a Sidr qui propose directement de voir avec son site la partie "Démos et Usage" ici. C'est intégré directement et c'est assez bien fait. Le site en lui-même est assez sympa parce que vous allez pouvoir travailler différents types d'aperçus et vous apercevoir directement si ça correspond à ce dont vous avez besoin. Vous voyez ici directement, on peut voir les ouvertures, les fermetures chaque fois qui vont être disponibles. Alors la documentation est très bien faite. Vous voyez, ça se passe souvent par du paramétrage JavaScript. Donc si vous avez l'habitude d'utiliser JavaScript jQuery, c'est vraiment un lancement de fonction avec à l'intérieur de la fonction maître, donc ici Sidr. Tout est extrêmement commenté, documenté, donc très simple d'utilisation. Ici Navgoco qui va permettre de transformer directement une simple liste d'éléments dans un menu navigable vertical. Alors c'est un peu plus orienté quand même "application" ici à ce niveau. Flexnav qui, pareil, vous propose un menu directement Responsive et utilisable sur le site. Il ne faut plus que le paramétrer ensuite. Vous avez SmartMenus jQuery aussi, qui est un outil assez simple d'approche, assez simple d'utilisation avec quelques pots qu'on va pouvoir personnaliser. Et vous voyez ici, le menu va permettre de travailler directement en mode Responsive aussi. JPanelMenu qui va se baser lui sur directement un menu continuellement en mode burger ici, et qui va être tout le temps sur la gauche de l'écran, que l'on soit en mode écran ou en mode Responsive ici vous voyez, en mode mobile. On va se retrouver exactement dans la même configuration, donc ergonomiquement parlant, ça a son avantage par rapport aux utilisateurs. Et enfin le dernier que j'ai choisi pour vous présenter ces possibilités, qui est mmenu, qui se base sur jQuery également et qui, soit vous l'utilisez directement dans vos sites pour pouvoir présenter vos menus, soit vous pouvez l'utiliser sous forme de plugins WordPress, c'est-à-dire si vous devez intégrer ce menu Responsive au sein de WordPress, il existe sous forme de plugins et en quelques clics, vous allez pouvoir responsiver les menus de vos templates. Donc une liste non exhaustive. Il suffit maintenant d'aller dans Google et de taper "menu responsive", "jquery" par exemple ici, et rien que là, vous allez trouver toute une mine d'informations sur d'autres outils, "SlickNav" par exemple. etc. Donc naviguez sur Google, cherchez ce type de plugins. Vous allez voir, il en existe pléthore. Tout ce que je vous ai présenté là existe à ce jour. Il se peut que le jour, d'ici un an ou deux peut-être, qu'il y ait des nouveautés, qu'il y ait des nouveaux outils plus performants, des outils qui aient disparu. Donc n'hésitez pas à googler sur le sujet pour pouvoir trouver des bases de plugins qui vous permettront de développer plus rapidement encore vos menus. Vous avez les fameux top ten des meilleurs sites présentés,

Mettre en place un menu responsive avec les CSS

Mettez en place des menus responsives au sein de vos pages web. Abordez les diverses approches possibles, que ce soit avec les plug-ins, ou en codant depuis une page blanche.

2h31 (28 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :26 nov. 2015

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !