El menú desplegable a menudo se encuentra en mi desarrollo, pero no es necesario reescrito ningún proyecto. Aunque es simple pero muy problemático modificarlo, todavía soy relativamente flojo. Hoy tengo tiempo para organizar los menús en el desarrollo de mi proyecto anterior y escribir una versión general. No necesitaré ser tan problemático en el futuro.
Características
El menú compilado hoy es desarrollado por JQuery+CSS con las siguientes características:
1. Fuerte versatilidad
Hubo un problema con un menú desplegable que usé antes, y la navegación principal y el submenú deben establecerse por separado. Por ejemplo, el menú de segundo nivel es class = "First_Menu", el menú de tercer nivel es class = "Second_Menu" ... y así sucesivamente. Hay un problema con este método de escritura, que es que no es propicio para los programadores que realizan la salida de bucle. Este menú solo necesita introducir un estilo CSS, sin la necesidad de definir un menú de niveles múltiples.
2. Hermosas instrucciones desplegables automáticas de llamadas
En el pasado, agregaríamos una clase desplegable al menú desplegable manualmente. Ahora, solo necesitamos definir el estilo del efecto desplegable en el CSS, y el código buscará automáticamente el menú desplegable y agregará flechas indicadoras;
3. Llamada simple
La lista de salida del programador es simple y no requiere mucho juicio, solo llame a los datos del menú de manera recursiva.
lograr
1. Código HTML
Primero, generamos datos de menú en la página, que consiste en UL y LI para formar una lista de menú. El código de estructura específico es el siguiente:
<ul> <li> <a href = "#"> HOME </a> </li> <li> <a href = "#"> menú uno </a> <ul> <li> <a href = "#"> rock coaster </a> </li> <li> <a href = "#"> erupción volcánica </a> </li> <a> <a href = "#"#"#" Little ". Bird</a></li> </li> </li> <li><a href="#">Menu Two</a> <ul> <li><a href="#">About Us</a> <ul> <li><a href="#">Geographical Geo</a> <ul> <li><a href="#">Flying Pigeon</a></li> <li><a href = "#"> nacimiento y eterno </a> </li> <li> <a href = "#"> href = "#"> exitoso </a> </li> </li> </li> <li> <li> <a href = "#"> base de datos </a> <ul> <li> <a href = "#"> Table de la base </a> </a> </" href = "#"> cifrado de datos </a> </li> <li> <a href = "#"> modelado de datos </a> </li> </li> </li> <li> <a href = "#"> c cámara </a> </li> </li> </li> <li> <li> <a href = "#"> Productos de prueba </a> </li> </li>
Algunos códigos HTML básicos son simples y no necesitan explicar el significado del código. Enfatizan la estructura del código: si el segundo nivel, el tercer nivel o varios menús de nivel se anidan principalmente UL; El nombre de la hoja de estilo también es muy único, y el submenú es el estilo "sub_menu", que es muy propicio para el programa de llamadas de bucle de código.
2. Estilo CSS
El código de estilo CSS también es muy simple, el código específico es el siguiente:
A {TEXT-Decoration: None; } ul, li {list-style: none; margen: 0; relleno: 0; }/*Menú de definición*/. Menue Li {fondo:#111; Color: #fff; Altura: 30px; Línea de altura: 30px; Posición: relativo; flotante: izquierda; margen-derecha: 5px; Ancho: 100px; Text-Align: Center; Font-Family: Arial, Helvetica, Sans-Serif; } .Menue li a {color: #fff; tamaño de fuente: 14px; Pantalla: bloque; }/* estilo de menú desplegable*/ul.sub_menu {posición: absoluto; ancho: 100px; Pantalla: ninguno; Índice Z: 999; } .Menue li ul.sub_menu li {fondo: ninguno; Color:#555; tamaño de fuente: 12px; Border-Bottom: 1PX #333 Sólido; Posición: relativo; Ancho: 100px; Altura: 30px; } .Menue li ul.sub_menu li.last {border-bottom: none; } /*JS agregará esta clase al último LI, elimine el efecto de fondo de borde* /. Menue Li ul.sub_menu li a {fondo:#222; Color:#888; pantalla: bloque; altura: 30px; } .Menue li ul.sub_menu li a: hover, .menue li ul.sub_menu li a.now {fondos:#f90; color: #fff;}. Menue li.now, .menue li.current {fondo:#f60; color: #fff;}/*Si hay una clase agregada por el menú desplegable*/. Ha menado. Antecedentes: URL (Arrow.png) Sin repetición a la derecha; Right-Right: 15px;}/*La flecha de navegación principal está abajo*/. Menue Li A.Hasmenu {fondo: url (flech.png) sin repetición a la derecha; Right-Right: 15px; Posición de fondo: derecha -30px;}/*La flecha del menú desplegable es correcta*/. Menue li ul.sub_menu li a.hasmenu {en segundo plano:#222 url (Arrow.png) no-repite derecho Sin repetir Color: #ffff;}Aquí solo enfatizaré dos precauciones:
1. La diferencia entre absoluto y relativo en la posición
Absoluto: Posicionamiento absoluto, CSS se escribe como "Posición: Absoluto", y su posicionamiento se divide en dos situaciones, como sigue:
R. Si la parte superior, derecha, inferior e izquierda no está configurada, el valor predeterminado es el punto original basado en el "punto original del área de contenido" del padre.
B. Hay casos en los que se establecen arriba, derecha, abajo e izquierda. Hay dos situaciones de la siguiente manera:
(1). El padre no tiene atributo de posición, y la esquina superior izquierda del navegador (es decir, cuerpo) se coloca como el "punto de coordenada original". La posición está determinada por los atributos superior, derecha, inferior e izquierda.
(2). El padre tiene un atributo de posición, y el "punto original coordinado" del padre es el punto original.
relativo: posicionamiento relativo, CSS se escribe como "posición: relativo", refiriéndose al "punto original del área de contenido" del padre como el punto original, y sin un padre, el "punto original del área de contenido" del cuerpo como punto original. La posición está determinada por los atributos superior, derecha, inferior e izquierda, y tiene la función de "estirar u ocupar la altura".
Las dos diferencias anteriores son muy importantes y son una técnica muy común. Debes distinguirlos. He perdido mucho tiempo en el desarrollo y encontré problemas. De hecho, es causado por estos dos atributos.
2. Use la posición de fondo
A veces, para mejorar la velocidad del sitio web y facilitar la gestión del sitio web, a menudo colocamos algunas imágenes pequeñas comúnmente utilizadas en una imagen grande. Cuando CSS necesita imágenes pequeñas correspondientes, se puede lograr a través de este método. Mientras entendamos lo que significa, es muy conveniente llamar. Este método explica que el punto blanco es la función de intercepción de imagen, y los detalles de uso son los siguientes:
gramática:
Posición de fondo: Longitud || longitud
Posición de fondo: posición || posición
Valor:
Longitud: porcentaje | El valor de longitud que consiste en números de puntos flotantes e identificadores de la unidad.
Posición: Top | centro | parte inferior | Izquierda | centro | bien
ilustrar:
Establece o recupera la ubicación de la imagen de fondo del objeto. La propiedad de imagen de fondo debe especificarse primero. Este posicionamiento de atributos no se ve afectado por la configuración del atributo de parche del objeto (relleno). El valor predeterminado es: 0% 0%. En este momento, la imagen de fondo se colocará en la esquina superior izquierda del área de contenido donde el objeto no incluye parches (relleno). Si solo se especifica un valor, el valor se utilizará para las coordenadas horizontales. La ordenada no se debe al 50%. Si se especifican dos valores, el segundo valor se usa para la ordenada. Si el valor se establece en el centro derecho, ya que el valor del eje horizontal anulará el valor central, la imagen de fondo se colocará a la derecha. Aquí hay algunas ecuaciones
Arriba a la izquierda, la parte superior izquierda es equivalente a 0% 0%.
La parte superior superior, superior, la parte superior central es equivalente a 50% 0%.
Tapa derecha, la parte superior derecha es equivalente al 100% 0%.
Izquierda, centro izquierdo, el centro a la izquierda es equivalente a 0% 50%.
Centro, centro central es equivalente a 50% 50%.
Centro derecho, derecho, derecho a la derecha es equivalente al 100% 50%.
Abajo, la parte inferior izquierda es equivalente a 0% 100%.
El fondo inferior, el centro, la parte inferior central es equivalente al 50% 100%.
Dentro de la derecha, la parte inferior derecha es equivalente al 100% 100%
3. Código JS
Este menú se basa en jQuery, por lo que primero debe introducir la base del código JQuery y luego escribir el siguiente código JS para implementar el menú desplegable.
<script src = "js/jQuery.min.js"> </script> <script> $ (documento) .Ready (function () {// establecer el resaltado predeterminado para la navegación no tiene nada que ver con este menú $ ("ul.menue li.menue_li: eq (0)"). addClasss ("actual")/*jQuery Menu Star Subscore $ (". Sub_menu"). Find ("Li: Last-Child"). AddClass ("Último") // Transfiar todo Li para determinar si el submenú está incluido, agregue una flecha para indicar el estado $ (". Menue Li"). Cada (función () { if ($ (this) .find ("ul"). longitud! = 0) {$ (this) .find ("a: primero"). addClass ("Hasmenu")}}) // $ (". Menue Li"). Hover (function () {$ (this) .addClass ("ahora"); var menú = $ (this); menú.find ("UL.SUB_MENU: Primero"). Show (); submenu.css ({izquierda: "100px", top: "0px"}) $ (". sub_menu li"). Hover (function () {$ (this) .find ("a: primero"). adClass ("ahora") $ (this) .find ("ul: primero"). show ();}, function () { $ (this) .find ("a: primero"). removeClass ("ahora") $ (this) .find ("ul: primero"). hide ()});/*jQuery menú final*/}) </script>A través de los pasos anteriores, se realiza un menú general de niveles. El código anterior es la acumulación de mi desarrollo diario. Debido a mi nivel limitado, puede haber muchos errores. Espero que mis colegas critiquen y corrijan o propongan códigos más optimizados para mi referencia. Gracias.
El código de implementación anterior del menú desplegable Universal Infinitus es todo el contenido que he compartido con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.