Plantilla de barra de navegación HTML y CSS adaptable

Abrir en el editor Publica tu código

Recomendado

10 November 2024

Página de inicio Efecto deslizante de imagen Sitio web

11 July 2024

<!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

Barra de navegación

Página de inicio Efecto deslizante de imagen Sitio web

Efecto brillante de neón

HTML

CSS

JS

Recomendado

Barra de navegación

Página de inicio Efecto deslizante de imagen Sitio web

Efecto brillante de neón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS