O menu é utilizado para facilitar a navegação do usuário pelas seções do site. Para atrair a atenção do visitante, o cardápio deve ser funcional, fácil de usar e ao mesmo tempo estar combinado com o design de todo o recurso.
Instruções
Passo 1
Antes de criar um menu, decida seu tipo. Você pode criar uma caixa suspensa horizontal ou vertical que será mostrada ao usuário quando o usuário passar o cursor do mouse sobre ela. Ao escolher um menu específico, você pode ser guiado por quão conveniente será para os visitantes usá-lo e como ele será combinado com o design.
Passo 2
Depois de escolher um tipo de menu, abra seu arquivo de página usando qualquer editor de texto que você usa para editar HTML. Navegue até a seção desejada do código onde deseja inserir seu elemento de interface.
etapa 3
Depois disso, faça uma lista de opções criando um bloco e fazendo uma lista numerada com o id atribuído a ele. Por exemplo:
- Link 1
- Link 2
- Link 3
Neste exemplo, criei uma lista com marcadores de três elementos e a coloquei em uma camada div com o ID do painel de identificação.
Passo 4
Vá para o bloco de seção de sua página e crie o menu de folha de estilo em cascata apropriado. Se você deseja criar um menu horizontal, pode incluir o atributo embutido para a lista resultante:
#panel ul li {display: inline; }
Etapa 5
Para criar uma linha horizontal ao longo de todo o comprimento da página, você pode usar o seguinte código:
#panel ul {margem esquerda: 0; preenchimento: 2px 0; }
Etapa 6
Então você pode fazer a divisão visual em retângulos:
#panel ul li a {margin-left: 3px; borda: 1px; preenchimento: 2px 3px; fundo: azul; }
Este código define recuos de texto a partir de elementos de borda por meio dos atributos de margem esquerda e preenchimento, e também define uma cor de fundo para cada um dos itens da lista. Neste exemplo, a cor é azul, mas você pode alterá-la a seu próprio critério.
Etapa 7
Para apontar para o item na página atual que está selecionado na guia, defina os parâmetros apropriados para a classe aberta:
#menu ul li a # open {background: red; border-bottom: 1px; }
A página atual selecionada no painel agora será exibida em vermelho.
Etapa 8
Salve as alterações no arquivo e verifique a funcionalidade do código escrito abrindo sua página em um navegador. Para definir opções de exibição adicionais, você sempre pode adicionar CSS ou HTML para aprimorar a aparência do objeto.
