Mettre en place un menu responsive avec les CSS

Utiliser Foundation

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez un autre framework assez couramment rencontré. Foundation est encore plus évolué et complet que le précédent. Voyez qu'il s'appuie sur la même approche et qu'il utilise presque les mêmes structures et classes.
03:44

Transcription

Un autre gros FrameWork que l'on rencontre au même titre que Bootstrap, c'est Foundation. C'est quand même une grosse usine à gaz qui va permettre de faire énormément de choses, aussi bien de l'application que du site. Il n'y a qu'à regarder la doc pour comprendre que vraiment, on peut aborder l'intégralité de la composition du prototype d'une application, que ce soit en mode grille, que ce soit au niveau des boutons, que ce soit au niveau de la navigation, de l'iconographie, les plugins que l'on peut utiliser, les composants, bref. Il y a énormément de possibilités avec Foundation donc encore une fois, là, on ne va pas l'utiliser que pour faire du menu Responsive, on va vraiment utiliser Foundation pour faire le FrameWork global de notre application ou de notre site. Mais il est vrai que si vous l'utilisez, autant créer un menu Responsive depuis Foundation. On ne va pas le refaire au pas à pas parce que ça se construit exactement pareil que Bootstrap, à ceci près que quelques demandes de classes vont changer. Par exemple au lieu d'être "nav-bar", ici c'est "top-bar". Mais bon tout est exactement paramétrable, si ce n'est plus, de la même manière que Bootstrap, et sa composition vous voyez est indique. Donc ici on a bien le menu de navigation "nav", puis à l'intérieur les deux parties, la partie en-tête et la partie menu. La partie en-tête, c'est une liste qui va utiliser la classe "title-area" et qui va définir à la fois le logo plus l'élément qui va nous servir pour pouvoir faire le breadcrumb et le mot "Menu". Alors on peut n'utiliser que l'icône, on peut utiliser les deux avec le mot "Menu" et l'icône, ou que le menu, c'est à vous de voir. Là je l'ai placé dans les configurations doubles qui est le plus explicite. Et puis après dans la partie "section" aussi, on va voir directement la barre de navigation. Alors pareil que pour Bootstrap, on peut avoir une partie gauche et une partie droite. J'ai exactement copié la même structure HTML, donc avec un bouton "Accueil" qui est actif, un menu déroulant qui a un menu déroulant, donc "has-dropdown" qui a la classe "dropdown" pour définir l'élément "role menu" ici, avec une "divider" pareil, exactement. Donc vous voyez la classe "divider" sont communes. Ici la classe "right" pour pouvoir placer les éléments à droite. Voilà, donc c'est vraiment de la copie quasi conforme on va dire à la structure de Bootstrap. Une petite différence, c'est que depuis le début de la formation ici, j'utilise toujours dans la partie d'en-tête la description des scripts. Après, libre à vous d'optimiser en utilisant un script d'optimisation pour le chargement ou de placer directement vos balises script en fin de body, donc juste avant la fermeture "/body". Pour ma part j'ai toujours placé devant. Maintenant pour Foundation c'est un peu différent, il faut vraiment placer deux scripts en fin, surtout Foundation, pour être sûr que le script soit chargé avant de pouvoir lancer l'exécution de Foundation. Si vous placez ça dans la partie haute du document, avec l'aspect un peu asynchrone, on n'est pas sûr que tout soit chargé et ça risque de causer souci au niveau de la prise en compte de la librairie. Donc voilà, vous les mettez vraiment un fin de document, et donc ici pas besoin de mettre un document "ready" du fait que forcément, le document sera chargé à ce moment-là. Voilà donc maintenant, on peut directement visualiser dans le navigateur pour aller voir le chargement, et vous voyez qu'avec un thème légèrement différent, on a à peu près les mêmes fonctionnalités, les mêmes représentations que pour Bootstrap. Maintenant si on réduit la partie, on se bascule bien en menu Responsive, et en cliquant sur l'élément, on a bien tous nos éléments Responsive avec des animations qui sont intégralement paramétrables, tout est modifiable. Donc voilà, avec quelques structures très rapidement mises en place et quelques classes décimées dans le code, on arrive très rapidement à mettre en place un menu Responsive avec le FrameWork Foundation.

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 !