Tutorial del proyecto JavaScript del menú de la barra de navegación

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

navbar/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar project</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <nav>
      <div class="nav-main">
        <div class="nav-header">
          <img src="./logo.svg" alt="logo" />
          <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
        <ul class="menu">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
    <script src="index.js"></script>
  </body>
</html>

Menú de la barra de navegación

Menú de la barra de navegación

Créalo a partir del código fuente

Practica con proyectos relacionados

Barra de búsqueda animada

Clasificación de emojis

Menú de la barra lateral

Barra de búsqueda animada

Clasificación de emojis

Menú de la barra lateral