Latest web development tutorials

barra de navegação CSS

Exemplo: barra de navegação

Barra de navegação

navegação uso hábil para qualquer site é muito importante.

Com CSS você pode converter em uma boa barra de navegação, em vez de menus HTML chato.

Navigation lista de links =

Como um padrão barra de navegação baseado em HTML é uma obrigação

. No nosso exemplo, vamos criar uma lista HTML barra de navegação padrão.

barra de navegação é basicamente uma lista de links, então use <ul> e <li> elementos são muito significativos:

Exemplos

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

tente »

Agora, vamos remover margens e preenchimento da lista:

Exemplos

ul
{
list-style-type:none;
margin:0;
padding:0;
}

tente »

Exemplos de análise:

  • list-style-type: none - antes de remover a lista de pequenas bandeiras. Uma barra de navegação não necessita de marcadores de lista
  • Retirar do navegador configuração padrão margens e preenchimento set a 0

O código de exemplo acima é nos códigos vertical e horizontal da barra de navegação padrão utilizado.

barra de navegação Vertical

O código acima, precisamos apenas de elementos de estilo <a>, estabelecendo uma barra de navegação vertical:

Exemplos

a
{
display:block;
width:60px;
}

tente »

Exemplo mostra:

  • display: block - exibir links elemento de bloco, de modo que a totalidade torna-se uma área de link clicável (e não apenas texto), o que nos permite especificar a largura
  • width: 60px - Elementos de bloco por padrão é a largura máxima. Queremos especificar uma largura de 60 pixels

Dica: Veja exemplo de um estilo totalmente bar de navegação vertical .

Nota: Certifique-se de especificar a largura do elemento nas verticais de navegação da barra <a> 's.Se você omitir a largura, o IE6 pode produzir resultados inesperados.

barra de navegação horizontal

Existem duas maneiras de criar uma barra de navegação horizontal. Use os itens da listaembutidos ou flutuantes.

Ambos os métodos são bons, mas se você quiser fazer o link com o mesmo tamanho, você deve usar o método flutuante.

itens da lista de in-line

Uma construir uma barra de navegação horizontal é especificar

  • Elemento, o código acima é o padrão built-in:

    Exemplos

    li
    {
    display:inline;
    }

    tente »

    exemplos de análise:

    • display: inline; - Por padrão, <li> elemento é um elemento de bloco. Aqui, nós remover quebras de linha antes e depois de cada item da lista, para exibir a linha.

    Dica: Veja exemplo de um estilo totalmente barra de navegação horizontal .

    Flutuante itens da lista

    Nos exemplos de links acima têm diferentes larguras.

    Para todos os links de igual largura, float <li> elemento e especificar a largura do elemento <a>:

    Exemplos

    li
    {
    float:left;
    }
    a
    {
    display:block;
    width:60px;
    }

    tente »

    exemplos de análise:

    • float: à esquerda - usar os slides elemento deslizante ao lado do outro
    • display: block - exibir links elemento de bloco, de modo que a totalidade torna-se uma área de link clicável (e não apenas texto), o que nos permite especificar a largura
    • width: 60px - Elementos de bloco por padrão é a largura máxima. Queremos especificar uma largura de 60 pixels

    Dica: Veja exemplo de um estilo totalmente barra de navegação horizontal. .