Créer un menu rapide et collant

Nous allons utiliser le icônes de données attribut pour spécifier nos icônes de police. Les icônes de police de caractères seront utilisées pour décorer efficacement les éléments de notre menu principal. Les glyphes de police peuvent être redimensionnés et colorés sans perte de résolution, tandis que l'utilisation d'images bitmap offre moins de flexibilité. Nous en parlerons plus à mesure que nous progressons.

Étape 3: Ajout de contenu de remplissage

Pour mettre en évidence ce qui se passe, ajoutons du texte factice et un logo. Assurez-vous qu'il y a suffisamment de contenu pour que vous puissiez faire défiler si vous voulez voir le résultat final dans toute sa splendeur…

 
  
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Les erreurs, les erreurs, les erreurs, les erreurs, les causes, les erreurs, les accusations, les accusations, les accusations, les accusations, les accusations, les erreurs, les conséquences, les conséquences, les conséquences, les conséquences négatives, les conséquences négatives du changement..
 
Nemo enim ipsam voluptatem quia voluptas sont assis en dehors de tout ce que vous voulez, ce qui en résulte est une grande magnitude et qui est le meilleur pour vous. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, qui est non numéroté, mais dont la durée de vie est inférieure à la moyenne et égal à celui qui est indiqué.
 

Étape 4: Styles généraux

Nous allons d'abord charger Reset CSS d'Eric Meyer, en le plaçant en haut de notre fichier css au-dessus des autres sélecteurs:

 body font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans serif; poids de la police: 500; taille de police: 1.1em; couleur: # 34495E; couleur de fond: # ECF0F1;  div.wrapp width: 70%; marge: 0 auto;  p margin-bottom: 4em;  .logo max-width: 100%; 

Vous remarquerez que j'ai fait la div.wrapp 70% de large, plus j'ai déjà dit que les images devraient avoir un maximum de 100% de large. C'est un bon début lors de la construction d'un réseau fluide.

Étape 5: Mise en forme de la barre d’outils

Nous ajouterons ensuite quelques styles de barre d’outils - d’abord en fixant le wrapper sur le côté de la page, en le supprimant efficacement du flux de documents..

 div.toolbar-wrapp position: fixed; bloc de visualisation; en haut: 30%;  div.sticky-toolbar position: relative; en haut: 30%; rembourrage: .1em; couleur de fond: # 2C3E50; float: gauche; -webkit-border-radius: 0 .2em .2em 0; -moz-border-radius: 0,2 m 0,2 m 0; border-radius: 0 .2em .2em 0; 

Remarque: C'est très important de déclarer position: relative pour div.sticky-toolbar car cela nous permettra de positionner correctement les autres éléments.

Étape 6: @ font-face Charge

Comme mentionné précédemment, nous n'utiliserons pas d'images bitmap pour nos icônes. À la place, nous utiliserons @ font-face pour extraire les fichiers de polices à utiliser dans le navigateur..

@ font-face est une règle css qui vous permet de télécharger une police particulière de votre serveur pour afficher une page Web si l'utilisateur n'a pas cette police installée. Cela signifie que les concepteurs Web ne devront plus adhérer à un ensemble particulier de polices "Web safe" que l'utilisateur a préinstallées sur leur ordinateur..

Nous allons utiliser Entypo; un paquet Open Source d’icônes gratuites à usage commercial et personnel. Il contient un fichier PSD, EPS, PDF, OpenType, TrueType et divers autres fichiers. Nous allons donc les télécharger pour les utiliser dans notre projet..

Voici nos déclarations @ font-face, que nous collons dans notre fichier CSS. Assurez-vous que les chemins d'accès pointent correctement vers les fichiers de polices du projet, sinon ils ne s'afficheront pas..

 @ font-face font-family: 'Entypo'; src: url ('… /font/entypo.eot'); src: format local (''), url ('… /font/entypo.woff') ('woff'), url ('… /font/entypo.ttf') format ('type exact'), url (' … /Font/entypo.svg#webfontIyfZbseF ') format (' svg '); 

Nous sélectionnons maintenant tous les éléments de notre balisage avec le icônes de données attribut, virant un :avant pseudo-élément sur chacun et remplir ce pseudo-élément avec tous les caractères contenus dans la icônes de données valeur.

 [icône de données]: before font-family: 'Entypo'; contenu: attr (data-icon); 

Par exemple, ceci est notre première ancre:

et notre CSS utilisera la valeur 📣 remplir ses :avant élément.

Étape 7: Mise en forme des éléments de la barre d'outils

Ajoutons quelques effets sympas à nos icônes…

 div.sticky-toolbar ul li un display: block; largeur: .8em; marge: 0,2 m; hauteur de trait: 80%; taille de police: 2.2em; text-align: center; couleur: #fff; couleur de fond: # 16A085; -webkit-border-radius: .1em; -moz-border-radius: .1em; border-radius: .1em; -webkit-transition: toutes les 0,1 secondes d’ajustement; -moz-transition: toutes les 0,1 secondes en douceur; transition: toutes les 0,1s se calment; -webkit-font-lissage: antialiasé; 

Remarque: Pour optimiser les icônes de police Web claires et nettes (du moins dans les navigateurs Webkit), incluez un -webkit-font-lissage: antialiasé; à cette section. Vous pouvez également appliquer cela à tout en utilisant le sélecteur global: * -webkit-font-smoothing: antialiasé;

Maintenant, ajoutez des effets de survol, et vous avez terminé.

 div.sticky-toolbar ul li a: hover background-color: # 1ABC9C; 

Étape 8: Mise en forme du menu contextuel

Cela a trait à notre barre de menus, ajoutons maintenant un style au menu contextuel:

 div.popup display: none; Flotter à droite; position: relative; à gauche: 5%; couleur de fond: # 2C3E50; -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; 

Remarque: Dans son état par défaut, nous devons masquer cette section avec affichage: aucun;. Plus tard, nous basculerons la visibilité avec jQuery. Vous pouvez laisser la valeur d'affichage vide pour le moment, jusqu'à ce que vous ayez terminé le style, mais n'oubliez pas de la rapporter plus tard..

Étape 9: Mise en forme des éléments du menu contextuel

En avant! Ajoutons du style aux éléments de menu:

 div.popup ul li une position: relative; affichage: inline-block; taille de police: .85em; couleur: #fff; rembourrage: 0 2em 0 2em; marge: .4em; text-align: center; texte-décoration: aucun; transition: toutes les 0,1s se calment; -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; 

et un simple :flotter effet:

 div.popup ul li a: hover background-color: # 1ABC9C; 

Étape 10: Créer une flèche avec CSS

Au lieu de créer une image de flèche .png transparente, nous allons utiliser une astuce pour créer le même effet (bien que complètement évolutif) avec des bordures CSS. Il est également possible d'utiliser des pseudo-éléments pour cela, si vous préférez ne pas confondre votre balisage avec des éléments supplémentaires:

 .flèche position: absolue; Top 10%; gauche: -4em; largeur: 0; hauteur: 0; border-top: .5em solide transparent; bordure droite: 5 em solide # 2C3E50; bordure-bas: .5 m solide transparent; 

Pour plus de détails sur la manière dont cela est réalisé, consultez ce conseil de CSS Triangles de Joren Van Hee.

Étape 11: Création d'une fonction bascule

Pour la dernière étape, nous utiliserons un extrait de code jQuery, nous permettant de basculer notre menu contextuel. Ajouter ce qui suit

Remarque: S'il vous plaît assurez-vous que vous avez inclus le retourne faux déclaration qui vous évitera de revenir en haut de la page chaque fois que vous cliquez sur l'icône.