Aujourd'hui, nous allons créer un menu CSS horizontal fonctionnel. Nous allons utiliser des PNG transparents (pardon, utilisateurs de navigateur obsolètes) pour créer une barre horizontale brillante, dont la couleur peut facilement être modifiée à l'aide de CSS. Avant de commencer, vérifiez ce que nous allons construire dans la démo en direct.
Créer le PSD
Le travail de Photoshop pour le menu est assez minime et ne devrait vous prendre que quelques minutes. Je l'ai divisé en cinq étapes super faciles.
Barre solide
Créez un nouveau fichier RVB dans Photoshop et tracez une barre de couleur haute de 45 pixels (j'ai utilisé # 4d4e50) sur toute la surface de votre toile.
Pente
Ensuite, saisissez votre outil de dégradé et assurez-vous qu’il est défini sur un dégradé qui commence en noir et se termine en transparent. En commençant par le bas, étendez le dégradé verticalement sur votre barre grise.
Brillant
Faites une bande blanche qui s'aligne avec le haut de votre barre grise mais ne s'étend que sur la moitié de la distance verticale. Définissez l'opacité de cette bande à 7%.
Rayures
Créez deux bandes blanches supplémentaires, cette fois de quelques pixels seulement, et insérez-les légèrement en haut et en bas de la barre grise.
Économie
Croyez-le ou non, c'est à peu près tout ce dont nous avons besoin! Avant de sauvegarder le fichier PNG, désactivez le calque des barres de couleur d'origine. C'est pour que nous puissions changer la couleur de notre CSS. Notez également que nous n’avons pas besoin de l’ensemble de l’image, car nous allons la configurer pour une répétition horizontale. Il suffit de rogner un petit éclat vertical et de cliquer sur "Enregistrer pour le Web et les appareils". pour sauvegarder votre PNG.
Le HTML
Je suppose ici une compréhension de base de HTML et CSS. Je vais essayer d'être le plus descriptif possible sans tout expliquer, ligne par ligne.
Le HTML vide
Nous allons commencer par une simple page HTML vierge.
Récipient
Nous allons maintenant ajouter un conteneur div qui contiendra le menu de navigation div.
Structure du menu
Pour terminer notre code HTML, ajoutez une liste non ordonnée contenant des éléments d’étendue pour Accueil, À propos de, Services, Travail et Contact. Ce sera la base pour nos éléments de menu. Nous allons insérer le fond et styler cette liste en CSS.
Le CSS
Le CSS contiendra l'essentiel du travail. Tout ce que nous avons fait jusqu'à présent est de créer une liste de liens afin que votre page ressemble à ceci:
Couleur de fond
La première chose que nous ferons est de colorer un peu l'arrière-plan pour dissocier l'arrière-plan blanc ennuyeux. Ajoutez simplement l'extrait suivant au corps.
Style de base des conteneurs
Pour commencer à styliser le conteneur, définissez la position sur relative et la hauteur 45 pixels (qui correspond à la hauteur de notre graphique Photoshop). Définissez ensuite la couleur et l'arrière-plan sur blanc et la largeur sur 100% afin qu'elle s'étende sur toute la largeur de la fenêtre.
Ce code devrait entraîner un désordre dans votre aperçu. Ne vous inquiétez pas, c'est exactement ce que cela devrait donner à ce point!
Ajout et mise en forme de l'image
Maintenant, nous allons entrer dans les choses qui vont faire ressembler à un menu! Cette fois, nous allons cibler la div navMenu contenant les liens. Encore une fois, réglez votre position sur relative et la hauteur sur 45px. Nous n’ajouterons aucun texte à ce stade, mais allons-y et définissons la taille de la police sur 17px. Ensuite, je définis la couleur et l'image d'arrière-plan avec une seule ligne de code. Notez que la couleur (# 4d4e50) est la couleur de notre barre de couleur d'origine dans Photoshop. Ce paramètre est la clé de la flexibilité de ce menu. Changer cette valeur changera la couleur du menu de navigation, le rendant très facile à personnaliser. Après avoir défini une couleur, ajoutez l’image d’arrière-plan et réglez-la sur l’axe des x.
Maintenant, si vous affichez un aperçu de la page, vous devriez voir une barre de menu lisse et brillante! Essayez de changer cette valeur de couleur pour voir comment l’image conserve son brillant lors du changement de couleur.
S'adresser aux liens
Ensuite, nous allons ajouter un gros morceau de CSS à la liste non ordonnée pour commencer à positionner nos liens. Pour la section de liste générale non ordonnée, définissez la marge et le remplissage sur 0, le style de liste sur aucun, la largeur sur auto et le flottant sur la gauche. Puis stylisez les éléments de la liste contenus dans la liste non ordonnée (li). Encore une fois, nous flottons à gauche, mais notez que cette fois nous avons paramétré l'affichage sur? et nos marges à 0 1px.
Jetez un coup d'œil à votre page dans Safari. Les éléments de la liste devraient être alignés horizontalement maintenant.
Styliser le texte
Ciblez maintenant les éléments de lien (a) dans le menu. Réglez l’affichage sur Bloquer, le flotteur à gauche, la hauteur sur 45 px et la couleur sur le blanc. Pour éliminer le soulignement du lien, définissez la décoration de texte sur none. Enfin, pour espacer un peu les liens, réglez le remplissage sur 0 0 0 30px (dans le sens des aiguilles d'une montre: haut 0, droite 0, bas 0, gauche 30).
Le texte devrait être plus proche de ce que nous voulons maintenant, mais il est encore un peu éteint.
Cette fois, ciblez la liste non ordonnée, l'élément de liste, les éléments de liaison (le ciblage devient un peu fou). Remarquez que j'ai ajouté plus de rembourrage pour mieux aligner les choses et définir une hauteur et un flottement. Ensuite, nous voyons un peu de code que j'ai emprunté à Chris Coyier de CSS-Tricks, ce qui nous donne une très belle police pour le menu. HelveticaNeue-Light est notre choix préféré pour que les téléspectateurs qui l’ont installée le voient.Ceux qui ne le feront pas retourneront simplement à la police suivante en ligne jusqu'à ce que leur navigateur trouve une option installée. Pour reprendre les mots de Chris, pourriez-vous aussi bien utiliser le meilleur Helvetica que vous puissiez? ?
Maintenant, notre texte de menu est magnifiquement stylé et en place!
Ajouter des effets de survol
Notre dernière étape consiste à ajouter de jolis effets de survol afin que vous puissiez facilement voir quelle option vous souhaitez sélectionner. Nous allons cibler les liens en survol avec notre premier extrait et les étendues en survol sur notre deuxième. Avis sous? Fond? J'ai inséré la même image d'arrière-plan que celle que nous utilisons pour la barre de menus elle-même. C’est ainsi que notre option de survol conserve le joli aspect brillant. Cependant, cette fois-ci, la couleur d'arrière-plan est définie sur un gris plus foncé. Ceci fournit la différenciation dans notre effet de survol.
Voila! Nous avons maintenant un menu CSS magnifiquement brillant avec un bel effet de survol.
Changer la couleur
La mauvaise nouvelle est que les navigateurs sans support PNG ne l'afficheront pas correctement du tout. La bonne nouvelle est que, pour les navigateurs prenant en charge les fichiers PNG (vous savez, les navigateurs du 21ème siècle), cette configuration facilite grandement la modification de l'apparence du menu avec seulement deux réglages de la valeur de couleur CSS!
Il suffit de trouver les deux endroits dans votre CSS où l’image d’arrière-plan apparaît (une fois pour la barre et une fois pour le survol) et de changer les couleurs précédentes. Regardez ce qui se passe si nous créons un autre menu et substituons # 3d359a pour la couleur principale et # 5749e7 pour la couleur de survol.
Conclusion
J'espère que vous avez appris quelque chose à propos de CSS et que vous avez été inspiré pour expérimenter la transparence dans un souci de flexibilité. Vous pouvez facilement créer le même effet en utilisant des fichiers JPG, mais cela prendrait plus d’images et vous obligerait à créer de nouvelles images dans Photoshop chaque fois que vous souhaitiez changer de couleur.