Criando um menu com html e css

2 partes:Escrever o código HTMLEscrever o código CSS

menus pull-down fornecem uma visão clara e hierarquizada de todas as principais seções de uma página web, bem como subseções contidos em cada. Tudo que você precisa fazer para subseções aparecer, é mover o cursor do mouse sobre as seções principais. Você pode fazer um menu suspenso usando apenas HTML e CSS.

parte 1Escrever o código HTML

1

Criar a seção de navegação. Geralmente é melhor usar

quando, aparentemente, nenhuma das outras opções se encaixa melhor. Coloque esta seção dentro de um elemento

para que você possa aplicar o estilo tanto para o recipiente, bem como o mesmo menu.

  •    
  •    

    • 2

    Dê a cada seção de um atributo de classe. A classe de atributo que você vai usar mais tarde para estilizar esses elementos usando CSS. Dê um atributo de classe para outro recipiente e, separadamente, o menu.

    class ="nav-wrapper"gt;

  •    
  •    

    • 3

    Faça uma lista de itens de menu. A lista não ordenada (

      ) Contém os itens de menu superior (itens na lista
    • ), No qual o usuário pode mover o ponteiro do mouse para ver os menus. classe Adds "clearfix" o item da lista, você vai usá-lo mais tarde, quando você desenvolver o CSS.

  •    
  •       
  •          
  • iniciação
  •          
  • contribuidores
  •          
  •          
  • contato
  •          
  •       
  •    



    • 4

    Inserir links. Se os itens de menu de nível superior também estão ligados às suas próprias páginas, inserir os links apropriados agora. Mesmo que eles não estão relacionados com qualquer outro site inclui links para uma âncora inexistente (por exemplo, "#!") Para que o cursor do usuário mudar sua aparência. Neste exemplo, "contato" não leva a nada, mas os outros dois menus próprios:

  •    
  •       
    •          
  • iniciação
    •          
  • contribuidores
  •          
    •          
  • contato
  •          
  •       
  •    

    • 5

    Criar sub-listas para itens do menu. Depois de ter aplicado os estilos, essas listas se tornará um menu drop-down. listas ninhos dentro do item da lista no qual o usuário vai passar o cursor. Ele inclui um atributo de classe e um link, como você fez antes.

  •    
  •       
    •          
  • iniciação
    •          
  • contribuidores
  •          
  •             
  • Michael Jordan
  •             
  • Stephen Hawking
  •          
  •          
    •          
  • contato
  •          
  •             
  • Relatar um erro
  •             
  • contato com o suporte
  •          
  •          
  •       
  •    

    • parte 2Escrever o código CSS

    1

    Abra sua folha de estilo CSS. Adicione um link para a seção de folha de estilo CSS "cabeça" (Cabeçalho) do seu documento HTML, se você não tiver feito isso. Este artigo não aborda os conceitos básicos de CSS, como definir um tipo de letra e cor de fundo.

    2

    Adicione o código "clearfix". Lembre-se da classe "clearfix" você adicionou na lista do menu? Normalmente um drop-down itens de menu têm um fundo transparente e empurrar os outros elementos em outras direções. Você pode resolver este problema com um ajuste rápido com CSS. Aqui é uma solução prática e fácil, mas não é compatível com o Internet Explorer 7 e versões anteriores:

    • .clearfix: after {
    • conteúdo: "";
    • display: table;
    • }

    3

    Criar o projeto básico. Este código irá encomendar o seu menu na parte superior da página e ocultar itens do menu. Esta é intencionalmente um exemplo limitado, para focar apenas o código relevante. Depois, você pode melhorá-lo adicionando propriedades CSS adicionais, como "acolchoamento" (Recheio) e "margem" (Margem).

    • .nav-wrapper {
    •    width: 100%;
    •    background: # 999;
    • }
    • .nav-menu {
    •    position: relative;
    •    display: inline-block;
    • }
    • .nav-menu li {
    •    display: inline;
    •    list-style-type: none;
    • }
    • .sub-menu {
    •    position: absolute;
    •    display: none;
    •    background: #ccc;
    • }

    4

    Fazer itens suspensos aparecem quando você passa o mouse. Os elementos da lista drop-down actualmente configurado para não mostrar. Aqui você vai ver como fazer uma sub-lista completa parecem pairar sobre a lista a que pertence:

    • .nav-menu ul li: hover gt; ul {
    •    display: inline-block;
    • }
    • Nota: Se os itens de menu drop-down levar a menus adicionais (controles flutuantes), todas as propriedades que você adicionar aqui vai afetar todos eles. Se você quer o estilo aplica-se apenas ao primeiro nível de menus, uso ".nav-menu gt; ul".

    5

    Indica o menu drop-down com uma seta. Web designers geralmente mostram que um item abre um menu com uma seta apontando para baixo. Este código irá acrescentar que seta a cada um dos itens de menu:

    • .nav-menu gt; ul gt; li: after {
    •    conteúdo: " 25bC"- / * Código Unicode seta para baixo * /
    •    font-size: .5em;
    •    display: inline;
    •    position: relative;
    •    }
    • Nota: Faça os ajustes necessários para alterar a posição da seta usando propriedades "topo" (Acima) "fundo" (Abaixo), "direito" (Direito) ou "esquerda" (Esquerda).
    • Nota: Se nem todos os itens do menu contêm as setas que apontam para baixo, não aplicar o estilo de toda a classe "nav-menu". Em vez disso, adicionar outra classe (por exemplo, "suspensa") Em cada elemento
    • seta HTML onde os visitantes. No código acima, fazem referência a esta última classe.

    6

    Ajusta o preenchimento de fundo e outras propriedades. Seu menu agora irá funcionar, mas seria bom para dar um tratamento de beleza. Se você não estiver familiarizado com as propriedades básicas do CSS, você pode procurar um guia on-line sobre como programar em CSS. Usar essas propriedades para fazer outras mudanças na aparência ea posição de cada classe de item.

    dicas

    Artigos Relacionados