Menu de navigation verticale d'Orman Clark version CSS3

La prochaine série de séries PSD codées par Orman Clark est son impressionnant menu de navigation verticale. Nous allons le recréer avec CSS3 et jQuery tout en utilisant le minimum d'images possible.

Les seules images que nous utiliserons concernent les icônes. Je vais créer une image-objet à l'aide d'un nouvel outil appelé SpriteRight, mais cela est facultatif. De plus, j'utiliserai GradientApp pour créer mes dégradés CSS3, mais là encore, c'est facultatif..

Étape 1: balisage HTML de base

Commençons par ajouter un balisage de base, un document HTML5 vide:

    Menu de navigation verticale: codée CSS3

Et maintenant le balisage pour notre menu; une liste non ordonnée dans un wrapper contenant.

  copains 340
 Vidéos 147
 Galeries 340
 Podcasts 222
 Des robots 16

Enfin, nous créons les sous-menus en plaçant une liste non ordonnée imbriquée dans chacun de nos éléments de liste existants..

  copains 340  Chatons mignons 14
 Étrange "Stuff" 6
 Échecs automatiques 2
 
 
 Vidéos 147  Chatons mignons 14
 Étrange "Stuff" 6
 Échecs automatiques 2
 
 
 Galeries 340  Chatons mignons 14
 Étrange "Stuff" 6
 Échecs automatiques 2
 
 
 Podcasts 222  Chatons mignons 14
 Étrange "Stuff" 6
 Échecs automatiques 2
 
 
 Des robots 16  Chatons mignons 14
 Étrange "Stuff" 6
 Échecs automatiques 2

D'accord, il peut sembler que beaucoup de choses là-bas mais ne laissez pas cela vous confondre. Nous avons d’abord créé une liste non ordonnée avec cinq éléments de liste, chacun contenant une balise ancre. Ensuite, nous avons ajouté des listes non ordonnées imbriquées, chacune avec trois éléments de liste.

J'ai également ajouté une classe à chaque élément de la liste, juste pour faciliter le style ultérieurement. Enfin, pour les nombres, nous avons créé une balise span à l'intérieur de chaque balise d'ancrage. Si vous le visualisez dans votre navigateur, il devrait ressembler à ceci:

Étape 2: Polices fluides

Nous allons d'abord nous assurer que notre menu s'affiche correctement. Ajoutez ces règles à css / styles.css, ils vont définir la marge et le rembourrage de tous nos uls à 0 et supprimer le style de liste.

ul, ul ul marge: 0; rembourrage: 0; style de liste: aucun;

Avant de commencer à styler notre menu, nous allons créer un wrapper avec une largeur fixe et une taille de police de 13 pixels (exprimé en unités em). Tout d'abord, nous allons ajouter une règle au corps, taille de police: 100%;. Cela garantira que notre style est basé sur la taille de police par défaut du navigateur (généralement 16 pixels).

Maintenant, expliquons comment fonctionne la taille de la police. Nous devons l'exprimer en tant que em; proportionnelle à la taille de la taille de la police de son parent. Nous visons 13px, donc en supposant que la taille du parent soit 16px, notre em résultant est 13/16 = 0,8125. 13px est 0.8125 * 16px.

Mesurer nos polices (et autres éléments) dans des unités em les rendra plus fluides. Maintenant, si nous changeons la taille de la police du wrapper (ou la taille par défaut de notre navigateur), l’ensemble du menu s’ajustera en fonction de cette base. Essayez de ne pas vous tromper, si vous avez besoin d’aide pour convertir vos polices, je vous suggère de visiter pxtoem.com..

corps taille de la police: 100%;  a text-decoration: none;  ul, ul ul margin: 0; rembourrage: 0; style de liste: aucun;  #wrapper width: 220px; marge: auto 100px; taille de police: 0.8125em;

Nous avons donné au wrapper une largeur fixe de 220px et l'avons centré avec un peu de marge en ajoutant marge: auto 100px;.

Étape 3: Menu principal CSS

