Menú de navegación con puerta corredera dividida hecha a mano

Introducción: este artículo le enseñará paso a paso cómo crear un menú de navegación de puerta corrediza estándar de tres capas muy interesante. A partir de las ideas, principios, pasos y métodos, se puede decir que "todo es posible". Lo eres, creo que lo harás después de leer este artículo. También puedes crear tu propio menú de navegación estándar súper hermoso. Este menú no tiene una estructura redundante y favorece la salida de datos dinámica. Es muy adecuado para su uso en proyectos normales. ¡Este tutorial habla sobre los principios básicos de las puertas correderas! ¡Creo que será útil para aquellos amigos que todavía están a tientas en este camino! Por supuesto, si hay algún error o problema, puede comentarlo.

Los objetivos ideales que este menú de navegación quiere lograr son:

1. Hermoso y personal.

2. La estructura es clara, la semántica es clara y no hay etiquetas redundantes.

3. El rendimiento, la estructura y el comportamiento están separados en tres niveles, sin ninguna intrusión.

4. Propicio para la salida de datos de programas en segundo plano.

5. El menú tiene cambios de efectos de tres estados.

6. Puede resaltar y registrar los elementos del menú en los que se hace clic.

7. Ancho de texto adaptable. Cuando el contenido del texto cambia de longitud, el botón puede cambiar con el tiempo.

8. Compatible con todos los principales navegadores.

¡Implementemos este menú ideal paso a paso!
A menudo veo a muchos amigos haciendo menús en foros, pero para ser honesto, o son estructuralmente redundantes, o tienen forma pero no espíritu, o tienen espíritu pero no apariencia. Y lo que queremos crear ahora es el mejor menú. Ya seas novato o veterano, deberías encontrar algo útil en este tutorial.
La estructura de un menú ideal debe ser limpia, libre de redundancias y separada. Sin embargo, por diversas razones, se le agregarán muchas cosas sin sentido y, al final, estará cada vez más lejos de ser "limpio". . Por eso, antes de realizar un menú, hay ciertos principios que se deben tener presentes durante todo el proceso de elaboración y que no pueden verse obstaculizados por ninguna fuerza externa.

Estructura

En mi opinión, el menú estándar ideal debería tener la siguiente estructura:

La estructura original del menú ahora está disponible. Puede ver que no hay etiquetas sin sentido. Cada etiqueta tiene su propia semántica. Echemos un vistazo en el navegador. Oh, es realmente simple. Es solo texto original, como, um, como el menú que usamos para pedir comida en un restaurante. Puede que sea más simple que eso, ¡y hay un pequeño punto! ¡Dios mío, estamos tan lejos de nuestro hermoso menú!

Estilo

Bien, ahora es solo un esqueleto, embellezémoslo un poco, agreguemos algunos estilos simples, al menos eliminemos los puntos pequeños y ¡coloquémoslo horizontalmente!

Bien, ¡agreguemos un poco de estilo!

Bueno, mira ahora, hemos logrado nuestro pequeño objetivo.
Ahora que el esqueleto está en su lugar, el siguiente paso es poner ropa bonita en cada elemento del menú.
Para cumplir con el primer requisito, primero debes tener un botón hermoso y dibujar uno tú mismo. ¡Oh, no soy un artista, es difícil! Sin embargo, no seas demasiado impaciente. Internet es tan grande que hay muchas maravillas. Quizás alguien ya haya hecho algo bueno. Simplemente busqué en Google y encontré una. (Las lágrimas están llegando...) Código fuente del botón: http://bbs.blueidea.com/thread-2860891-1-1.html

Con el código fuente del botón diseñado, es fantástico guardar la parte del diseño. Pero para convertirlo en un botón de tres estados, debemos modificar este botón. ¿Viste el séptimo objetivo? Estamos creando un botón adaptativo, por lo que necesitamos realizar algún procesamiento en este botón.

