Cómo usar las puertas corredizas en CSS sin pestañas

Las hojas de estilo en cascada son un tipo de lenguaje de hojas de estilo que agrega estilo al contenido web escrito en un lenguaje de marcado como XML, HTML o XHTML. La técnica de puertas correderas en CSS consiste en crear un efecto dinámico utilizando dos imágenes de fondo separadas. La imagen superior se coloca sobre la imagen inferior para crear una ilusión sin completar el ocultamiento de la imagen inferior. El truco para implementar la técnica de la puerta deslizante sin pestañas es generar elementos de navegación basados ​​en texto utilizando listas diseñadas con CSS.

1.

Comience por crear una lista desordenada de los elementos de navegación incluidos en la etiqueta "DIV". Por ejemplo:

• Página principal
• productos y servicios
• Contáctenos

En este ejemplo, la lista contiene etiquetas de anclaje y rango. Las etiquetas de anclaje utilizan el atributo "href" para vincular a la ubicación específica de los elementos de navegación. También utiliza la etiqueta para controlar el estilo del texto dentro de los elementos de navegación.

2.

Agregue un poco de estilo a los elementos de navegación definiendo el color de fondo, habilitando flotación, especificando márgenes, configurando el desbordamiento en automático y deshabilitando el estilo de lista para los elementos de lista. Float es una propiedad CSS que permite que un elemento se mueva horizontalmente hacia la izquierda o hacia la derecha para que otros elementos puedan envolverlo. La propiedad de desbordamiento define cómo debe comportarse un objeto si el contenido se expande más allá de su caja rectangular. Al configurar el desbordamiento en automático, el desbordamiento se ocultará, pero se puede agregar una barra de desplazamiento para ver el contenido del desbordamiento.

3.

Aplique las imágenes de fondo seleccionadas a los estilos de anclaje e intervalo para completar la técnica de la puerta deslizante y produzca un efecto de desplazamiento para los elementos de navegación.