Para fazer um menu de 1 nível, existem muitas soluções. Você pode usar tags UL e LI para incluir elementos de menu. Ou você também pode criar uma tag div, dentro dela há uma lista de elementos de menu.

O resultado deste artigo terá a seguinte interface:

Nota : O menu será de links, por isso devemos usar a tag a para anexar links a cada um de seus elementos.

Construir HTML para menus de 1 nível

Vou escolher a solução é criar uma tag div para envolver os menus.

 <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div>

Agora só preciso estilizar o CSS para este HTML para obter o resultado desejado.

Adicionar CSS para o menu de 1 nível

Passo 1 : Eu quero que o fundo do menu seja azul, então escreverei CSS para a tag div ao redor.

 .menu{ background: #333 }

Passo 2 : Crie uma fonte branca para menus. Adicione espaços em branco e aumente o espaçamento entre os menus.

 .menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; }

Parece muito melhor, não é? Agora quero criar um efeito ao mover o mouse nos menus, o fundo mudará para branco e a cor do texto mudará para azul.

Para criar CSS para movimento do mouse, usamos a propriedade CSS :hover .

 .menu a:hover{ color: #333; background: #fdfdfd; }

Escolha as tags UL e LI para criar um menu de 1 nível

Esta solução, a estrutura HTML será um pouco complicada, mas depois se você quiser adicionar submenus, é bem mais fácil.

A estrutura HTML ficará assim :

 <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul>

Passo 1 : Por padrão, a tag ul terá preenchimento e margem CSS. Portanto, precisaremos redefinir para que o menu seja exibido como na parte 1. Também não nos esqueçamos de adicionar um plano de fundo a ele.

 .menu{ margin: 0px; padding: 0px; background: #333 }

Etapa 2 : Como a tag li é exibida como um bloco, uma é convertê-la em inline, a outra é usar float para empurrá-la para um lado. Também devemos remover os pontos usando list-style:none .

Vou usar flutuar.

 .menu li{ float:left; list-style: none }

Oh, parece que o fundo desapareceu. A razão é que usamos float:left para as tags li , então a altura do menu não dependerá mais da tag li . Vamos adicionar a propriedade overflow:hidden ao .menu e isso resolverá.

 .menu{ margin: 0px; padding: 0px; background: #333; overflow: hidden }

Passo 3 : Agora só precisamos estilizar a tag como na parte 1.

 .menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; } .menu a:hover{ color: #333; background: #fff; }

Os resultados foram os esperados.

Então, eu completei o tutorial sobre como construir um menu de 1 nível com HTML e CSS simples. Neste artigo, quero que você pratique suas habilidades ao lidar com cada situação ao construir um menu. Mais tarde, você encontrará muitos tipos de menu mais complexos.