Ensuite, nous ajouterons du style au menu. Nous allons faire la largeur et la hauteur du menu ul auto, appliquez ensuite une ombre à l'ensemble. En ajoutant la hauteur en mode automatique, l'ombre s'ajuste lorsque le curseur s'ouvre..

Puis les balises d'ancrage; nous ajouterons une largeur de 100%, ce qui signifie qu'ils s'étireront jusqu'à la largeur de 220 pixels de l'emballage. Pour les hauteurs, nous allons utiliser ems, alors repensez à notre taille de police principale de 13px. Notre .psd affiche une hauteur de 36px, c'est donc notre objectif. Nous en prendrons 36 et nous le diviserons par 13, ce qui donne environ 2,775em (36/13 = 2,76923077). Nous utiliserons également 2.75em pour la hauteur de ligne (pour centrer tout le texte verticalement), puis appliquerons un retrait de texte pour insérer du texte, laissant de la place ultérieurement à notre icône..

Nous allons ajouter un dégradé CSS3 pour le fond, je l'ai créé avec GradientApp. Nous allons ensuite modifier la police, appliquer la police Helvetica Neue, une couleur blanche et une ombre de texte. Notez que nous n'avons pas utilisé de taille de police ici. En effet, notre police de base est de 13 pixels pour l’encapsuleur dont nos ancres ont hérité, il n’est donc pas nécessaire de l’ajouter..

corps taille de la police: 100%;  a text-decoration: none;  ul, ul ul margin: 0; rembourrage: 0; style de liste: aucun;  #wrapper width: 220px; marge: auto 100px; taille de police: 0.8125em;  .menu width: auto; hauteur: auto; -webkit-box-shadow: 0px 1px 3px 0px rgba (0,0,0, 0,73), 0px 0px 18px 0px rgba (0,0,0, 0,13); -moz-box-shadow: 0px 1px 3px 0px rgba (0,0,0, 0,73), 0px 0px 18px 0px rgba (0,0,0, 0,13); box-shadow: 0px 1px 3px 0px rgba (0,0,0, 0,73), 0px 0px 18px 0px rgba (0,0,0, 0,13);  .menu> li> a background-color: # 616975; background-image: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (RGB (114, 122, 134)) à (RGB (80, 88, 100)); image d'arrière-plan: -webkit-linear-gradient (en haut, rgb (114, 122, 134), rgb (80, 88, 100)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (114, 122, 134), rgb (80, 88, 100)); image d'arrière-plan: -o-linéaire-gradient (en haut, rgb (114, 122, 134), rgb (80, 88, 100)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (114, 122, 134), rgb (80, 88, 100)); image d'arrière-plan: gradient linéaire (haut, rgb (114, 122, 134), rgb (80, 88, 100)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 727a86', EndColorStr = "# 505864"); fond de bordure: solide 1px # 33373d; -webkit-box-shadow: encart 0px 1px 0px 0px # 878e98; -moz-box-shadow: encart 0px 1px 0px 0px # 878e98; box-shadow: incrément 0px 1px 0px 0px # 878e98; largeur: 100%; hauteur: 2,75em; hauteur de ligne: 2,75 µm; retrait du texte: 2,75em; bloc de visualisation; position: relative; famille de polices: "Helvetica Neue", Helvetica, Arial, sans-serif; poids de police: 600; couleur: #fff; texte-ombre: 0px 1px 0px rgba (0,0,0, .5);

D'accord! Maintenant, ça commence à aller mieux et nous avons aussi une structure! Mais pourquoi ne pas ajouter une couleur de fond pour que le menu se démarque mieux…

corps background: # 32373d;

Astuce: se souvenir des MÉ

Dans le CSS ci-dessus, vous pouvez voir qu’il est facile d’oublier la signification réelle de vos unités em. C'est une bonne idée de laisser des commentaires sur vos calculs initiaux, de manière à pouvoir toujours déchiffrer ce qui se passe lorsque vous revenez à votre code. Rappelez-vous la formule: px désiré / parent px = em résultant et utilisez le symbole approximatif () si vous arrondissez le résultat.

