Como Fazer Um Menu Vertical Para Um Site

Índice:

Como Fazer Um Menu Vertical Para Um Site
Como Fazer Um Menu Vertical Para Um Site

Vídeo: Como Fazer Um Menu Vertical Para Um Site

Vídeo: Como Fazer Um Menu Vertical Para Um Site
Vídeo: Menu lateral com apenas HTML e CSS 2024, Maio
Anonim

O menu vertical do site é uma função muito conveniente que ajuda a economizar espaço e navegar facilmente pelo recurso. Você pode fazer isso com base em folhas de estilo CSS em cascata ou usando ferramentas especiais.

Como fazer um menu vertical para um site
Como fazer um menu vertical para um site

Instruções

Passo 1

Abra o site purecssmenu.com e cadastre-se nele, caso contrário não será possível criar e baixar o menu criado. No lado esquerdo, encontre o botão Modelos e clique nele. Abaixo, haverá pequenas janelas com modelos de menu verticais. Clique neles um por um e visualize na janela de visualização. Escolha o modelo que melhor se adapta ao seu site.

Passo 2

Defina a fonte e a cor do menu usando a guia Parâmetros. Você pode selecionar uma fonte e seu tamanho no campo Fonte. Se necessário, especifique sublinhado / negrito. Defina o plano de fundo (plano de fundo) do menu vertical no campo Cores, defina a cor da fonte e a cor de plano de fundo ao pairar (fonthover / backgroundhover).

etapa 3

Vá para o menu Itens para gerenciar os itens do menu. Clicar no botão Limpar limpará os itens de amostra para que você possa criar seus próprios. Basta clicar na tecla AddItem mais para adicionar um item ao final do menu. Usando o botão AddNextItem, você pode adicionar um item que seguirá após o tempo atualmente selecionado. O botão AddSubitem no menu cria um item aninhado para o selecionado. Para remover uma linha, use o botão RemoveItem.

Passo 4

Abra os parâmetros do item (ItemParameters) na parte inferior do site. Insira um nome para o item de menu na linha Texto e seu endereço da web no Link. A linha Dica é responsável pela descrição do item, mostrada quando o cursor passa sobre o link. A seção Destino define como a página é aberta. Com o parâmetro _self, a página pode ser configurada para abrir na janela atual do navegador.

Etapa 5

Baixe o menu pronto clicando no botão Download na parte inferior da página. Copie o código correspondente localizado no arquivo purecssmenu.html no arquivo de modelo CSS: no início e no final. Certifique-se de colar o código correto e salve o arquivo.

Recomendado: