Comment mettre en place une navigation rapide avec CSS3

La plupart des sites offrent une certaine sorte d'aide de navigation du site. Si vous ne fournissez pas ce genre de soutien avec votre programmation de CSS3, l'utilisateur peut se perdre et vous perdrez affaires ou au moins une activité. Navigation du site rend l'information plus facile à trouver et à utiliser. En outre, vous avez vraiment besoin pour que l'utilisateur de faire bon usage de votre site.

La procédure suivante décrit comment ajouter la navigation du site sans programmation à une page. Il ne fait rien d'extraordinaire, mais il ne fonctionne bien avec la plupart des navigateurs.

1. Créer un nouveau fichier de HTML5 avec votre éditeur de texte.

2. Tapez le code suivant pour la page HTML.

3. Accueil
4. Produits
5. Une
6. Deux
7. Trois
8. Quatre
9. Événements
10. Rouge
11. Couleur verte
12. Bleu
13. Orange
14. Sur
15. Contact
16. Création
17. Confidentialité

Le système de menu se compose d'un certain nombre de listes. Chaque liste non ordonnée représente une autre couche de menus. Cet exemple a seulement deux couches, mais vous pouvez facilement appliquer les concepts à un certain nombre de couches souhaitées. Le menu général est joint à un élément de liste à puces (

) Nommé MainMenu. Le nom est important car vous allez l'utiliser abondamment lors de la création des styles requis.

18. Enregistrez le fichier sous navigation.html.

19. Créer un nouveau fichier CSS avec votre éditeur de texte.

20. 
    
    
    
    

    Tapez les informations de style CSS suivante.

    #MainMenu {Margin: 0-padding: 0 -} {# MainMenu li margin: 0-padding: 0-list-style: none; float: left;} # MainMenu li a {display: block-margin: 0 0 0 1px -remplissage: 4px 10px; largeur: 80px; background: Black-couleur: blanc-text-align: center -} # MainMenu li a: hover {background: Vert -} # MainMenu li: hover ul {visibility: visible -} # MainMenu ul {position: absolute-visibility: hidden-margin: 0-padding: 0-fond: Gris-border: 1px solide blanc-width: 80px;} # MainMenu ul un {position: relative-display: block-margin: 0 -remplissage: 10px 5px; largeur: 80px; text-align: left; fond: gris clair couleurs: Noir -} # MainMenu ul a: hover {background: Violet-}

    Wow, ça fait beaucoup de code! Styles peuvent devenir complexes que vous essayez de faire plus avec eux. Voilà pourquoi de nombreux développeurs comptent beaucoup sur les bibliothèques et les outils tiers. Essayer de venir avec toutes ces informations de style sur votre propre est fastidieuse.

    Le type de menu ici se fait facilement en utilisant un outil tel que CSS Menu Maker, Menucool.com ou CSS3 Menu. Cependant, il est important de passer par cet exercice au moins une fois si vous savez comment les choses fonctionnent.

    Les styles commencent avec le MainMenu, une liste non ordonnée (

    ) Élément. Tout est fait référence à cet élément. Le MainMenu se compose d'un certain nombre d'éléments de la liste (
21. ), Qui sont mis en utilisant le style de li #MainMenu. Vous ne voulez pas la liste pour ressemblent vraiment à une liste - que vous voulez qu'ils ressemblent à des menus - il est donc essentiel pour définir la liste de style incomparable.

    Réglage flotteur à gauche sera également aider à donner le menu une apparence professionnelle. Au sein de chaque élément de la liste est un point d'ancrage () Qui pointe vers l'emplacement où l'utilisateur passe après avoir sélectionné l'option de menu. Le #MainMenu li un style crée l'apparence requise, qui comprend un élément est affiché comme un bloc.

    Lorsque l'utilisateur passe la souris sur un des éléments MainMenu, l'un #MainMenu li: hover style tourne le vert d'entrée.

    Le li #MainMenu: hover ul nécessite une petite explication. Normalement, le menu secondaire a sa visibilité défini comme Caché, de sorte que vous ne le voyez pas. Quand un utilisateur passe la souris sur un élément de la liste MainMenu, vous voulez que le sous-menu affiché. Ce style effectue cette tâche. Il crée l'apparence d'utiliser le code sans utiliser aucun code.

    Les sous-menus apparaît verticalement, sous le menu principal horizontal. Pour ce faire, le style #MainMenu ul définit la largeur de 80px, la taille nécessaire pour tenir une seule entrée de menu. Ce paramètre doit correspondre au paramètre de largeur pour la #MainMenu ul un style.

    Notez que ce deuxième niveau de menus a sa propriété de visibilité défini comme Caché parce que vous ne voulez pas voir jusqu'à ce que l'utilisateur clique sur l'élément de menu principal associé. Comme avec le menu principal, vous souhaitez que les utilisateurs savent quand ils ont sélectionné un article en particulier, de sorte que le #MainMenu ul style a: hover change la valeur de fond du menu pour Violet.

22. Enregistrez le fichier sous Navigation.CSS.

23. Chargez l'exemple de navigation.

    Vous voyez le menu (le menu ne sera pas avoir quoi que ce soit d'abord sélectionné et apparaîtra comme une barre noire en haut de la page).

    

    Essayez de sélectionner divers articles. L'exemple utilise le site existant pour chacun des liens, mais si vous voulez, vous pouvez essayer d'utiliser d'autres liens. Cliquer sur un lien vous amène à l'endroit désiré.

    Le point de ce menu est que vous pouvez créer un bon nombre des éléments de l'interface utilisateur qui ressemblent ils sont codés, mais ne sont pas vraiment, en utilisant le CSS. Cette approche de CSS ne fonctionne avec la plupart des navigateurs sans avoir à demander à l'utilisateur d'activer javascript. La plupart des navigateurs prennent en charge le niveau de CSS nécessaire pour faire fonctionner ce système de menu.