ScriptDicas

Como criar um menu em HTML e CSS

22 de dez. de 2022

Para criar um menu em HTML é muito simples, usaremos duas tags do HTML mais usadas para criação do menu que são:

  1. <ul>: A tag ul é conhecida como uma lista não ordenada
  2. <li>: Já a tag li é utilizada para ser um elemento de uma lista, ou seja, um item do menu

Então para criarmos nosso menu vamos utilizar uma tag ul e três li como nosso exemplo abaixo:

<ul>
    <li><a href="#">Página Inicial</a></li>
    <li><a href="#">Serviços</a></li>
    <li><a href="#">Contato</a></li>
</ul>

Onde tiver <a href="#">, substitua por <a href="link-da-sua-pagina">

Como podemos observar, nosso menu ainda não está legal, ele possuí bolinhas pretas na esquerda e um item está em baixo do outro.

Para resolver isso, vamos aplicar um CSS para estilizar nosso menu:

ul {
  display: flex;
  margin: 0;
  padding: 0;
}	
li {
  list-style: none;
  display: inline;
}
li a {
  text-decoration: none;
  color: black;
  padding: 5px;
  border: 1px solid;
  margin-right: -1;
}

Agora ficou com cara de menu, segue a página completa utilizando apenas HTML com CSS:

 <!DOCTYPE html>  
   <html>  
   <head>  
     <title>Menu em HTML e CSS</title>
     <style>
	ul {
	  display: flex;
	  margin: 0;
	  padding: 0;
	}
	li {
	  list-style: none;
	  display: inline;
	}
	li a {
	  text-decoration: none;
	  color: black;
	  padding: 5px;
	  border: 1px solid;
	  margin-right: -1px;
	}
     </style>
   </head>  
   <body>  
     <ul>
	<li><a href="#">Página Inicial</a></li>
	<li><a href="#">Serviços</a></li>
	<li><a href="#">Contato</a></li>
     </ul>
   </body>  
 </html>