Página inicial
Carsai Mozambique
CarsaiDev

Construir Barra de Navegação Simples Usando HTML

Construa uma Barra de Navegação Responsiva em 5 Minutos com HTML, CSS e JavaScript...
Carsai Mozambique

Construa uma Barra de Navegação Responsiva em 5 Minutos com HTML, CSS e JavaScript

Passo 1: Estrutura HTML Básica

<nav class="navbar">
  <div class="logo">MeuSite</div>
  <ul class="nav-links" id="nav-links">
    <li><a href="#">Início</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Serviços</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
  <div class="hamburger" id="hamburger">&#9776;</div>
</nav>

Passo 2: CSS (style.css)

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links li a {
  color: white;
  text-decoration: none;
}

.hamburger {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* Responsivo */
@media (max-width: 600px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #333;
    position: absolute;
    top: 50px;
    right: 0;
    width: 150px;
    border-radius: 4px;
  }
  .nav-links.active {
    display: flex;
  }
  .hamburger {
    display: block;
  }
}

Passo 3: JavaScript (script.js)

const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('nav-links');

hamburger.addEventListener('click', () => {
  navLinks.classList.toggle('active');
});

Resultado:

Você terá uma barra de navegação elegante que mostra os links horizontalmente no desktop e se recolhe em um menu hamburguer em telas móveis para uma experiência de usuário limpa.

Confira as imagens abaixo:





  • Leva tempo para aprender HTML, CSS e JavaScript.
  • Leva tempo para dominar frameworks frontend como React ou Vue.
  • Leva tempo para entender design responsivo e compatibilidade entre navegadores.
  • Leva tempo para depurar problemas complexos de layout e funcionalidade.
  • Leva tempo para construir código limpo e sustentável.
  • Leva tempo para trabalhar em projetos reais e portfólios.
  • Leva tempo para otimizar desempenho e SEO.
  • Leva tempo para se preparar para entrevistas técnicas e desafios de programação.

Aqui vai uma dica de quem já passou por isso:

Seja paciente. Grandes desenvolvedores não são feitos da noite para o dia ☺️

Continue praticando e construindo seus projetos. Sua hora vai chegar!

Compartilhe e Comente

© CarsaiDev de Carsai Moçambique

Enviar um comentário