#wrapper font-size: 0.8125em; / * 13/16 = 0.8125 * / .menu> li> a hauteur: 2,75em; / * 36/13 ≈ 2,75 * / hauteur de ligne: 2,75 µm; / * 36/13 ≈ 2,75 * / retrait du texte: 2,75 µm; / * 36/13 ≈ 2,75 * /

Étape 4: Sous-menu CSS

Il est temps d'ajouter du CSS pour les sous-menus blancs. Nous devrons ajouter un fond blanc avec des bordures grises. Remarquez pour le dernier qu'il n'a pas de bordure inférieure, nous allons donc le cibler avec le :dernier enfant pseudo sélecteur pour le supprimer. Il y a une bordure bleu foncé, donc nous allons enlever le gris, en ajoutant un bleu.

La prochaine étape sera similaire à la précédente; nous ajouterons à nouveau les hauteurs et les largeurs, nous changerons le fond en blanc. Cette fois, nous devons changer la taille de la police. Nous visons 12px donc en utilisant notre calcul de px désiré / parent px = em résultant nous obtenons 0.923em

Changeons également la couleur du texte en gris. Notez que nous avons utilisé bloc de visualisation. Si nous avions utilisé float: gauche les menus ne s'animent pas facilement, nous utilisons donc un bloc d'affichage pour les aider à bien se déplacer. vous remarquerez également que nous avons ajouté un style supplémentaire; nous appliquons cela au dernier enfant du sub-ul. Nous devons faire cela pour pouvoir changer la couleur de la bordure.

.menu ul li a background: #fff; border-bottom: 1px solid # efeff0; largeur: 100%; hauteur: 2,75em; hauteur de ligne: 2,75 µm; retrait du texte: 2,75em; bloc de visualisation; position: relative; famille de polices: "Helvetica Neue", Helvetica, Arial, sans-serif; taille de police: 0.923em; poids de la police: 400; couleur: # 878d95;  .menu ul li: dernier-enfant a border-bottom: 1px solid # 33373d;

Ça commence à vraiment bien paraître maintenant!

Étape 5: Survol et style actif

Nous allons maintenant ajouter quelques styles de survol et actifs, en particulier lorsque l'accordéon est ouvert! Nous allons également ajouter une bordure inférieure au menu actif. Maintenant, si vous pensez "pourquoi n’avons-nous pas ajouté une classe active?". Et bien mon ami, c’est ce que jQuery fera plus tard.

.menu> li> a: survol, .menu> li> a.active background-color: # 35afe3; background-image: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (RGB (69, 199, 235)) à (RGB (38, 152, 219)); image d'arrière-plan: -webkit-linear-gradient (haut, rgb (69, 199, 235), rgb (38, 152, 219)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (69, 199, 235), rgb (38, 152, 219)); image d'arrière-plan: -o-linear-gradient (haut, rgb (69, 199, 235), rgb (38, 152, 219)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (69, 199, 235), rgb (38, 152, 219)); image d'arrière-plan: gradient linéaire (en haut, rgb (69, 199, 235), rgb (38, 152, 219)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 45c7eb', EndColorStr = "# 2698db"); fond de bordure: solide 1px # 103c56; -webkit-box-shadow: encart 0px 1px 0px 0px # 6ad2ef; -moz-box-shadow: encart 0px 1px 0px 0px # 6ad2ef; box-shadow: incrément 0px 1px 0px 0px # 6ad2ef;  .menu> li> a.active border-bottom: 1px solid # 1a638f;

Étape 6: Icônes du menu principal

Nous allons ajouter les icônes en utilisant le :avant pseudo. D'abord, nous allons cibler toutes les balises d'ancrage sub-ul, puis nous allons appliquer l'image-objet d'arrière-plan et la définir sans répétition. Nous lui donnerons une taille de police de 36px bien qu'il n'y ait pas de texte; nous utiliserons 36px afin que nous puissions utiliser une largeur et une hauteur de 1em qui seront désormais égales à 36px. Nous allons ensuite pousser l’élément vers le bas de 50% et enlever le .5em du haut de la marge pour le centrer.

