Como Criar um Site com Menu Lateral (Do Legado dos Frames ao CSS Moderno)
Fala, futuro mestre do Front-End! Se você acompanhou a nossa última aula sobre a história da internet, já sabe o que são os famosos "frames". Agora, vamos entender como os webmasters do passado dividiam a tela para criar menus laterais e, o mais importante, como nós fazemos isso hoje em dia com qualidade profissional.
Neste tutorial de nosso curso de HTML, vamos montar um layout clássico: um menu na lateral esquerda (ocupando 20% da tela) e a área de conteúdo na direita (ocupando 80%). Prepare-se para ver a mágica da evolução do código!
A Estrutura de um Menu Lateral
Como criar um menu lateral fixo? No HTML legado, usava-se a tag <frameset cols="20%,*"> para dividir a janela fisicamente. Hoje, a forma correta e moderna é usar o HTML5 semântico com a tag <nav> para o menu lateral e <main> para o conteúdo, organizando-os lado a lado através da propriedade display: flex; no CSS.
A Abordagem Histórica: O Uso do `frameset`
Antigamente, para ter um menu que não precisava ser recarregado toda vez que o usuário clicava em um link, nós tínhamos que criar três arquivos separados. O primeiro era o menu.html (apenas com os links). O segundo era o home.html (o conteúdo da página inicial).
E o terceiro era o famigerado index.html, que não continha texto nenhum, apenas a tag <frameset> atuando como uma tesoura que cortava o navegador em pedaços. O código era assim:
<!DOCTYPE html>
<html>
<head>
<title>Site em Frames (Obsoleto)</title>
</head>
<!-- Corta a tela: 20% para o menu, e o asterisco (*) pega o restante (80%) -->
<frameset cols="20%,*">
<frame src="menu.html">
<frame src="home.html">
</frameset>
</html>Dividir a tela dessa forma impedia que o site funcionasse em celulares (responsividade zero). Além disso, se um usuário buscasse no Google e caísse no seu arquivo
menu.html, ele ia ver apenas uma lista de links com a tela inteira em branco, sem o resto do site!
Cansado de Tutoriais Ultrapassados? Atualize sua Carreira! 🚀
A internet está cheia de materiais que ensinam códigos dos anos 2000. O mercado moderno exige desenvolvedores que saibam criar layouts responsivos, limpos e otimizados para o Google.
"Estava travado tentando alinhar minha barra lateral. A Apostila Progressiva me ensinou CSS Flexbox e Grid do zero de forma absurdamente didática. Salvou minha vida no estágio!" - Carlos, Desenvolvedor Front-End.
A Solução Moderna: Criando o Layout com CSS Flexbox
O que nós fazemos hoje? Mantemos todo o site em um arquivo só (ou usamos PHP para injetar o menu via servidor) e deixamos o CSS cuidar da organização visual. A melhor ferramenta para alinhar blocos lado a lado hoje se chama Flexbox.
Acompanhe o código abaixo. Veja como criamos um "container" principal e dissemos a ele: "Coloque o menu na esquerda ocupando 20% e o conteúdo na direita ocupando o resto".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Layout Moderno com CSS Flexbox</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; background: #f8fafc; }
/* O Flexbox ativa a exibição lado a lado */
.layout-principal {
display: flex;
min-height: 100vh; /* Ocupa 100% da altura da tela */
}
/* O Menu Lateral (antigo frame esquerdo) */
nav.menu-lateral {
width: 20%;
background-color: #0f172a;
color: white;
padding: 20px;
}
nav.menu-lateral a {
display: block;
color: #cbd5e1;
text-decoration: none;
margin-bottom: 15px;
}
/* O Conteúdo Principal (antigo frame direito) */
main.conteudo {
flex: 1; /* Ocupa todo o espaço restante automaticamente! */
padding: 40px;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="layout-principal">
<!-- MENU DA ESQUERDA -->
<nav class="menu-lateral">
<h2>Navegação</h2>
<a href="#">Home</a>
<a href="#">Apostila de HTML5</a>
<a href="#">Apostila de CSS3</a>
<a href="#">Contato</a>
</nav>
<!-- CONTEÚDO DA DIREITA -->
<main class="conteudo">
<h1>Bem-vindo à Era Moderna do Front-End</h1>
<p>Sem frames, sem gambiarras. O código é lido perfeitamente pelo Google e as telas se adaptam de forma fluida.</p>
</main>
</div>
</body>
</html>flex: 1; na área principal é o equivalente moderno ao asterisco * dos antigos frames. Ela avisa ao navegador: "Pegue todo o espaço que sobrar depois que o menu pegar os 20% dele". Lindo, não é?
O Resultado Vivo (Renderização Simples):
Desafio de HTML e CSS (O Exercício Mental)
No tutorial antigo, nós pedíamos para os alunos criarem um site de bandas usando a propriedade rows no frameset, para criar um menu superior cortando a tela horizontalmente.
No CSS Moderno com Flexbox, se você quiser mudar os blocos de lado a lado (menu esquerdo) para um em cima do outro (menu no topo), basta aplicar a regra flex-direction: column; no container principal! Tente fazer isso no seu editor de código. Crie um menu horizontal e uma área de conteúdo abaixo dele!
Perguntas Frequentes (FAQ)
Como evitar que eu tenha que copiar o menu HTML em todas as páginas?
Como não usamos mais frames, a forma mais eficiente e utilizada no mercado corporativo é usar o PHP. Você cria um arquivo menu.php e, em todas as páginas, usa o comando <?php include('menu.php'); ?>. Assim, se você mudar um link no menu, todas as páginas do site se atualizam automaticamente.
Flexbox ou CSS Grid: qual usar para layouts?
Ambos são poderosos! Em regra geral, o Flexbox é ideal para alinhar elementos em uma única dimensão (ou em uma linha, ou em uma coluna), sendo perfeito para alinhar menus, barras e centralizações simples. O CSS Grid é feito para layouts bidimensionais completos, como galerias ou a arquitetura complexa de toda a página (dividindo em linhas e colunas ao mesmo tempo).
O que significa 100vh no CSS?
O vh significa "Viewport Height" (Altura da janela visível). Quando colocamos min-height: 100vh; no nosso container principal, estamos garantindo que a barra lateral e o conteúdo se estiquem até tocar o rodapé da tela do seu monitor, impedindo que o menu fique "cortado" no meio caso tenha pouco texto.
🎯 O que estudar a seguir:
Agora que o esqueleto do site está pronto, você precisa recheá-lo de interatividade e otimização:
- Como estilizar e centralizar botões com CSS
- Curso Completo de PHP: O jeito avançado de incluir Menus (Includes)
- Meta Tags no HTML: Como otimizar seu site para o Google (SEO Técnico)
Nenhum comentário:
Postar um comentário