Menu Horizontal Html Css
Landing page para Lançamentos
Curso de PHP Orientado a Objetos
Menu Horizontal Html Css
Menu Horizontal em HTML e CSS: Guia Completo
No desenvolvimento de sites, a navegação é um dos aspectos mais importantes para proporcionar uma boa experiência ao usuário. O menu de navegação é um dos principais elementos dessa experiência, e, entre as várias formas de implementá-lo, o menu horizontal é um dos mais comuns e funcionais. Neste artigo, vamos explorar como criar um menu horizontal simples utilizando HTML e CSS.
Introdução ao Menu Horizontal Html Css
O menu horizontal é um tipo de navegação onde os itens do menu são dispostos lado a lado, geralmente no topo da página. Ele oferece uma navegação clara e eficiente, ideal para sites com poucas seções ou menus que não exigem muitas opções. Criar esse menu com HTML e CSS é um processo simples, mas que exige atenção aos detalhes para garantir um layout responsivo e de fácil acesso.
Estrutura Básica do Menu em HTML
Para começar, precisamos criar a estrutura básica do menu em HTML. Um menu horizontal normalmente é composto por uma lista não ordenada ( <ul> ), onde cada item da lista ( <li> ) é um link ( <a> ). Vamos ver um exemplo de como isso pode ser feito:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Horizontal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</body>
</html>No código acima, criamos uma lista não ordenada com quatro itens de menu. Cada item contém um link que redireciona para uma seção da página (representada por #home, #sobre, etc.). A classe menu será usada para estilizar o menu com CSS.
Estilizando o Menu com CSS
Agora que temos a estrutura básica, vamos estilizar o menu para torná-lo horizontal. Para isso, podemos usar o CSS para definir como os itens serão exibidos e formatados. Um dos passos principais é remover a formatação padrão de listas e aplicar o estilo de exibição “inline” para os itens da lista.
Aqui está o CSS que podemos usar:
.menu {
background-color:#202020;
width:100%;
float:left;
border-radius:8px;
}
.menu ul {
/* Resetando a formatação padrão */
list-style-type: none;
padding: 0;
margin: 0;
padding: 0;
display: block;
}
.menu li {
width: 100%;
display: inline;
list-style-type: none;
padding: 10px 15px;
}
.menu a {
text-decoration: none;
font-size: 20px;
color: #fff;
position: relative;
display: block;
text-align: center;
}
.menu a:hover { color:#007cff; }
.menu ul li a:before {
content: "";
width: 0;
height: 5px;
background-color: #ffd700;
position: absolute;
top: 120%;
left: 0;
transition: all 0.5s;
}
.menu ul li a:after {
content: "";
width: 0;
height: 5px;
background-color: #007cff;
position: absolute;
top: 120%;
right: 0;
transition: all 0.5s;
}
.menu ul li a:hover:before {
width: 50%;
transform: translateX(100%);
}
.menu ul li a:hover:after {
width: 50%;
transform: translateX(-100%);
}
/*Responsivo 768PX BREAKPOINT*/
@media (min-width:48em){
.menu ul { display:flex; }
} Explicação do CSS
- Resetando a lista: Começamos com um reset de estilo, removendo a formatação padrão das listas (como os marcadores) e os espaços internos e externos que são aplicados por padrão pelo navegador.
- Menu nav ul: A classe
.menuutilizadisplay:block para transformar a lista em uma linha. Quando acessado pelo Tablet e Mobile ele muda paradisplay:flex ele é adicionado, os elementos ficam em linha, um do lado do outro. ou seja, os itens de forma equilibrada ao longo da largura do menu. - Estilos dos itens de menu: Os links dentro dos itens de lista (
<a>) têm o texto branco e sem sublinhado. Opaddingaumenta o tamanho dos links, tornando-os mais fáceis de clicar. A propriedadetransitioné usada para adicionar um efeito suave quando o usuário passa o mouse sobre os links. - Efeito de hover: Por fim, aplicamos um efeito visual de mudança de cor de texto quando o usuário passa o mouse sobre o link, o que melhora a interação com o menu.
Tornando o Menu Responsivo
Embora o menu horizontal seja ótimo para telas grandes, em dispositivos móveis ele pode se tornar difícil de navegar, já que o espaço disponível é limitado. Uma forma de tornar o menu responsivo é empilhar os itens verticalmente em telas menores. Isso pode ser feito com uma simples regra de mídia (media query) no CSS:
/*Responsivo 768PX BREAKPOINT*/
@media (min-width:48em){
.menu ul { display:flex; }
} Neste código, acima o menu é reformatado A classe .menu utiliza display:block para transformar a lista em uma linha. Quando acessado pelo Tablet e Mobile ele muda para display:flex ele é adicionado, os elementos ficam em linha, um do lado do outro. Esse ajuste garante que o menu se adapte bem a dispositivos móveis.
Conclusão – Menu Horizontal Html Css
Criar um menu horizontal simples e eficiente com HTML e CSS é uma tarefa fácil que pode melhorar significativamente a usabilidade de um site. Usando display:flex e ajustes de estilo como o hover, podemos criar uma navegação agradável e funcional. Além disso, garantir que o menu seja responsivo, adaptando-se a diferentes tamanhos de tela, é essencial para uma boa experiência do usuário em dispositivos móveis.
Com o código fornecido e as dicas de estilo, você pode facilmente implementar um menu horizontal no seu site, deixando-o mais organizado e fácil de navegar para os seus visitantes.
Veja o Resultado baixo!
Deixe um comentário