En utilisant les classes pour chaque élément de liste sub-ul, nous les ciblons et leur donnons la position d'arrière-plan appropriée pour l'image-objet..

Remarque: J'ai créé cette image-objet à l'aide de la nouvelle application appelée SpriteRight. Si vous souhaitez bricoler avec l'image-objet, j'ai inclus les images et les fichiers de projet dans les fichiers source..

.menu> li> a: before content: "; background-image: url (… /images/sprite.png); background-repeat: pas de répétition; font-size: 36px; height: 1em; width: 1em; position : absolu; gauche: 0; haut: 50%; marge: -.5em 0 0 0;. élément1> a: avant position d'arrière-plan: 0 0;. élément2> a: avant position d'arrière-plan: -38px 0; .item3> a: before position d'arrière-plan: 0 -38px; .item4> a: avant position d'arrière-plan: -38px -38px; .item5> a: avant position d'arrière-plan: -76px 0 ;

Étape 7: Numéros du menu principal

Ok, tu te souviens des travées que nous avons ajoutées? Ceux-ci créeront les nombres!

Nous allons d’abord ajouter une taille de police de 11px (qui convertit approximativement 0.857em). Nous les positionnerons absolument et les repousserons de la droite par 1em, encore une fois - pour rendre ce fluide fluide. Nous allons l'abaisser de 50% par le haut et supprimer le haut de la marge pour le centrer. Un fond sera ajouté avec quelques ombres de boîte, un encart et un début.

Une fois encore, pour rendre le tout fluide, nous utiliserons un rembourrage pour créer la largeur et la hauteur. Nous avons même utilisé ems sur le rayon de la frontière; nous en aurons besoin parce que si le texte est agrandi, il paraîtra disproportionné. J'ai également ajouté un autre style pour le survol ou l'application d'une classe active au lien..

.menu> li> une étendue taille de la police: 0.857em; affichage: inline-block; position: absolue; à droite: 1em; en haut: 50%; arrière-plan: # 48515c; hauteur de ligne: 1em; hauteur: 1em; rembourrage: .4em .6em; marge: -8em 0 0 0; couleur: #fff; retrait du texte: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: .769em; border-radius: .769em; -webkit-box-shadow: inet 0px 1px 3px 0px rgba (0, 0, 0, 0,26), 0px 1px 0px 0px rgba (255, 255, 255, .15); -moz-box-shadow: encart 0px 1px 3px 0px rgba (0, 0, 0, 0,26), 0px 1px 0px 0px rgba (255, 255, 255, .15); box-shadow: incrément 0px 1px 3px 0px rgba (0, 0, 0, 0,26), 0px 1px 0px 0px rgba (255, 255, 255, .15); texte-ombre: 0px 1px 0px rgba (0,0,0, .5); poids de la police: 500;  .menu> li> a: plage de survol, .menu> li a.active span background: # 2173a1;

Étape 8: Numéros de sous-menus et flèche

Ce processus sera similaire à l’étape précédente, je n’entrerai donc pas dans les détails. Les principales différences ici sont que j'ai supprimé la couleur d'arrière-plan, modifié la bordure et la couleur de la police. Nous devons également ajouter cette flèche et nous appuierons à nouveau sur :avant Psuedo. Nous définissons une largeur et une hauteur et ajoutons un peu de positionnement à gauche en utilisant ems pour assurer sa fluidité.