Mostramos estos tres botones como tres estados: cuando el mouse se aleja, después de hacer clic y cuando el mouse se mueve hacia arriba. Para crear un menú de puerta corrediza, debe cortar un botón del medio. colocado a la izquierda, y la imagen de la derecha es Colóquelo en el lado derecho. Para adaptarse al alargamiento del texto, es necesario estirar un poco el ancho de esta capa. Sin embargo, esta imagen tiene un efecto de sombra muy complejo y no se puede estirar casualmente, de lo contrario el efecto no será el mismo. Abrámoslo por la mitad y estiramos el lado izquierdo de la imagen hacia el derecho hacia adelante. Entonces, primero lo cortamos en seis partes como se muestra en la imagen y luego fusionamos estas seis imágenes. ¿Por qué es así? ¡Eche un vistazo al principio de los sprites CSS! No entraré en detalles aquí. Puedes leer mi otro artículo "Creación de una tarjeta de póquer Serie 1: tecnología de optimización de fondo de imágenes de sprites CSS".

En la imagen de arriba, la primera y segunda imágenes forman el estilo de menú normal (estilo predeterminado), la tercera y cuarta imágenes forman el estilo de desplazamiento y la quinta y sexta imágenes forman el estilo del elemento de menú en el que se hace clic.
Extrajimos específicamente la imagen de la sombra e hicimos una pequeña imagen de fondo.

Los gráficos requeridos están listos. A continuación, agreguemos esta imagen al elemento del menú. Un botón requiere que se muestren dos imágenes. Todo el mundo sabe que una etiqueta html solo puede contener una imagen (si descubre que una etiqueta puede contener dos imágenes, ¡dímelo a tiempo y te invitaré a cenar!). ¡Vaya! Cada elemento en la estructura de mi menú tiene exactamente dos etiquetas, una es li y hay una etiqueta A, que se puede usar para contener las imágenes izquierda y derecha. Li se usa para sostener la imagen de la izquierda y A se usa para sostener la imagen de la derecha. Realmente me admiro, se me ocurren tan buenas ideas y soy tan complaciente conmigo mismo...

No estés ocupado, Dios mío, si instalo imágenes de esta manera, ¿cómo puedo lograr los tres estados de desplazamiento del mouse? Todos deberíamos saber que, excepto el maldito IE6, otros navegadores actualmente admiten la pseudoclase li:hover. Sin embargo, para ser compatible con los principales navegadores (este es nuestro octavo objetivo, ¡no lo olvides!), este método no funciona. ¡IE6 solo puede aplicar la pseudoclase de desplazamiento en la etiqueta A e ignora otras etiquetas!

Dado que IE6 solo puede aplicar la pseudoclase de desplazamiento en la etiqueta A, si queremos crear un menú de puerta corredera adaptable, debemos realizar algunos cambios estructurales. Parece que solo podemos agregar otra etiqueta a la etiqueta A. la estructura del menú se verá así. (Nota: Aquí es donde la estructura comienza a cambiar. Aunque siempre he querido evitar que esto suceda, parece que para cumplir con los requisitos se debe agregar esta etiqueta.)

Agregamos un contenedor span a la etiqueta A, que incluye el contenido del texto. Ahora hay dos etiquetas que pueden contener dos imágenes. Colocamos la imagen derecha en el fondo de la etiqueta A y la alineamos a la derecha, y colocamos la imagen izquierda en la etiqueta SPAN y la alineamos a la izquierda. Esto mostrará una forma de botón completa.
Afortunadamente, aunque se agrega una etiqueta adicional, no carece completamente de semántica.

Bien, nuestros preparativos casi están terminados, es hora de darle ropa nueva al menú.

Si queremos crear un menú con ancho adaptable, no podemos establecer el valor del ancho del menú, por lo que no podemos establecer el ancho y luego flotarlo hacia la izquierda como lo hacemos normalmente cuando creamos un menú horizontal con un ancho fijo. Si este es el caso, cuando el ancho de cada elemento del menú es diferente, debe definir el ancho de cada elemento por separado, luego debe definir una ID o CLASE para cada elemento del menú, y este método no es propicio para el bucle dinámico. salida del programa en segundo plano.

