Este é o décimo primeiro post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Neste artigo vamos te ensinar como fazer um menu em HTML, ou seja, um menu totalmente responsivo com HTML5 e CSS3.
Conteúdo
Como fazer um menu em HTML
Hoje em dia, é cada vez mais importante que os sites sejam acessíveis em uma variedade de dispositivos e tamanhos de tela. Um menu responsivo é uma parte importante desse esforço, pois permite que os usuários acessem o conteúdo de forma clara e organizada, independentemente do tamanho da tela do dispositivo.
Neste guia, vamos explorar as etapas necessárias para criar um menu responsivo usando HTML5 e CSS3. Veremos como definir a estrutura básica do menu, como estilizá-lo para diferentes tamanhos de tela e como torná-lo interativo para os usuários poderem navegar pelo site de forma eficaz.
Se você está buscando criar um menu responsivo para o seu site, continue lendo para aprender como fazê-lo usando essas poderosa tecnologia, a web.
O que preciso saber antes de começar a criar um menu?
No entanto, para seguir esse guia sem dificuldades, é necessário entender sobre a tecnologia HTML. Então recomendamos que também siga para o tutorial “O que é HTML” depois volte aqui. Pois assim ira absorver todo o conteúdo.
Introdução – como fazer um menu em HTML
Para criar um menu responsivo em um site, é possível usar HTML5 e CSS3. O HTML5 é uma linguagem de marcação que define a estrutura básica de uma página da web, enquanto o CSS3 é usado para estilizar e posicionar elementos na página.
Então juntas, essas tecnologias permitem que você crie um menu que se adapte automaticamente a diferentes tamanhos de tela, garantindo que o usuário possa navegar pelo site facilmente em qualquer dispositivo.
Estrutura de um menu responsivo em HTML
A estrutura HTML de um menu pode variar dependendo das necessidades do site, mas, em geral, um menu simples pode ser criado seguindo com o elemento <nav>, ele é usado para indicar que o conteúdo é uma navegação.
Estrutura nav com logo e links
Nessa estrutura, o elemento <nav> é usado para indicar que o conteúdo é uma navegação. O elemento <ul> é usado para criar uma lista não ordenada, enquanto cada item de menu é representado por um elemento <li>.
É importante notar que, para criar um menu mais complexo, responsivo e com logo, devemos usar outras tags HTML, como <div> para fazer a separação da coluna entre a logo e os itens de navegação, e nesse caso <input> e <label> para ativar o dropdown na versão mobile. Neste momento é importante garantir que a estrutura do menu esteja clara e organizada para os usuários.
<nav class="navbar">
<!-- LOGO -->
<div class="logo">Blog Dev</div>
<!-- LINKS -->
<div></div>
</nav>
Lista de links importantes
Portanto, agora vamos criar uma lista de links para um menu usando os elementos HTML <ul> e <li>. Para isso, basta definir a lista de links dentro do elemento <ul> e cada link dentro do elemento <li>. Aqui está um exemplo:
<!-- NAVEGAÇÃO MENU -->
<ul class="nav-links">
<!-- CHECKBOX -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰ </label>
<!-- NAVEGAÇÃO MENUS -->
<div class="menu">
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Preços</a></li>
<li><a href="#">Contato</a></li>
</div>
</ul>
Neste exemplo, cada link é criado dentro de um elemento <a>, com o atributo href definindo o endereço do link. Você pode adicionar quantos links desejar dentro da lista, e também mais a frente vamos te ensinar a estilizá-los usando CSS3.
Aplicando CSS – como fazer um menu em HTML
Depois de identificar os elementos HTML que compõem o menu, em seguida, criamos as regras CSS para estilizá-los.
A determinação geral li e a define a exibição da lista de links sem marcadores e decoraçãos no texto do link. A regra .navbar define o fundo do menu e centraliza o conteúdo usando display: flex e justify-items: center.
Logo em seguida passamos a determinação para a logo, e depois para o menu aparecer alinhado ao lado, e cada item da lista estar espaçado e estilizado.
A regra .menu li:hover define a cor de fundo do link quando o mouse está sobre ele. Além disso escondemos o checbox, e o icone da versão de pc.
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR ESTILO */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: teal;
color: #fff;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* CHECKBOX HACK */
input[type=checkbox]{
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
CSS para menu responsivo dropdow mobile
Para criar um menu responsivo dropdown para dispositivos móveis, você pode usar somente CSS. Aqui está um exemplo de como fazer isso:
/* NAVBAR MENU RESPONSIVA*/
/* APLICAÇÃO MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display:none;
position: absolute;
background-color:teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color:#4c9e9e;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
display: block;
}
.hamburger {
display: block;
}
}
Neste exemplo, o menu é criado usando os elementos HTML <nav>, <div>, <ul>, <span>, <input>, <li> e <a>. O elemento com classe “.menu” ficara escondido. A regra input[type=checkbox]:checked ~ .menu define a exibição dos menus como ocultos e absolutos. E também define a exibição do menu quando é clicado.
A regra @media (max-width: 768px) define um estilo para telas menores, onde o menu é oculto e exibido como uma lista vertical, e o ícone do menu é adicionado. Quando o ícone do menu é clicado, a lista de links é exibida. A especificação .hamburger é aplicada apenas em telas menores e define a exibição do ícone do menu.
Com essas técnicas, você pode criar um menu responsivo dropdown para dispositivos móveis que permita que os usuários naveguem facilmente em seu site em telas menores.
Se você gostou desse conteúdo sobre como fazer um belo menu com HTML, saiba que pode ampliá-lo ainda mais com o guia como fixar o seu menu com algumas linhas de CSS.
Conclusão – como fazer um menu em HTML
Em resumo, criar um menu em HTML é uma tarefa fundamental na construção de um site. Para criar um menu, você precisa estruturar uma lista de links usando a marcação HTML e estilizar o menu usando o CSS para torná-lo atraente e usável.
Para um menu responsivo, você pode usar as técnicas de media query para ajustar o menu a diferentes tamanhos de tela e adicionar um dropdown para permitir que os usuários naveguem facilmente em dispositivos móveis.
Com as técnicas adequadas de HTML e CSS, você pode criar um menu de navegação eficaz e atraente para o seu site, permitindo que os usuários encontrem facilmente o conteúdo que desejam. Lembre-se de manter o menu simples e fácil de usar, evitando opções desnecessárias e garantindo que as categorias sejam claras e fáceis de entender.
Demostração e código final HTML e CSS
Este é apenas um exemplo básico de como fazer um menu em HTML5 e CSS3. As possibilidades são muitas e a aparência do menu pode ser personalizada conforme as necessidades do seu projeto.
<nav class="navbar">
<!-- LOGO -->
<div class="logo">Blog Dev</div>
<!-- LINKS -->
<div>
<!-- NAVEGAÇÃO MENU -->
<ul class="nav-links">
<!-- CHECKBOX -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰ </label>
<!-- NAVEGAÇÃO MENUS -->
<div class="menu">
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Preços</a></li>
<li><a href="#">Contato</a></li>
</div>
</ul>
</div>
</nav>
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR ESTILO */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: teal;
color: #fff;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* CHECKBOX HACK */
input[type=checkbox]{
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* NAVBAR MENU RESPONSIVA*/
/* APLICAÇÃO MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display:none;
position: absolute;
background-color:teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color:#4c9e9e;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
display: block;
}
.hamburger {
display: block;
}
}
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
