Quer o menu de navegação do seu site seja uma linha horizontal na parte superior ou uma linha vertical na lateral, é apenas uma lista. Ao projetar navegação na web, um menu de navegação é um grupo de links. Quando você programa sua navegação usando XHTML + CSS, pode criar um menu pequeno para download (XHTML) e fácil de personalizar (CSS).
Começando
Para criar uma lista para navegação, você precisa usar uma lista. Pode ser uma lista não ordenada padrão que foi identificada como a navegação. Por exemplo:
- Casa
- Produtos
- Serviços
- Contate-Nos
Ao olhar para o HTML, o link Home tem um ID de.
Você está aqui
Isso permite que você crie um menu que identifica a localização atual para seus leitores. Mesmo se você não planeja ter esse tipo de dica visual em seu site agora, você pode incluir essa informação. Se você decidir adicionar a sugestão posteriormente, terá menos codificação para preparar seu site.
Sem nenhum Estilo CSS, este menu XHTML parece uma lista não ordenada padrão. Existem marcadores e os itens da lista estão ligeiramente recuados. Ao usar
links de espaço reservado, a maioria dos navegadores não exibe os links como clicáveis (sublinhados e em azul). Quando você cola o HTML em uma página da web, sua navegação fica assim:- Casa
- Produtos
- Serviços
- Contate-Nos
Isso não se parece muito com um menu. No entanto, com alguns estilos CSS adicionados à lista, você pode criar um menu que o deixará orgulhoso.
Se você quiser mais exemplos de menus verticais, faça uma pesquisa na web para o seguinte:
- Um menu vertical estilizado
- Um modelo básico de menu vertical
- Um menu vertical estilizado com You Are Here
- Um modelo básico de menu vertical com You Are Here
Menu de navegação vertical
Um menu de navegação vertical é fácil de escrever porque é exibido da mesma forma que uma lista normal: para cima e para baixo. Os itens da lista são exibidos verticalmente na parte inferior da página.
Ao estilizar menus, comece do lado de fora e trabalhe dentro. Primeiro, defina o estilo da navegação:
ul # navegação
Em seguida, vá para os elementos e links. Primeiro, defina a largura do menu. Isso garante que, se os itens de menu forem longos, os itens não empurrarão o resto do layout ou causarão rolagem horizontal.
ul # navegação {largura: 12em; }
Depois de definir a largura, trabalhe nos itens da lista. Isso permite que você defina coisas como cores de fundo, bordas, alinhamento de texto e margens.
ul # navigation li {
estilo de lista: nenhum;
cor de fundo: # 039;
borda superior: sólido 1px # 039;
alinhamento de texto: esquerda;
margem: 0;
}
Depois de definir as noções básicas para os itens da lista, trabalhe na aparência do menu na área de links. Primeiro estilize a navegação:
UL # navegação LI A
Em seguida, estilize o seguinte:
A: link
A: visitou
A: pairar
A: ativo
Para os links, torne-os um elemento de bloco (em vez do embutido padrão). Isso força os links a ocupar todo o espaço do LI e atuar como um parágrafo, tornando os links mais fáceis de estilizar como botões de menu. Em seguida, remova o seguinte:
sublinhado, decoração de texto: nenhum; como
Isso faz com que os botões pareçam mais com botões. Seu design pode ser diferente.
ul # navigation li a {
display: bloco;
decoração de texto: nenhum;
preenchimento: .25em;
borda inferior: sólido 1px # 39f;
borda direita: sólido 1px # 39f;
}
Com o display: bloco; definido nos links, toda a caixa do item de menu é clicável, não apenas as letras. Isso também é bom para a usabilidade. Defina as cores do link (link, visitado, em foco e ativo) se desejar que os links sejam diferentes do azul, vermelho e roxo padrão.
a: link, a: visitado {cor: #fff; }
a: pairar, a: ativo {cor: # 000; }
Você também pode dar um pouco de atenção ao estado de foco, alterando a cor de fundo.
a: hover {background-color: #fff; }
Menu de navegação horizontal
Criar menus de navegação horizontal é um pouco mais difícil do que menus de navegação vertical porque você tem que compensar o fato de que as listas HTML preferem exibir verticalmente. Tal como acontece com o menu horizontal, crie a lista do menu de navegação:
- Casa
- Produtos
- Serviços
- Contate-Nos
Para criar um menu horizontal, trabalhe da mesma forma que você fez com o menu vertical. Comece com o exterior e trabalhe por dentro. Para iniciar a navegação no canto esquerdo, defina-o com 0 margem esquerda e preenchimento, e flutue para a esquerda.
Adquira o hábito de definir a largura para que seu menu não ocupe mais ou menos espaço do que você deseja. Para menus horizontais, geralmente é a largura total do design. Você também pode adicionar uma cor de fundo à lista para torná-la mais fácil de ler.
ul # navigation {
flutuar: esquerda;
margem: 0;
preenchimento: 0;
largura: 100%;
cor de fundo: # 039;
}
O segredo do menu de navegação horizontal está nos itens da lista. Os itens de lista são normalmente elementos de bloco, o que significa que esses itens têm uma nova linha colocada antes e depois de cada um. Ao mudar a exibição de bloco para embutido, você força os elementos da lista a se alinharem horizontalmente um ao lado do outro.
ul # navigation li {display: inline; }
Trate os links exatamente como o menu de navegação vertical, com as mesmas cores e decoração de texto. Adicione uma borda superior para delinear os botões quando o usuário passa o mouse sobre um botão. Então, remova display: bloco; pois isso coloca as novas linhas de volta e destrói o menu horizontal.
Você está aqui, informações de localização
Outro aspecto do HTML é este identificador:
Você está aqui
Se você deseja modificar seu menu para indicar a localização atual de seus usuários, use este ID para definir uma cor de fundo diferente ou outro estilo. Mova esse ID de atributo para o item de menu correto em outras páginas para que a página atual esteja sempre destacada.
Se você colocar esses estilos juntos em sua página, poderá criar uma barra de menu horizontal ou vertical que funcione com seu site e seja rápida de baixar e fácil de atualizar. O uso de XHTML + CSS transforma suas listas em uma ferramenta poderosa de design.
Se você quiser mais exemplos de menus horizontais, pesquise o seguinte na web:
- Um menu horizontal estilizado
- Um modelo básico de menu horizontal
- Um menu horizontal estilizado com o You Are Here
- Um modelo de menu horizontal básico com You Are Here