Plantilla de barra de navegación HTML y CSS adaptable

Abrir en el editor Video Publica tu código

Recomendado

31 October 2023

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Navbar</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

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

nav {
      background-color: #333;
      color: white;
      padding: 0.75rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.logo {
      font-size: 1.5rem;
      font-weight: bold;
    }

.nav-links {
      display: flex;
      gap: 1.5rem;
    }

.nav-links a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
    }

.nav-links a:hover {
      color: #f0a500;
    }

.hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

.hamburger div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 4px 0;
    }

@media (max-width: 768px) {
      .nav-links {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        text-align: center;
      }

.nav-links.active {
        display: flex;
      }

.hamburger {
        display: flex;
      }
    }
  </style>
</head>
<body>

<nav>
  <div class="logo">MySite</div>
  <div class="hamburger" onclick="toggleMenu()">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="nav-links" id="navLinks">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
</nav>

</body>
</html>

Plantilla de barra de navegación HTML y CSS adaptable

Recomendado

Código del Juego del Círculo

Tres en raya

CSS Aurora

HTML

CSS

JS

Recomendado

Código del Juego del Círculo

Tres en raya

CSS Aurora

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS