Como Fazer Um Menu Suspenso Vertical

Índice:

Como Fazer Um Menu Suspenso Vertical
Como Fazer Um Menu Suspenso Vertical

Vídeo: Como Fazer Um Menu Suspenso Vertical

Vídeo: Como Fazer Um Menu Suspenso Vertical
Vídeo: Side Navigation with Dropdown | HTML and CSS || JDBCODE 2024, Maio
Anonim

O menu suspenso vertical é muito útil - ele economiza espaço na página da web e, ao mesmo tempo, ajuda a navegar facilmente no site. Tente fazer um menu suspenso baseado em CSS - Cascading Style Sheets. Se você ainda não é um especialista na criação de código CSS, use o serviço purecssmenu.com. Você deve selecionar um tipo de menu, personalizar sua aparência e adaptá-lo ao seu próprio site. O próprio serviço irá gerar o código necessário, que você insere nos arquivos do seu site.

Como fazer um menu suspenso vertical
Como fazer um menu suspenso vertical

Instruções

Passo 1

Cadastre-se no site purecssmenu.com, caso contrário não será possível baixar o menu criado. Clique no botão Modelos no lado esquerdo da página. Abaixo, você verá várias pequenas janelas com modelos de menu suspenso, clicando em que irá carregar uma visualização à direita da janela de visualização. Escolha um modelo adequado ao seu site

Passo 2

Personalize a fonte e a cor do menu: use a guia Parâmetros. No campo Fonte, selecione uma fonte, tamanho da fonte, se necessário, sublinhado e negrito. No campo Cores, defina o plano de fundo do menu, a cor da fonte e as cores de foco e foco da fonte

etapa 3

Abra a guia Itens para gerenciar os itens do menu. Se você clicar no botão Limpar lixeira, os itens de amostra são limpos e você pode criar os seus próprios. Para fazer isso, pressione o botão Adicionar item de mais - o item será adicionado ao final do menu. O botão Adicionar próximo item é usado para adicionar um item após o tempo atualmente selecionado. O botão Adicionar subitem cria um item de submenu para a seleção. Da mesma forma, para remover um item, use o botão Remover Item

Passo 4

Preste atenção ao campo Parâmetros do item na parte inferior do site. Na linha Texto, especifique o nome do item de menu, na linha Link - o url da página à qual esse item levará. Na linha Dica, você pode deixar uma descrição do item, que será exibida quando você passar o mouse sobre o link. A linha de destino é usada para determinar a maneira de abrir a página para a qual o link leva. O parâmetro _self nesta linha abre a página na mesma janela do navegador que a atual

Etapa 5

Após finalizar a configuração do menu, faça o download - clique no botão Download no canto inferior direito da página (esta função está disponível após o cadastro no site). Selecione uma pasta em seu disco rígido onde o arquivo compactado será salvo. Descompacte-o. Você precisará copiar o código necessário do arquivo purecssmenu.html para o arquivo de modelo CSS do seu site. Abra o arquivo purecssmenu.html com um editor de texto e copie o código entre as tags e no modelo CSS do seu site (esse arquivo tem uma extensão.css e é semelhante a file.css). Agora cole o código em seu arquivo de modelo de site (temas) - o código de purecssmenu.html entre os comentários e em vez do código de menu normal. Para fazer isso, você precisa estar pelo menos um pouco familiarizado com programação. Certifique-se de colar o código no arquivo correto e salve.

Recomendado: