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 tanteando este camino! Por supuesto, si hay algún error o problema, puede comentarlo.
El objetivo ideal de este menú de navegación es
¡Implementemos este menú ideal paso a paso!
A menudo veo a muchos amigos haciendo menús en foros, pero para ser honesto, o la estructura es redundante, o tiene forma pero no espíritu, o tiene 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 elaborar 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 impresión, el menú estándar ideal debería tener la siguiente estructura:
La estructura original del menú ahora está disponible. Puede ver que no contiene 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, es como el menú que usamos para pedir comida en un restaurante. Probablemente sea más simple que eso, y hay algo delante de cada menú. . ¡Un pequeño punto! ¡Dios mío, estamos tan lejos de nuestro hermoso menú!
Estilo:
Bueno, ahora es solo un esqueleto. ¡Embellecémoslo un poco y agreguemos algunos estilos simples! ¡Al menos deberíamos quitar los puntos pequeños y organizarlo 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, guarda la parte del diseño, lo cual es genial. Pero para convertirlo en un botón de tres estados, debemos modificar este botón. ¿Viste el séptimo objetivo? Vamos a crear 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. Como se muestra en la Figura 2
Imagen 1
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 "Cómo crear una tarjeta de póquer Serie 1: tecnología de optimización de fondo de imágenes de sprites CSS".
Figura 2
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 y la convertimos en una pequeña imagen de fondo.
Los gráficos requeridos en
la Figura 3
están todos 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 estoy en una autocomplacencia complaciente ...
No estés ocupado, Dios mío, si instalo cuadros de esta manera, ¿cómo puedo lograr el ¿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 esta etiqueta debe agregarse para cumplir con los requisitos).
Agregamos un contenedor de intervalo 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: sólo 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 que no nos queda más remedio que hacer.
Afortunadamente, algunos expertos ya han encontrado una solución. Lea estos dos artículos primero.
Tutoriales relacionados:
" Dos ejemplos de aplicación de visualización: bloque en línea " (Qin Ge)
Todos entendemos el principio de
" Atributos de bloque en línea para simular compatibilidad " (Yi Fei).
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.
Primero configuramos display:inline-block, y luego usamos relleno para expandir la distancia de sus lados a dale algo 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. Alinee su imagen a la izquierda y establezca el relleno en. apoyarlo. Abra su ancho y alto.
y luego configúrelos nuevamente en el 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 tendrá. 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.
Luego, el siguiente es el efecto después de hacer clic con el mouse.
ok, parece que ya terminaste. Compruébalo en diferentes navegadores. , parece que puede lograr resultados satisfactorios. A continuación se muestra una captura de pantalla:
Figura 4
La versión CSS pura del menú de puertas correderas está básicamente lista.