Como configurar a navegação rápida com CSS3

A maioria dos sites oferecem algum tipo de auxílio de navegação do site. Se você não fornecer este tipo de apoio com a sua programação CSS3, o usuário pode se perder e você vai perder o negócio ou, pelo menos atividade. navegação do site torna as informações mais fáceis de encontrar e usar. Além disso, você realmente precisa dele para que o usuário faça bom uso de seu site.

O procedimento a seguir descreve como adicionar a navegação do site sem programação para uma página. Ele não faz nada extravagante, mas funciona bem com a maioria dos navegadores.

  1. Criar um novo arquivo HTML5 com o seu editor de texto.

  2. Digite o seguinte código para a página HTML.

    Navegando User Interfaces
  3. Casa
  4. Produtos
  5. Um
  6. Dois
  7. Três
  8. Quatro
  9. Eventos
  10. Vermelho
  11. Verde
  12. Azul
  13. laranja
  14. Sobre
  15. Contato
  16. fundação
  17. Privacidade

    18. O sistema de menu consiste de um número de listas. Cada lista desordenada representa uma outra camada de menus. Este exemplo tem apenas duas camadas, mas você pode facilmente aplicar os conceitos para qualquer número de camadas desejadas. O menu global é fechado com um elemento lista não ordenada (

      ) Chamado MainMenu. O nome é importante porque você vai usá-lo extensivamente ao criar os estilos necessários.

  18. Salve o arquivo como navigation.html.

  19. Criar um novo arquivo CSS com o seu editor de texto.

  20. Digite o seguinte informações de estilo CSS.

    #MainMenu {Margin: 0-padding: 0 -} # MainMenu li {margin: 0-padding: 0-list-style: none; float: left;} # MainMenu li a {display: block-margin: 0 1px 0 0 -padding: 4px 10px; width: 80px; background: Black-cor: Branco-text-align: center -} # MainMenu li a: hover {background: verde -} # MainMenu li: hover ul {visibilidade: visível -} # MainMenu ul {position: absolute-visibility: hidden-margin: 0-padding: 0-background: Grey-border: 1px solid Branco-width: 80px;} # MainMenu ul a {position: relative-display: block-margin: 0 -padding: 5px 10px; width: 80px; text-align: left; background: lightgrey-color: Black -} # MainMenu ul a: hover {background: Violet-}

    Uau, isso é um monte de código! Os estilos podem tornar-se complexo como você tentar fazer mais com eles. É por isso que muitos desenvolvedores dependem fortemente de bibliotecas de terceiros e ferramentas. Tentando chegar a toda essa informação de estilo em seu próprio país é demorado.

    O tipo de menu aqui é facilmente feito usando uma ferramenta como o CSS Menu Criador, Menucool.com, ou menu de CSS3. No entanto, é importante passar por este exercício pelo menos uma vez para que você saiba como as coisas funcionam.

    Os estilos começam com o MainMenu, uma lista não ordenada (

      ) elemento. Tudo é referenciado a este elemento. O MainMenu consiste de uma série de itens da lista (
  21. ), Que são definidos usando o estilo li #MainMenu. Você não quer que os itens da lista para realmente olhar como uma lista - você quer que eles se parecem com menus - por isso é essencial para definir o estilo de lista a nenhum.

    Definir flutuador para a esquerda também vai ajudar a dar o menu uma aparência profissional. Dentro de cada item da lista é uma âncora () Que aponta para o local para o qual o usuário vai depois de selecionar o item do menu. O #MainMenu li um estilo cria a aparência desejada, que inclui exibindo o item como um bloco.

    Quando o usuário passa o mouse sobre um dos itens MainMenu, a um #MainMenu li: estilo foco transforma o verde de entrada.

    O li #MainMenu: hover ul requer um pouco de explicação. Normalmente, o menu secundário tem a sua visibilidade definido como oculto, de modo que você não vê-lo. Quando um usuário passa o mouse sobre um item da lista MainMenu, você quer o submenu exibido. Este estilo executa essa tarefa. Ele cria a aparência de usando o código sem realmente usar qualquer código.

    O submenus aparecerá na vertical, abaixo do menu principal horizontal. A fim de fazer isso, o estilo #MainMenu ul define a largura de 80px, o tamanho necessário para manter uma única entrada de menu. Esta configuração deve corresponder à configuração de largura para o #MainMenu ul um estilo.

    Note-se que este segundo nível de menus tem sua propriedade de visibilidade definido como oculto, porque você não quer vê-lo até que o usuário clica no item de menu principal associado. Tal como acontece com o menu principal, você quer que os usuários sabem quando selecionou um item em particular, de modo que o #MainMenu ul a: estilo foco muda o valor de fundo do menu para Violet.

  22. Salve o arquivo como Navigation.CSS.

  23. Coloque o exemplo de navegação.

    Você vê o menu (seu menu não terá nada seleccionado inicialmente e aparecerá como uma barra preta na parte superior da página).

    image0.jpg

    Tente selecionar vários itens. O exemplo usa o site existente para cada um dos links, mas se você quiser, você pode tentar usar outros links. Clicando em um link irá levá-lo para o local desejado.

    O ponto deste menu é que você pode criar muito poucos itens de interface de usuário que se parecem com eles estão codificados, mas realmente não são, utilizando CSS. Esta abordagem só de CSS irá trabalhar com a maioria dos navegadores sem ter que pedir o usuário habilitar o javascript. A maioria dos navegadores suportam o nível de CSS necessário para fazer esse sistema funcionar menu.

Semelhante

menu