CSS Barra de navegación
Vertical
Horizontal
Barra de navegación
Usar bien la barra de navegación es muy importante para cualquier sitio web.
Con CSS puedes convertir el aburrido menú HTML en una atractiva barra de navegación.
Barra de navegación = lista de enlaces
Como estándar HTML básico, una barra de navegación es necesaria.
En nuestro ejemplo crearemos una barra de navegación con una lista HTML estándar.
La barra de navegación es básicamente una lista de enlaces, por lo que usar los elementos <ul> y <li> tiene mucho sentido:
Ejemplo
Pruébalo »
Ahora, eliminemos los márgenes y el relleno de la lista:
Análisis del ejemplo:
- list-style-type:none - Elimina los marcadores de la lista. Una barra de navegación no necesita marcadores de lista.
- Elimina la configuración predeterminada del navegador estableciendo márgenes y relleno a 0.
El código del ejemplo anterior es el código estándar utilizado para barras de navegación verticales y horizontales.
Barra de navegación vertical
Con el código anterior, solo necesitamos aplicar estilo al elemento <a> para crear una barra de navegación vertical:
Explicación del ejemplo:
- display:block - Muestra el enlace como elemento de bloque, haciendo que toda el área sea enlazable (no solo el texto) y nos permite especificar un ancho.
- width:60px - Los elementos de bloque ocupan por defecto el ancho máximo. Nosotros especificamos un ancho de 60 píxeles.
Consejo:Verel ejemplo de la barra de navegación vertical con estilo completo。
Nota:Asegúrate de especificar el ancho del elemento <a> en la barra de navegación vertical. Si se omite el ancho, IE6 puede producir efectos inesperados.
Ejemplo de barra de navegación vertical
Crea un ejemplo simple de barra de navegación vertical que cambia el color de fondo al pasar el mouse sobre las opciones:
Ejemplo
Pruébalo »
Ejemplo de barra de navegación activa/actual
Después de hacer clic en una opción, podemos agregar la clase "active" para indicar qué opción está seleccionada:
Crear enlaces y agregar bordes
Se pueden agregar estilos a <li> o <a>text-align:centerpara centrar los enlaces.
Se puede agregarborderel atributo a <ul>borderpara que la barra de navegación tenga borde. Si se desea agregar borde a cada opción, se puede agregar en cada elemento <li>border-bottom :
Ejemplo
Pruébalo »
Barra de navegación fija de altura completa
A continuación, creamos una barra de navegación fija de altura completa a la izquierda y contenido desplazable a la derecha.
Ejemplo
Pruébalo »
Nota:Este ejemplo se puede usar en dispositivos móviles.
Barra de navegación horizontal
Hay dos métodos para crear una barra de navegación horizontal. Usaren línea (inline)oflotante (float)para los elementos de la lista.
Ambos métodos son buenos, pero si quieres que los enlaces tengan el mismo tamaño, debes usar el método flotante.
Elementos de lista en línea
Uno de los métodos para crear una barra de navegación horizontal es especificar los elementos; el siguiente código es el estándar en línea:
Análisis del ejemplo:
- display:inline; - por defecto,<li>el elemento es un elemento de bloque. Aquí, eliminamos los saltos de línea antes y después de cada elemento de lista para mostrarlos en una línea.
Consejo:Verel ejemplo de la barra de navegación horizontal con estilo completo。
Elementos de lista flotantes
En el ejemplo anterior, los enlaces tienen diferentes anchos.
Para que todos los enlaces tengan el mismo ancho, flota los elementos <li> y especifica el ancho del elemento <a>:
Análisis del ejemplo:
- float:left - usa elementos de bloque flotantes para deslizarlos uno al lado del otro.
- display:block - Muestra el enlace como elemento de bloque, haciendo que toda el área sea enlazable (no solo el texto) y nos permite especificar un ancho.
- width:60px - Los elementos de bloque ocupan por defecto el ancho máximo. Nosotros especificamos un ancho de 60 píxeles.
Consejo:Verel ejemplo de la barra de navegación horizontal completamente estilizada。
Ejemplo de barra de navegación horizontal
Crea una barra de navegación horizontal que cambia el color de fondo al pasar el mouse sobre las opciones.
Ejemplo
Pruébalo »
Ejemplo de barra de navegación activa/actual
Después de hacer clic en una opción, podemos agregar la clase "active" para indicar qué opción está seleccionada:
Enlaces alineados a la derecha
Alinea a la derecha la opción más a la derecha de la barra de navegación (float:right;):
Ejemplo
Pruébalo »
Agregar divisores
A través de <li> conborder-rightestilos para agregar divisores:
Ejemplo
Pruébalo »
Barra de navegación fija
Se puede configurar la barra de navegación de la página fijada en la parte superior o inferior:
Nota:Este ejemplo se puede usar en dispositivos móviles.
Barra de navegación horizontal gris
Barra de navegación horizontal gris
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
Pruébalo »
Más ejemplos
Barra de navegación superior adaptable: cómo usar las consultas de medios CSS3 para crear una navegación adaptable.
Barra de navegación lateral adaptable: cómo usar las consultas de medios CSS3 para crear una navegación lateral.
Menú desplegable de navegación: configurar un menú desplegable dentro de la barra de navegación.
Iconos de navegación: usar iconos como opciones de la barra de navegación.
Otras extensiones
Barra de navegación horizontal gris
Pruébalo »
Barra de navegación superior adaptable: cómo usar las consultas de medios CSS3 para crear una navegación adaptable.
Barra de navegación lateral adaptable: cómo usar las consultas de medios CSS3 para crear una navegación lateral.
Menú desplegable de navegación: configurar un menú desplegable dentro de la barra de navegación.
Iconos de navegación: usar iconos como opciones de la barra de navegación.