Share
Notre mise en page Skeleton contient un certain nombre de défis réactifs, dont le plus important est la navigation principale. Dans ces screencasts, nous préparerons les choses en mettant de l'ordre dans la grille de base, en discutant du remplacement des images, du style du menu et enfin en utilisant du jQuery pour rendre les choses réactives.
Avant de plonger dans la navigation principale elle-même, nous devons ranger quelques aspects de notre mise en page. Pour commencer, nous devons nous assurer que toutes les mesures dont nous disposons jusqu’à présent fonctionnent en harmonie avec notre grille de base. Deuxièmement, nous allons parler d’une autre approche du remplacement d’image qui souligne certains points importants concernant la performance..
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!La base de notre navigation principale est un menu élégant avec un sous-menu déroulant et quelques transitions subtiles. Dans cette vidéo, nous allons couvrir les mécanismes de base d'un menu déroulant CSS, ainsi que quelques points (relatifs à ce dont nous parlions avec le remplacement d'image) sur les performances et l'accessibilité..
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!Après avoir fait fonctionner la navigation, il est temps de réfléchir à la manière dont nos utilisateurs mobiles vont en faire l'expérience. Nous allons utiliser les requêtes multimédia jQuery et CSS pour échanger le menu standard avec un alternative pour les petits écrans.
Comme mentionné par Michael, les éléments de sous-menu dans leur état actuel auront l’air épouvantable quand ils disparaîtront d’un petit élément de menu:
Cela est dû au fait que la largeur du sous-menu est définie sur la largeur du lien parent. Le texte dans les liens est enveloppant et le tout est foiré. Nous pouvons résoudre ce problème en ajoutant une règle supplémentaire aux liens de sous-menu:
nav.primary ul ul li un white-space: nowrap;
ce qui empêche le retour à la ligne et force le sous-menu à s’agrandir. Beaucoup mieux!
Quelques liens utiles pour développer davantage ce qui a été couvert dans ces vidéos.
Accentsconagua