Enfin, un état de survol (grâce à ceux dans les commentaires qui ont souligné son absence initiale). Nous appliquons simplement une couleur plus foncée (# 32373D) au texte d'ancrage, à la pseudo-flèche et au nombre compris dans l'intervalle..

.menu ul> li> un span taille de la police: 0.857em; affichage: inline-block; position: absolue; à droite: 1em; en haut: 50%; / background: #fff; bordure: 1px solide # d0d0d3; hauteur de ligne: 1em; hauteur: 1em; rembourrage: .4em .7em; marge: -9em 0 0 0; couleur: # 878d95; retrait du texte: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: 769em; border-radius: 769em; ombre du texte: 0px 0px 0px rgba (255,255,255, .01));  .menu> li> ul li a: before contenu: '▶'; taille de police: 8px; couleur: #bcbcbf; position: absolue; largeur: 1em; hauteur: 1em; en haut: 0; à gauche: -2,7em;  .menu> li> ul li: survoler un, menu> li> ul li: survoler une durée, .menu> li> ul li: survoler a: before color: # 32373D;

Donc, ça a l'air plutôt cool maintenant, non? Je pense qu'il est temps que nous ajoutions des fonctionnalités à cette!

Étape 9: Heure jQuery

Je parie que vous avez attendu pour arriver ici?! Eh bien, nous sommes enfin au point jQuery. Nous devrons d’abord établir un lien avec la bibliothèque jQuery, en utilisant celle hébergée par Google. La dernière version actuelle est la 1.7.1. Ajoutez ce qui suit à la section head de votre page HTML:

Maintenant, ajoutez ce qui suit au bas de votre document HTML, avant la fermeture étiquette. Ne vous inquiétez pas si cela semble trop déroutant, je vais l'expliquer dans une minute.

 var menu_ul = $ ('. menu> li> ul'), menu_a = $ ('. menu> li> a');

Premièrement, nous stockons le sous-menu et les balises d'ancrage du menu principal dans deux variables différentes, ce qui facilite leur référence ultérieure..

 menu_ul.hide ();

Cela cachera tous les sous-menus lors du chargement de la page

 menu_a.click (fonction (e)

D'abord, nous lui dirons de faire quelque chose en cliquant sur l'une des balises d'ancrage du menu principal..

 e.preventDefault ();

Ici, nous empêchons les balises d'ancrage de suivre des liens ou de changer l'adresse dans la barre d'adresse. par exemple. si vous créez une balise d'ancrage avec un lien "#", lorsque vous cliquez dessus, elle n'apparaîtra plus dans la barre d'adresse. Les balises d'ancrage sont fondamentalement désactivées.

 if (! $ (this) .hasClass ('active')) menu_a.removeClass ('active');

Maintenant, nous lui dirons que SI le menu_a a la classe 'active', supprimez-la.

 menu_ul.filter (': visible'). slideUp ('normal');

Ici, nous utilisons '.filter' et ': visible'. Si un menu est ouvert, faites-le glisser à une vitesse normale..

 $ (this) .addClass ('active'). next (). stop (true, true) .slideDown ('normal');

Si le menu est fermé, ajoutez la classe 'active' (pour pouvoir accéder au joli style CSS) et faites-la glisser à une vitesse normale..

  else $ (this) .removeClass ('active'); $ (this) .next (). stop (true, true) .slideUp ('normal');

Nous devrons maintenant utiliser un ELSE dans notre déclaration conditionnelle. Donc, ELSE supprime la classe active et glisse le menu pour le cacher. C’est juste pour pouvoir coder n’importe quel menu sans avoir à recharger la page.

Remarque: Si vous souhaitez modifier la vitesse de défilement, réglez normal sur, par exemple. '500'. Cela va glisser à 500 millisecondes.

Si vous souhaitez apprendre jQuery à partir de zéro, n'hésitez pas à consulter le cours gratuit Apprendre jQuery en 30 jours de tutsplus.com.

Conclusion

Eh bien, nous avons réussi jusqu'au bout! Nous avons codé le magnifique menu de navigation verticale d'Orman à l'aide de CSS3 et de jQuery! Restez à l'écoute pour savoir comment créer cela en utilisant uniquement CSS3 avec le pseudo sélecteur: target.

#wrapper width: 440px; taille de police: 1em

J'espère que vous avez apprécié ce tutoriel, merci d'avoir lu!

Création de sites web