Quer o menu de navegação seja uma linha horizontal na parte superior ou uma linha vertical na lateral, ainda é apenas uma lista. Ao projetar a navegação na web, muitas vezes é fácil esquecer que um menu de navegação é apenas um grupo glorificado de links. Mas se você programar sua navegação usando XHTML + CSS, você pode criar um menu pequeno para fazer o download (o XHTML) e fácil de personalizar (o CSS).
Começando
Para começar a criar uma lista para navegação, você precisa usar uma lista. Pode ser uma lista padrão não ordenada que tenha sido identificada como navegação:
Se você olhar atentamente para o HTML, perceberá que o link "Início" também tem um ID de
você está aqui. Isso permitirá que você crie um menu que identifica a localização atual dos seus leitores. Mesmo que você não planeje ter esse tipo de sinal visual no seu site agora, é possível incluir essas informações. Se você decidir adicionar a sugestão mais tarde, terá menos codificação para preparar seu site.
Sem nenhum estilo CSS, este menu XHTML parece uma lista padrão não ordenada. Há marcadores e os itens da lista são ligeiramente recuados. Como estou usando links de espaço reservado, a maioria dos navegadores não exibirá os links como clicáveis (sublinhados e em azul). Se você colar o HTML acima em uma página da Web, sua navegação ficará assim:
- Casa
- Produtos
- Serviços
- Contate-Nos
Isso é muito chato e não se parece muito com um cardápio. Mas com apenas alguns estilos CSS adicionados à lista, você pode criar um menu que deixa você orgulhoso.
Menu de Navegação Vertical
Um menu de navegação vertical é muito fácil de escrever, pois é exibido da mesma forma que uma lista normal: para cima e para baixo. Os itens da lista são exibidos verticalmente na página.
Quando estou estilizando menus, gosto de começar do lado de fora e trabalhar. Com isso, quero dizer que primeiro estilizo
ul # navigation e depois passar para o
li elementos e, em seguida, os links, etc. Assim, para este menu, primeiro você define a largura do menu. Isso garantirá que, mesmo que os itens do menu sejam longos, eles não irão empurrar o restante do layout ou causar rolagem horizontal.
ul # navegação {largura: 12em; }
Assim que tiver a largura definida, posso jogar com os itens da lista. Isso me permite definir coisas como (para se livrar dos marcadores), cores de fundo, bordas, alinhamento de texto e margens.
ul # navegação li {estilo de lista: nenhum;cor de fundo: # 039;border-top: sólido 1px # 039;texto-alinhar: esquerda;margem: 0;} Depois de definir o básico para os itens da lista, você pode começar a jogar com a aparência do menu na área de links. Primeiro estilo o Navegação UL # LI Ae depois o A: link, A: visitado, A: hovere A: ativo (se você quiser). Para os links, eu gosto de fazer dos links um elemento de bloco (ao invés do padrão in-line). Isso os força a ocupar todo o espaço do LI-E eles agem mais como um parágrafo, o que os torna mais fáceis de estilizar como botões de menu. A outra coisa que sempre faço é remover o sublinhado ( text-decoration: nenhum;), pois isso faz com que os botões se pareçam mais com botões para mim. Mas é claro, seu design pode ser diferente. ul # navegação li a {display: bloco;text-decoration: nenhum;preenchimento: 0,25;borda inferior: sólido 1px # 39f;borda direita: sólido 1px # 39f;} Observe que 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 usabilidade. Certifique-se de definir as cores do link (link, visitado, passar e ativo) se quiser que elas sejam diferentes do padrão azul, vermelho e roxo. a: link, a: visited {color: #fff; }a: hover, a: active {color: # 000; } Também gosto de dar um pouco mais de atenção ao estado de foco alterando a cor do plano de fundo. a: hover {background-color: #fff; } Se você quiser mais exemplos de menus verticais, consulte a lista abaixo. Criar menus de navegação horizontal é um pouco mais difícil do que os menus de navegação vertical porque você precisa compensar o fato de que as listas HTML preferem exibir verticalmente. Como no menu horizontal, primeiro crie sua lista de menu de navegação:
Para criar um menu horizontal, trabalhe o mesmo que você fez com o menu vertical. Comece com o exterior e trabalhe. Já que quero que minha navegação comece no canto esquerdo, eu o defino com 0 margem esquerda e preenchimento, e flutuo para a esquerda. Você também deve adquirir o hábito de configurar a largura para que seu menu não ocupe mais ou menos espaço do que você pretende. Para menus horizontais, geralmente é a largura total do desenho. Também adicionei uma cor de plano de fundo à lista inteira para facilitar a leitura. ul # navegação {float: esquerda;margem: 0;preenchimento: 0;largura: 100%;cor de fundo: # 039;} Mas o segredo do menu de navegação horizontal está nos itens da lista. Itens de lista são normalmente elementos de bloco, o que significa que eles terão uma nova linha colocada antes e depois de cada um. Ao mudar o visor de quadra para na linha, você força os elementos da lista a ficarem alinhados um ao lado do outro horizontalmente. ul # navegação li {display: inline; } Eu tratei os links exatamente como eu os tratei no menu de navegação vertical, com as mesmas cores e decoração de texto. Eu adicionei uma borda superior para delinear os botões quando eles são passados. A única coisa removida foi o display: bloco; como isso vai colocar as novas linhas de volta e destruir o menu horizontal. ul # navegação li a {text-decoration: nenhum;preenchimento: .25em 1em;borda inferior: sólido 1px # 39f;border-top: sólido 1px # 39f;borda direita: sólido 1px # 39f;}a: link, a: visited {color: #fff; }ul # navegação li a: hover {background-color: #fff;cor: # 000;} Outro aspecto do HTML é o identificador você está aqui. Se você quiser modificar seu menu para indicar a localização atual de seus usuários, basta usar este identidade para definir uma cor de fundo diferente ou outro estilo. Mova esse atributo identidade ao item de menu correto em outras páginas para que a página atual seja sempre destacada. ul # navegação li # youarehere a {background-color: # 09f; } Se você colocar esses estilos juntos em sua página, poderá criar uma barra de menus horizontal ou vertical que funcione com seu site, mas que seja rápida de baixar e muito fácil de atualizar no futuro. Usando XHTML + CSS transforma suas listas em uma ferramenta muito poderosa para o design. Se você quiser mais exemplos de menus horizontais, consulte o seguinte.
Menu de Navegação Horizontal
Você está aqui informações de localização
