Comment créer un bouton de menu CSS (partie 1)
Introduction: Pourquoi utiliser les boutons CSS?
Dans cette série de tutoriel, je vais vous expliquer comment créer un menu simple en utilisant une liste de liens et CSS. Je vais couvrir les bases de cette première partie, puis développez le menu avec des trucs plus avancés dans les deux prochaines parties.
Etape 1: Création de la liste des liens en utilisant HTML
Pour ce tutoriel, je vais utiliser une liste non triés (
- ) Avec un certain nombre d'éléments de la liste (
- ) Contenant des liens de texte ordinaire. Le code HTML de base pour cette première étape est assez simple, donc je vais juste l'écrire:
La liste a été donné l'ID = » avmenu », ce qui me permettra d'appliquer CSS pour la liste et tout ce que l'élément de liste contient - dans ce cas, les éléments de liste et les liens. J'ai aussi ajouté une class = » courant » au premier élément de la liste, car je veux la page en cours d'avoir un style spécifique pour montrer au spectateur du menu qui page qui est actuellement affiché.
Étape 2: Création des styles de base à l'aide de CSS
Avec la liste HTML créé, il est temps de dire au navigateur Web comment afficher. Je commence par définir les styles pour un menu horizontal très simple, il suffit d'obtenir un point de départ:
Le résultat ne semble pas très excitant, mais la liste des liens commencent déjà à ressembler à un bouton de menu. C'est ce que le menu ressemble à ce point:
Étape 3: Ajout de styles pour lien active, et mettant en évidence des boutons sur mouseovers
Comme mentionné précédemment, je veux faire le bouton actuellement actif se démarquer un peu, et je veux aussi montrer un effet de surbrillance quand un bouton est plané par le pointeur de la souris. Les deux ajouts plus facile de trouver le lien droit de cliquer sur, car ils fonctionnent comme une réponse visuelle que le spectateur pointe sur le bon lien. Voici le code ajouter à ces deux ajouts:
Pour cet exemple, j'ai créé un fichier nommé part1.html où je l'ai placé le CSS et le code HTML dans le même fichier. Dans mes modèles, je place toujours CSS dans un fichier .css externe - et je le ferai une fois que le code pour le menu final est créé. Mais tout au long de la série de tutoriel, je vais garder ensemble le CSS et HTML pour le rendre plus facile à suivre les étapes et voir comment les changements dans le code affecte le menu.
Étape 4: Passez en revue les résultats dans le navigateur Web
Je l'ai téléchargé le fichier que j'ai créé ici: part1.html. de sorte que vous pouvez voir le menu en direct comme il semble à ce stade. Le lien ouvre une nouvelle fenêtre / onglet.
Pour la partie suivante, je vais créer un part2.html - et ainsi de suite pour aussi longtemps que le tutoriel court. Comme mentionné au début du poste, je serais heureux d'obtenir des suggestions sur ce que le menu devrait ressembler. Je vais faire un menu vertical aussi bien, et peut-être un menu déroulant aussi si quelqu'un est intéressé à le voir. Appréciation générale, les questions et les idées sont également les bienvenus.
À venir dans la partie suivante: une description ligne par ligne du CSS, et l'ajout d'effets visuels plus, les couleurs et les styles ...
Articles Liés