Nós, da GoDaddy, estamos dando continuidade aos conteúdos sobre HTML e, hoje, falamos de um recurso fundamental dessa linguagem de programação e para a navegação web como um todo. Vamos aprender como criar um menu de navegação em HTML!
O HTML (HyperText Markup Language) é a linguagem de marcação mais popular e utilizada pelos desenvolvedores web no mundo todo.
Para se ter uma ideia, cerca de 94,5% de todos os sites publicados na rede mundial de computadores contam com um arquivo HTML em sua estrutura, segundo o W3 Techs.
Essa linguagem é utilizada para desenvolver a estrutura do website, como se fosse uma espécie de planta que define a distribuição dos conteúdos na página e suas respectivas funções.
O HTML costuma ser utilizado em parceria com o CSS (Cascade Style Sheets), que, por sua vez, é uma linguagem de estilo usada de forma complementar para implementar recursos gráficos e dar vida ao design das páginas.
Se você acha que o percentual de utilização do HTML nos sites é alto, saiba que o do CSS é ainda maior. Aliás, 97% de todas as páginas web possuem um documento CSS em sua estrutura, também de acordo com o W3 Techs.
Diante da grande popularidade dessas linguagens de programação, resolvemos fazer esse conteúdo para te explicar como criar um menu de navegação em HTML e CSS.
Vamos te explicar também a importância desse recurso para o funcionamento e navegabilidade dos sites. Confira!
Como criar um menu de navegação em HTML?
Primeiramente, vamos fazer uma breve introdução sobre o menu de navegação de sites. Essa ferramenta é crucial para o design de qualquer site na internet que conte com um conjunto de páginas com conteúdos diferenciados entre si.
Na verdade, até em sites one-page, como veremos mais a seguir, essa ferramenta é importante. Porque é justamente ela que vai transportar de forma mais rápida e direcionada o usuário para outras seções da página.
Em termos de HTML, o menu nada mais é que uma parte gráfica da página com uma lista de ícones com links (ou âncoras) que permitem o usuário a navegar com facilidade por todas as páginas do site.
Ele geralmente se encontra no cabeçalho, na parte superior do layout, ou como coluna nas laterais. A ideia é que o menu esteja presente em todas as páginas do site para servir como uma central de portas para o usuário, independente de onde ele esteja.
Tendo isso em mente, como criar um menu de navegação em HTML?
Para que o menu não seja apenas uma lista de opções crus e sem atratividade, o código HTML deve ser utilizado em integração com o CSS.
É justamente a linguagem CSS que vai definir não só a localização do menu, mas também as cores e os detalhes da parte gráfica que serão incrementadas.
Código de menu de navegação HTML
Veja abaixo um exemplo de menu de navegação horizontal em HTML e CSS. Nesse caso, foi usada tag “<ul>”, que não numera a ordem dos elementos do menu:
<html>
<head>
<title>Menu de Navegação</title>
<style>
/* Estilos de exemplo (pode personalizar de acordo com suas preferências) */
ul {
list-style: none;
padding: 0;
}
li {
display: inline;
margin-right: 20px;
}
</style>
</head>
<body>
<ul>
<li><a href="link da página">Página Inicial</a></li>
<li><a href="link da página">Sobre</a></li>
<li><a href="link da página">Serviços</a></li>
<li><a href="link da página">Contato</a></li>
</ul>
</body>
</html>
Cada item da lista do menu é simbolizado pela tag <li>, enquanto a URL dos links são englobados pela tag <a>.
Saiba tudo sobre a linguagem de programação HTML com esse vídeo do nosso canal no YouTube:
Como usar o menu de navegação em HTML?
No exemplo acima, utilizamos os seguintes itens para compor o menu de navegação em HTML:
- Página inicial;
- Sobre;
- Serviços;
- Contato.
Esse é modelo básico para o menu de navegação do site de uma empresa comercial. Caso o site seja um loja virtual, a opção “Produtos” também pode ser adicionada. Já em casos de marketplaces, o menu pode trazer todas as categorias e departamento de produtos à venda no site.
Por sinal, se você quiser organizar o menu de outra forma que não seja horizontal e não ordenado, existem outras categorias do CSS que podem te ajudar, como:
- “position: fixed” para deixá-lo no topo da página:
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
- “.sidebar” para deixá-lo na barra lateral:
.sidebar {
width: 250px;
float: left;
}
.menu {
width: 100%;
}
- “.footer” para deixá-lo no rodapé:
.footer {
width: 100%;
position: relative;
}
.menu {
width: 100%;
}
E aí, quais dessas três opções você acha que combina melhor com a proposta e estrutura do seu site?
Aprenda mais detalhes sobre o Border CSS com esse vídeo exclusivo do canal da GoDaddy no YouTube:
Como criar menu de navegação com a GoDaddy?
Você sabia que é possível criar um menu de navegação em HTML sem ter conhecimentos técnicos em linguagem de programação?
Com o Criador de Sites da GoDaddy, você tem acesso a uma enorme biblioteca de templates 100% customizáveis para você criar não só um menu, mas todo um site profissional do zero e com a cara da identidade visual da sua marca!
Basta escolher o template que contém o menu de navegação na posição que você deseja e estilizá-lo de acordo com a estratégia digital e propósito do seu negócio. Tudo isso é possível com uma série de recursos simples e extremamente intuitivos.
Experimente gratuitamente e tenha seu site pronto em tempo recorde!
Veja como criar um site profissional do zero com apenas alguns passos:
Gostou do conteúdo e tirou todas as suas dúvidas sobre menu de navegação em HTML e CSS? Maravilha! Continue acompanhando todas as novidades do blog da GoDaddy e aprimore seus conhecimentos sobre empreendedorismo digital!
Até a próxima!
