Cómo construir una barra de navegación

Barras de navegación

Las barras de navegación son un elemento muy importante para cualquier sitio web. Proporcionan el método principal de navegación al proporcionar una lista principal de enlaces a un usuario. Existen muchos métodos para crear una barra de navegación. La forma más fácil de crear una barra de navegación es usar una lista desordenada y darle estilo con CSS.

Las barras de navegación se componen principalmente de

    listas que están organizadas horizontalmente y con estilo.

    Al diseñar las barras de navegación, es común eliminar el espacio adicional creado por el

      y
    • etiquetas, así como las viñetas que se insertan automáticamente:

       list-style-type: none; margin: 0px; padding: 0px;

      Ejemplo:

      Hay dos partes en cualquier navegación: el HTML y el CSS. Este es solo un ejemplo rápido.

      
             
      • Home
      • About
      • Contact
      /* Define the main Navigation block */ .myNav { display: block; height: 50px; line-height: 50px; background-color: #333; } /* Remove bullets, margin and padding */ .myNav ul { list-style: none; padding: 0; margin: 0; } .myNav li { float: left; /* Or you can use display: inline; */ } /* Define the block styling for the links */ .myNav li a { display: inline-block; text-align: center; padding: 14px 16px; } /* This is optional, however if you want to display the active link differently apply a background to it */ .myNav li a.active { background-color: #3786E1; }