Lo que necesitamos es organizar automáticamente cada elemento del menú en una fila de izquierda a derecha como un elemento en línea. Luego necesitamos que el menú se muestre en línea. Bien, usemos display:inline. Este es un atributo muy útil: su disposición analizada. puede cumplir con nuestros requisitos básicos: organizar automáticamente los elementos de la etiqueta de izquierda a derecha en una fila, y el ancho de cada elemento puede ser diferente.

Si el uso de los atributos anteriores realmente puede satisfacer nuestras necesidades, no habrá contenido de texto como el siguiente.
Aunque este atributo puede satisfacer las necesidades básicas de nuestro proyecto, tiene una debilidad muy fatal: no puede establecer los valores de ancho y alto. Si no lo cree, puede intentarlo. Solo aparece como la altura y el ancho predeterminados del texto. Se ocultará automáticamente después de exceder este valor de ancho y alto. De esta manera, tengo una imagen de fondo aquí. Para mostrar el efecto de esta imagen, necesitamos dar un ancho y un alto. Esto significa que no podemos lograr nuestro efecto, ¡lo cual es frustrante! Afortunadamente, hay otro atributo: display:inline-block; su rendimiento es lo que necesitamos.

Pero... este atributo también tiene una debilidad fatal: solo puede ser reconocido por navegadores avanzados como FF3. Otros navegadores sólo pueden tomar un desvío. ¡Oh, oh! Por tanto, ¡qué importante es unificar los estándares de los navegadores! Parece que HACK también es una forma de alivio con la que tenemos que lidiar.

Afortunadamente, algunos expertos ya han encontrado una solución. Lea estos dos artículos primero.

Tutoriales relacionados:
"Dos ejemplos de aplicación de display:inline-block" (Qin Ge)
"Atributo de bloque en línea para compatibilidad de simulación" (Yi Fei)

Todos entendemos el principio y podemos crear un menú adaptativo basado en las técnicas proporcionadas en los dos artículos anteriores.

Primero escribamos el estilo de la imagen de la derecha, que se aplica a la etiqueta del nodo secundario A del elemento li.

li a{display:inline-block; padding-right:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; *padding-bottom:0; /button.gif) sin repetición derecha -36px; decoración de texto: ninguna; tamaño de fuente: 12px; color:#fff;}

Primero configuramos display:inline-block y luego usamos padding para expandir sus márgenes para que tenga una cierta cantidad de espacio para llenar la imagen. Tenga en cuenta que la ruta de la imagen aquí se reemplaza con su propia ruta. Luego configure otros estilos, como eliminar subrayados, color de fuente, tamaño de fuente, etc. Configure la imagen para que se alinee a la derecha.

La imagen en el lado izquierdo del botón se coloca en el elemento SPAN, alinea su imagen a la izquierda y configura el relleno para expandir su ancho y alto.

Luego, configúrelos nuevamente en modo en línea, activando la función haslayout de IE.
En el código anterior, también vemos una aplicación HACK, *padding-bottom: 0; y *padding-top: 0;, que se utilizan para resolver los diferentes efectos de navegadores como IE y FF. Si no me cree, puede eliminarlo y ver qué efecto tiene. Hay un problema con la extensión de altura en IE.
Bien, ahora es el momento de escribir el efecto cuando se mueve el mouse.

li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;}
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}

El siguiente es el efecto después del clic del mouse.

li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;}
li a: intervalo activo {padding-left: 30px; background:url (images/button.gif) sin repetición izquierda -144px; font-weight: negrita;}

Ok, parece que ya terminaste. Si lo miras en diferentes navegadores, parece que puedes lograr resultados satisfactorios.

Ahora la versión CSS pura del menú de puertas correderas está básicamente lista.